it-swarm.com.de

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.

enter image description here

Ich denke, die Funktion wp.media.gallery in wp-includes/js/media-editor.js ist 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 print_media_templates gespielt, aber kein Ergebnis in der Medienansicht.

Welche Haken soll ich verwenden?

29
bueltge

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 mehr brauchbare 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: enter image description here

Der resultierende Shortcode, wenn die Größe nicht die Standardgröße ist: enter image description here

Der Hook print_media_templates ist der richtige Ort, um die Schaltfläche und das Markup einzuschließen. Ebenfalls wurde ein Script 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 );
21
bueltge

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 Funktion template() 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

});
19
onetrickpony