Erweitern Sie den Media Manager für die Galerie

29

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.

Bildbeschreibung hier eingeben

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?

bueltge
quelle

Antworten:

21

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: Bildbeschreibung hier eingeben

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

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 );
bueltge
quelle
4
Bravo! Es scheint, dass WordPress Development schneller eine Wissensbasis über die neue Medienbibliothek aufbaut als die Kernentwickler;) Und wie auch immer, @OneTrickPony enthüllt noch einmal einen seiner Zaubertricks, ein Lob an beide!
Brasofilo
Fantastisch. Folgefrage: Gibt es eine einfache Möglichkeit, Standardattribute im Shortcode zu unterdrücken? So [gallery type="thumbnail" ids="1,2"]wird es [gallery ids="1,2"]? Ich füge ein benutzerdefiniertes Attribut für ein Plugin hinzu, um die Galerie optional in eine Diashow zu verwandeln. Ich möchte das Attribut unterdrücken, wenn nur eine normale WP-Galerie angezeigt werden soll. Bei Deaktivierung des Plugins bleibt also weniger Kruft übrig.
Küchen
Ich denke, es ist eine bessere Möglichkeit, eine neue Frage zu diesem Thema hinzuzufügen. Der Shortcode befindet sich hier außerhalb des Q / A.
Bueltge
@bueltge, darf ich Sie bitten, sich hier eine Frage zu benutzerdefinierten Feldern anzusehen: wordpress.stackexchange.com/questions/265852/… ?
Istiaque Ahmed
19

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

});
ein Trickpony
quelle