web-dev-qa-db-ja.com

メディアライブラリモードで添付ファイルにカスタムクラスを追加する

enter image description here 

上のスクリーンショットでは、グリッドモードがアクティブな メディアライブラリにあります 。添付ファイルフィルタwp_prepare_attachment_for_jsに応じてカスタムクラスを追加したいです。

たとえば、私はフィルタにフックします。

public function wp_prepare_attachment_for_js($response, $attachment, $meta) {
    $response['customClass'] = "i-want-this-class";
    return $response;
}

おそらく、レンダリング処理にフックするためにBackbone.jsと連携するのでしょうか。それともajaxCompleteによる回避策が必要で、レンダリングされるまで待ちますか？

attachmentsbackbone
6
Matthias Günter

メディアライブラリグリッドの各要素に追加されたクラスは、 media-views.js ファイルに動的に生成されます。特に、要素をレンダリングするコードは wp.media.view.Attachment 関数の一部です。これはBackbone.jsビューなので、必要なクラスやその他の属性をグリッド要素に追加するためにそのビューのライブラリを拡張することが可能です。

まずphp：

//Pass the variable to the javascript file
function wpse223259_filter_wp_prepare_attachment_for_js( $response, $attachment, $meta ) {

    $response['customClass'] = "i-want-this-class";

    return $response;

};

add_filter( 'wp_prepare_attachment_for_js', 'wpse223259_filter_wp_prepare_attachment_for_js', 10, 3 );


//Enqueue the javascript file that will extend the view
function wpse223259_add_class_to_media_library_grid_elements() {

    $currentScreen = get_current_screen();

    if( 'upload' === $currentScreen->id ) :

        global $mode;

        if( 'grid' === $mode ) :

            wp_enqueue_script( 'add-class-to-media-library-grid-elements', 'your/path/to/the/javascript-file.js', array( 'jquery' ) ); //Edit to match the file location

        endif;

    endif;

}

add_action( 'admin_enqueue_scripts', 'wpse223259_add_class_to_media_library_grid_elements' );

そしてJavaScriptファイル：

(function($) {

    $(document).ready( function() {

        if ( undefined !== wp.media ) {

            wp.media.view.Attachment.Library = wp.media.view.Attachment.Library.extend({
                className: function () { return 'attachment ' + this.model.get( 'customClass' ); }
            });

        }

    });

})(jQuery);
6
Luis Sanz