web-dev-qa-db-ja.com

3.5「メディアの追加」ポップアップ（Backbone.js）をカスタマイズする

これは新しい（ish）3.5 "Add Media"ポップアップとそれをカスタマイズする方法に関するもう一つの質問です。

私がやろうとしていること

私は4つの主なことをやろうとしています：1） "Flickrのアップロード"というタイトルのカスタムタブを作成します。 2）アップロードに表示されるテキストをカスタマイズしますbutton。 3）selectドロップダウンに外部のAPIソートオプションを追加します（つまり、unsetはデフォルトのオプション、setは自分自身で作成します。カスタムタブの場合のみ）。 4）表示されている写真を外部のAPIからのものに変更しても、右側のサイドバーにタグ、説明などを追加することができます。

どうしたのか

Gist を使って@Fabien Quatravaux私は上のリストのステップ1) and 2)を完了しました...しかし、私はこのことを理解するのにいくつかの問題を抱えています。これが表示されているものです。

Good start but not done!

終了するために助けが必要な場所

ご覧のとおり、selectドロップダウンオプションをカスタマイズする方法、右側のバーにmeta-data入力を表示する方法、および画像が正しい方法で選択され、ボタンが同じように操作されるようにする方法をまだ理解する必要があります。 [メディアの挿入]タブ.

私はjQuery let-alone Backboneとほとんど混同していません...だから、私は何をすべきか迷っているのは言うまでもありません。どこから始めればいいのかわかりません。

助けてくれてありがとう！

plugin-developmentjavascriptmediamedia-modalbackbone
5
Designer 17

私はBackboneを私のプロジェクトに適応させたことがあるので、皆さんが始められるように手助けするかもしれません。

バックボーンテンプレートのレンダリングを調整したい場合は、既存のテンプレート用の組み込みフィルタがないため、それらを書き換える必要があります。

add_action('print_media_templates', 'print_my_media_templates');

function print_my_media_templates() {
    ?>
    <script type="text/html" id="my-custom-template">
        //TODO: Copy existing blade template and adapt to your needs
        //TODO: You can access all custom vars here and seed
    </script>
    <?php
}

次にやること：あなたの要求されたテンプレートを準備し、あなたのデータでそれをシードします。

add_action('media_view_strings', 'prepare_data_for_js');

function prepare_data_for_js( $response ) {
    //TODO: Conditional seeding of $response['some_var']
}

新しいテンプレートをレンダリングするためにあなたのcustom_media_menu.jsを適応させてください：

wp.media.view.Custom = wp.media.view.Custom.extend({
    template: function(view) {
        return wp.media.template('my-custom-template')(view);
    }
});

それからあなたのAPIマジックはもうすぐ動き始めるはずです。

1
iantsch