Tăng cường quản lý phương tiện cho thư viện

Tôi muốn nâng cao Trình chỉnh sửa phương tiện, sau WordPress 3.5, trên chế độ xem thư viện.
Tôi muốn thêm một trường chọn mới ở phía bên phải và gửi các giá trị được chọn vào shortcode bộ sưu tập.

Tôi nghĩ rằng, chức năng wp.media.gallerytrong wp-includes/js/media-editor.jslà chức năng mặc định để chèn shortcode bộ sưu tập.

Tôi muốn thêm một tham số mới và các giá trị của tham số đến từ trường được chọn bên trong Trình quản lý phương tiện.

Tôi đã chơi với nhiều nguồn khác nhau, đặc biệt là từ câu hỏi này , nhưng Backbone rất mới đối với tôi và tôi không hiểu nó hoạt động như thế nào. Tôi cũng đã chơi với hook print_media_templates, nhưng không có kết quả trên chế độ xem Media.

Tôi nên sử dụng móc nào?

Một nguồn nhỏ, có lẽ cho một plugin để tạo ra giải pháp. Đầu tiên, phần php, bao gồm javascript cho nút bên trong Trình quản lý phương tiện. Là câu trả lời có thể sử dụng nhiều hơn, nhưng câu trả lời của @One Trick Pony đã được tạo ra và hướng đi đúng và giải pháp JS.

Xem kết quả trên hình ảnh:

Shortcode kết quả, nếu kích thước không phải kích thước mặc định:

Hook print_media_templateslà nơi thích hợp để bao gồm nút, đánh dấu. Cũng đã enqueue một kịch bản, có giải pháp để nối các điều khiển.

class Custom_Gallery_Setting {
    /**
     * Stores the class instance.
     *
     * @var Custom_Gallery_Setting
     */
    private static $instance = null;


    /**
     * Returns the instance of this class.
     *
     * It's a singleton class.
     *
     * @return Custom_Gallery_Setting The instance
     */
    public static function get_instance() {

        if ( ! self::$instance )
            self::$instance = new self;

        return self::$instance;
    }

    /**
     * Initialises the plugin.
     */
    public function init_plugin() {

        $this->init_hooks();
    }

    /**
     * Initialises the WP actions.
     *  - admin_print_scripts
     */
    private function init_hooks() {

        add_action( 'wp_enqueue_media', array( $this, 'wp_enqueue_media' ) );
        add_action( 'print_media_templates', array( $this, 'print_media_templates' ) );
    }


    /**
     * Enqueues the script.
     */
    public function wp_enqueue_media() {

        if ( ! isset( get_current_screen()->id ) || get_current_screen()->base != 'post' )
            return;

        wp_enqueue_script(
            'custom-gallery-settings',
            plugins_url( 'js/custom-gallery-setting.js', __FILE__ ),
            array( 'media-views' )
        );

    }

    /**
     * Outputs the view template with the custom setting.
     */
    public function print_media_templates() {

        if ( ! isset( get_current_screen()->id ) || get_current_screen()->base != 'post' )
            return;

        ?>
        <script type="text/html" id="tmpl-custom-gallery-setting">
            <label class="setting">
                <span>Size</span>
                <select class="type" name="size" data-setting="size">
                    <?php

                    $sizes = apply_filters( 'image_size_names_choose', array(
                        'thumbnail' => __( 'Thumbnail' ),
                        'medium'    => __( 'Medium' ),
                        'large'     => __( 'Large' ),
                        'full'      => __( 'Full Size' ),
                    ) );

                    foreach ( $sizes as $value => $name ) { ?>
                        <option value="<?php echo esc_attr( $value ); ?>" <?php selected( $value, 'thumbnail' ); ?>>
                            <?php echo esc_html( $name ); ?>
                        </option>
                    <?php } ?>
                </select>
            </label>
        </script>
        <?php
    }

}

// Put your hands up...
add_action( 'admin_init', array( Custom_Gallery_Setting::get_instance(), 'init_plugin' ), 20 );

Nguồn theo dõi là javascript, trên nguồn ví dụ trong php, tệp custom-gallery-setting.js

/**
 * Custom Gallery Setting
 */
( function( $ ) {
    var media = wp.media;

    // Wrap the render() function to append controls
    media.view.Settings.Gallery = media.view.Settings.Gallery.extend({
        render: function() {
            media.view.Settings.prototype.render.apply( this, arguments );

            // Append the custom template
            this.$el.append( media.template( 'custom-gallery-setting' ) );

            // Save the setting
            media.gallery.defaults.size = 'thumbnail';
            this.update.apply( this, ['size'] );
            return this;
        }
    } );
} )( jQuery );

Nếu bạn thực sự muốn sử dụng các mẫu Backbone, thì hook của bạn là chính xác.

Tôi sẽ sử dụng jQuery để chèn mẫu HTML thay vì ghi đè template()chức năng cho chế độ xem cài đặt thư viện. Nhưng tôi đoán bạn đã biết điều đó, vì vậy tôi sẽ đăng phiên bản Xương sống:

add_action('print_media_templates', function(){

  // define your backbone template;
  // the "tmpl-" prefix is required,
  // and your input field should have a data-setting attribute
  // matching the shortcode name
  ?>
  <script type="text/html" id="tmpl-my-custom-gallery-setting">
    <label class="setting">
      <span><?php _e('My setting'); ?></span>
      <select data-setting="my_custom_attr">
        <option value="foo"> Foo </option>
        <option value="bar"> Bar </option>        
        <option value="default_val"> Default Value </option>        
      </select>
    </label>
  </script>

  <script>

    jQuery(document).ready(function(){

      // add your shortcode attribute and its default value to the
      // gallery settings list; $.extend should work as well...
      _.extend(wp.media.gallery.defaults, {
        my_custom_attr: 'default_val'
      });

      // merge default gallery settings template with yours
      wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
        template: function(view){
          return wp.media.template('gallery-settings')(view)
               + wp.media.template('my-custom-gallery-setting')(view);
        }
      });

    });

  </script>
  <?php

});