Tingkatkan Media Manager untuk Galeri

29

Saya ingin meningkatkan Media Editor, setelah WordPress 3.5, pada tampilan galeri.
Saya ingin menambahkan bidang pilih baru di sisi kanan dan mengirim nilai yang dipilih ke kode singkat galeri.

masukkan deskripsi gambar di sini

Saya pikir, fungsi wp.media.gallerydalam wp-includes/js/media-editor.jsadalah fungsi default untuk memasukkan kode singkat galeri.

Saya ingin menambahkan parameter baru dan nilai-nilai parameter berasal dari bidang pilih di dalam Media Manager.

Saya telah bermain dengan berbagai sumber, terutama dari pertanyaan ini , tetapi Backbone sangat baru bagi saya dan saya tidak mengerti cara kerjanya. Saya juga bermain dengan hook print_media_templates, tetapi tidak ada hasil pada tampilan Media.

Kait apa yang harus saya gunakan?

bueltge
sumber

Jawaban:

21

Sumber kecil, mungkin untuk plugin untuk membuat solusi. Pada awalnya bagian php, ada javascript untuk tombol di dalam Media Manager. Adalah jawaban yang lebih bermanfaat, tetapi jawaban @One Trick Pony dibuat dan arah yang tepat serta solusi JS.

Lihat hasilnya pada gambar: masukkan deskripsi gambar di sini

Kode pendek yang dihasilkan, jika ukurannya bukan ukuran standar: masukkan deskripsi gambar di sini

Hook print_media_templatesadalah tempat yang tepat untuk memasukkan tombol, markup. Juga adalah skrip enqueue, ada solusi untuk menambahkan kontrol.

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

Sumber tindak adalah javascript, pada contoh sumber di php, file 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
sumber
4
Bravo! Tampaknya Pengembangan WordPress sedang membangun basis pengetahuan tentang Perpustakaan Media baru pada tingkat yang lebih cepat daripada pengembang inti;) Dan, bagaimana tidak, @OneTrickPony sekali lagi mengungkapkan satu lagi trik sulap tasnya, pujian untuk keduanya!
brasofilo
Fantastis. Pertanyaan tindak lanjut: apakah ada cara mudah untuk menekan atribut default di shortcode? Jadi [gallery type="thumbnail" ids="1,2"]menjadi [gallery ids="1,2"]? Saya menambahkan atribut khusus untuk sebuah plugin untuk secara opsional mengubah galeri menjadi tampilan slide. Saya ingin menekan atribut ketika itu hanya mengatakan untuk menampilkan Galeri WP normal. Jadi saat de-aktivasi plugin, ia meninggalkan sedikit kekurangan.
Kitchin
Saya pikir ini cara yang lebih baik untuk menambahkan pertanyaan baru tentang topik ini. Kode pendek di luar q / a di sini.
bueltge
@bueltge, bolehkah saya meminta Anda untuk melihat pertanyaan terkait bidang khusus di sini: wordpress.stackexchange.com/questions/265852/… ?
Istiaque Ahmed
19

Jika Anda benar-benar ingin menggunakan template Backbone, maka hook Anda sudah benar.

Saya akan menggunakan jQuery untuk memasukkan template HTML daripada mengganti template()fungsi untuk tampilan pengaturan galeri. Tapi saya kira Anda sudah tahu itu, jadi saya akan memposting versi 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
sumber