Erweitern Sie den Media Manager für die Galerie

Ich möchte den Media Editor nach WordPress 3.5 in der Galerieansicht verbessern.
Ich möchte ein neues Auswahlfeld auf der rechten Seite hinzufügen und die ausgewählten Werte an den Galerie-Shortcode senden.

Ich denke, die Funktion wp.media.galleryin wp-includes/js/media-editor.jsist die Standardfunktion zum Einfügen des Galerie-Shortcodes.

Ich möchte einen neuen Parameter hinzufügen und die Werte des Parameters stammen aus dem Auswahlfeld im Media Manager.

Ich habe mit verschiedenen Quellen gespielt, insbesondere mit dieser Frage , aber Backbone ist für mich sehr neu und ich verstehe nicht, wie es funktioniert. Ich habe auch mit dem Haken gespielt print_media_templates, aber kein Ergebnis in der Medienansicht.

Welche Haken soll ich verwenden?

Eine kleine Quelle, vielleicht für ein Plugin, um die Lösung zu erstellen. Im PHP-Teil ist zunächst das Javascript für den Button im Media Manager enthalten. Ist brauchbarer Antwort, aber die Antwort von @One Trick Pony wurde erstellt und die richtige Richtung und JS-Lösung.

Sehen Sie das Ergebnis auf dem Bild:

Der resultierende Shortcode, wenn die Größe nicht die Standardgröße ist:

Der Hook print_media_templatesist der richtige Ort, um den Button, das Markup, aufzunehmen. Ebenfalls wurde ein Skript in die Enqueue gestellt, dort habe ich die Lösung zum Anhängen der Controls.

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

Die folgende Quelle ist das Javascript, in der Beispielquelle in PHP die Datei 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 );

Wenn Sie wirklich Backbone-Vorlagen verwenden möchten, ist Ihr Hook korrekt.

Ich würde jQuery verwenden, um die HTML-Vorlage einzufügen, anstatt die template()Funktion für die Ansicht der Galerieeinstellungen zu überschreiben . Aber ich denke, das weißt du schon, also poste ich die Backbone-Version:

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

});