增强多媒体库的媒体管理器

时间:2013-03-09 作者:bueltge

我想在WordPress 3.5之后,在gallery视图上增强媒体编辑器
我想在右侧添加一个新的选择字段,并将所选值发送到gallery快捷码。

enter image description here

我认为,功能wp.media.gallery 在里面wp-includes/js/media-editor.js 是插入库短代码的默认函数。

我想添加一个新参数,该参数的值来自媒体管理器中的选择字段。

我接触过不同的来源,尤其是来自this question, 但主干对我来说是非常新的,我不明白它是如何工作的。我也玩过钩子print_media_templates, 但在媒体看来没有结果。

我应该用什么钩子?

2 个回复
最合适的回答,由SO网友:bueltge 整理而成

一个小的源代码,可能是用于创建解决方案的插件。首先是php部分,其中包括媒体管理器中按钮的javascript。是一个更有用的答案,但@One-Trick-Pony的答案是create和正确的方向以及JS解决方案。

查看图像上的结果:enter image description here

如果大小不是默认大小,则生成的快捷码:enter image description here

钩子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 );
下面的源代码是javascript,在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 );

SO网友:onetrickpony

如果您真的想使用主干模板,那么挂钩是正确的。

我将使用jQuery插入HTML模板,而不是重写template() gallery settings视图的功能。但我想你已经知道了,所以我将发布主干版本:

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

});

结束