갤러리 용 미디어 관리자 향상

갤러리보기에서 WordPress 3.5 이후의 미디어 편집기를 향상시키고 싶습니다.
오른쪽에 새로운 선택 필드를 추가하고 선택한 값을 갤러리 단축 코드로 보냅니다.

나는 wp.media.galleryin wp-includes/js/media-editor.js함수가 갤러리 단축 코드를 삽입하는 기본 함수 라고 생각합니다 .

새 매개 변수를 추가하고 매개 변수의 값은 매체 관리자의 선택 필드에서 가져옵니다.

나는 특히이 질문 에서 다른 출처를 가지고 놀았 지만 백본은 나에게 매우 새롭고 그것이 어떻게 작동하는지 이해할 수 없습니다. 나는 hook으로도 연주 print_media_templates했지만 미디어보기에는 결과가 없습니다.

어떤 후크를 사용해야합니까?

플러그인이 솔루션을 만들 수있는 작은 소스. 처음에 PHP 부분에는 미디어 관리자 내부에 버튼에 대한 자바 스크립트가 포함되어 있습니다. 더 유용한 답변이지만 @One Trick Pony의 답변은 올바른 방향과 JS 솔루션이었습니다.

이미지에서 결과를보십시오 :

크기가 기본 크기가 아닌 경우 결과 단축 코드 :

후크 print_media_templates는 버튼, 마크 업을 포함하기에 적합한 장소입니다. 또한 스크립트를 대기열에 추가했으며 컨트롤을 추가하는 솔루션이 있습니다.

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 );

다음 소스는 자바 스크립트이며, PHP의 예제 소스에서 파일은 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 );

백본 템플릿을 실제로 사용하려면 후크가 올바른 것입니다.

template()갤러리 설정보기 의 기능을 재정의하는 대신 jQuery를 사용하여 HTML 템플릿을 삽입합니다 . 그러나 나는 당신이 이미 그것을 알고 있다고 생각하므로 백본 버전을 게시 할 것입니다.

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

});