Улучшить Media Manager для галереи

Я хотел бы улучшить редактор мультимедиа после WordPress 3.5 в представлении галереи.
Я хочу добавить новое поле выбора с правой стороны и отправить выбранные значения в короткий код галереи.

введите описание изображения здесь>> </p>

<p> Я думаю, что функция <code>wp.media.gallery</code> в <code>wp-includes /js /media-editor.js</code> - это функция по умолчанию для вставки короткого кода галереи. </p>

<p> Я хочу добавить новый параметр, и значения параметра поступают из поля выбора внутри Media Manager. </p>

<p> Я играл с разными источниками, особенно из <a href= этого вопроса , но Backbone для меня очень новый, и я не понимаю, как это работает. Я также играл с крюком wp.media.gallery, но никакого результата в представлении «Медиа» не было.

Какие крючки я должен использовать?

28 голосов | спросил bueltge 9 MarpmSat, 09 Mar 2013 19:05:18 +04002013-03-09T19:05:18+04:0007 2013, 19:05:18

2 ответа


21

Небольшой источник, возможно, для плагина для создания решения. Сначала часть php включает в себя javascript для кнопки внутри Media Manager. Это более полезный ответ, но ответ @One Trick Pony был создан и правильное направление и решение JS.

Посмотрите результат на изображении: введите описание изображения здесь>> </p>

<p> Полученный короткий код, если размер не по умолчанию:
<img src =

Следящим источником является javascript, в примере source в php, файл 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 );
ответил bueltge 12 MarpmTue, 12 Mar 2013 15:11:24 +04002013-03-12T15:11:24+04:0003 2013, 15:11:24
19

Если вы действительно хотите использовать шаблоны Backbone, тогда ваш крючок будет правильным.

Я хотел бы использовать jQuery для вставки HTML-шаблона вместо переопределения функции template() для просмотра настроек галереи. Но я думаю, вы уже знаете это, поэтому я отправлю версию Backbone:

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

});
ответил onetrickpony 12 MaramTue, 12 Mar 2013 04:35:08 +04002013-03-12T04:35:08+04:0004 2013, 04:35:08

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132