Wp.media.editor Modal'ı medya dışındaki iletişim kutuları için yeniden kullanmak mümkün müdür

30

Genişletmek için: Medya Düzenleyicisi yerine kendi özel iletişim kutumumun bir modunu açmak için aynı Modal kodunu / görünümünü (wp.media.Modal, wp.media.FocusManager'da kullanıldığı gibi) kullanmak isterim. Geçmişte, bu tür bir şey için thickbox kullandım, ancak wp.media.Modal, modacılar için geleceğin yolu gibi gözüküyor.

JS kaynağını biraz dürttüm ve birkaç olası çözüm buldum:

  1. Media-views.js kodunu "ödünç alın" ve eklentimde kullanın.
  2. Wp.media.Modal "Extend" (sonuçta bir Omurga Görünümüdür).
  3. Özel bir uygulama, jQueryUI, vb. Oluşturun.
  4. Sadece pes ve thickbox kullanın.

Borçlanma wp.media.Model.extend ({}) kullanmaktan biraz daha az tehlikeli, fakat israflıdır. JQueryUI'nin modalarının büyük hayranı değilim, ama işi hallederdi. Aynı zamanda, özel bir modacı uygulaması yapabilirim (ya da başka bir kütüphaneye dayandırabilirim).

Açıkça belli bir şeyi kaçırmış gibi hissediyorum: Başkası bunu çekti mi veya yeni medya kütüphanesi modal kodu yeniden kullanıma izin vermek için "çok yeni" mi?

plugin-development  wp-admin  javascript 
— Jer
kaynak
3
Denemeye çalışmış gibi görünüyorsun. # 2'ye gitmeyi tavsiye ederim: muhtemelen en temiz ve en zorlu / eğlenceli olan artı Omurga'da yolunuzu bildiğiniz gibi.
— montrealist
2
lütfen bulgularını paylaş!
— Paul,
İlginç bir eklenti / öğretici github.com/ericandrewlewis/wp-media-javascript-guide adresinde - WP Media’yı destekleyen Javascript için etkileşimli belgeler .
— jgraup

Yanıtlar:

12

Geç cevap ve düzenleme Yasal Uyarı: şudur hiçbir kopya & yapıştır-togo kodu.

Kaba taslak

Medya modelini başka bir şey için kötüye kullanmayı hiç denemediğim için, şu anda üzerinde bulunduğum bir projeden bir parça ayırıp çizilen kısa bir genel bakış. O var olmayan bir örnek gitmek için hazır, ama size yakın yeterince getirmelidir. Sadece yorumları dikkatlice okuyun ve aşağıdaki PHP'yi nesnelerinize uygulayın.

PHP

Yapıcımızda komut dosyalarımızı kaydeder, bilgileri ve medya düğmesini tutan meta kutuları ekler, ek MIME Türlerini (ör. ZIP için) filtreler ve ek verileri kaydetmeye özen gösteririz:

public function __construct()
{
    add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );

    foreach( $this->post_types as $post_type )
        add_action( "add_meta_boxes_{$post_type}", array( $this, 'add_meta_box' ) );

    add_filter( 'media_view_settings', array( $this, 'filter_media_view_settings' ), 10, 2 );

    add_action( 'wp_insert_post_data', array( $this, 'wp_insert_post_data' ), 10, 2 );
}

Belirli bir sayfada o betiğe gerek duymuyorsanız, iptal ettiğinizden emin olun. Bu, hafıza tasarrufu sağlar, zaman kazandırır ve kurulumunuzu temiz tutmanıza yardımcı olur.

public function enqueue_scripts( $page )
{
    if (
        ! in_array( $page, array( 'post.php', 'post-new.php' ) )
        # Assuming that there's a class property array that holds post types we want to add to
        # OR ! in_array( get_current_screen()->post_type, array_keys( $this->post_types ) )
    )
        return;

    wp_enqueue_media();
    wp_enqueue_script(
        'wpse_media_modal',
        plugins_url( 'assets/js/media-modal.js', dirname( __FILE__ ) ),
        array(
            # 'jquery',
            'media-views'
        ),
        null,
        true
    );
    wp_localize_script(
        'wpse_media_modal',
        'wpse_obj',
        $this->get_media_props()
    );
}

Sonra meta kutusunu ekleriz. İşlev içinde, yeni yayınlar için ayarlanacak olan $postnesneler post_typeözelliğine de güvenebiliriz . Yapıcıdaki geri çağrıları uygun bağlamsal kancalara zaten kaydettikten sonra, hangi yazı türünün geldiğini basitçe alabiliriz.

public function add_meta_box( $post )
{
    add_meta_box(
        'wprd_upload',
        __( 'Upload', 'our_textdomain' ),
        array( $this, 'render_content' ),
        $post->post_type,
        'advanced',
        'default',
        array()
    );
}

Ek MIME Türleri

Medya Kaldırma Modunun varsayılan MIME türlerini geçersiz kılan veya ekleyen bir dizi atmanız yeterlidir. Diğer ayarları ekleyebilir veya geçersiz kılabilirsiniz. Sadece var_dump( $settings );geri arama sağlar ne olduğunu görmek için. Ayrıca yanlış yazı tipine müdahale etmediğimizden emin olun.

public function filter_media_view_settings( $settings, $post )
{
    if ( ! in_array( $post->post_type, array_keys( $this->post_types ) ) )
        return $settings;

    $settings['mimeTypes'] += array( 'application/zip' );

    return $settings;
}

İçeriği oluştur

public function render_content()
{
    $props = array(
        'modalTitle'      => __( 'Select ZIP Archives', 'our_textdomain' ),

        // The following data is what we will access later
        // SomeIDfromLocalizedScriptOBJ
        'buttonID'        => 'open-media-lib',
        'buttonClass'     => 'open-media-button',
        'buttonText'      => __( 'Add ZIP', 'our_textdomain' ),
        'buttonDataText'  => __( 'Select', 'our_textdomain' ),
        'buttonDataTitle' => __( 'Select Whatever', 'our_textdomain' ),

        'mimeTypes'       => array(
            $zip => __( 'ZIP Archive', 'our_textdomain' ),
        ),
    );

    wp_nonce_field( plugin_basename( __FILE__ ), $this->nonce_name );
    ?>
    <input type="button"
           class="button <?php echo $props['buttonClass']; ?>"
           id="<?php echo $props['buttonID']; ?>"
           value="<?php echo $props['buttonText']; ?>"
           data-title="<?php echo $props['buttonDataTitle']; ?>"
           data-button-text="<?php echo $props['buttonDataText']; ?>" />
}

Veriyi sakla

Sonunda verilerimizin doğru şekilde kaydedildiğinden ve kontrol edildiğinden emin oluruz. Tüm esc_*()fonksiyonları kullanın , typecasting, nonces ve ne değil.

public function wp_insert_post_data( $data, $post_array )
{
    if (
        ! in_array( $post_array['post_type'], array_keys( $this->post_types ) )
        # OR ( defined( 'DOING_AUTOSAVE' ) AND DOING_AUTOSAVE )
        OR ! isset( $_POST[ $this->nonce_name ] )
        OR ! wp_verify_nonce( $_POST[ $this->nonce_name ], plugin_basename( __FILE__ ) )
    )
        return $data;

    $post_array['zip'] = array_map( 'array_filter', $post_array['zip'] );

    $id = $post_array['ID'];
    update_post_meta(
        $id,
        'zip',
        $post_array['zip'],
        get_post_meta( $id, 'zip' )
    );

    return $data;
}

JS örneğine geçmeden önce son not: Kod mevcut bir projeden çıkarıldı . Böylece - daha önce de belirtildiği gibi - varsayılan olarak çalışmaz! Bu sadece bir rehber ve başka bir şey değil.

JavaScript

Javascript kendisi oldukça yalındır. Değil. Ama gördüğünüz gibi, her ikisine de jQuery'yi, fonksiyona özel yerelleştirilmiş script nesnesi olarak enjekte ediyorum. Oradan, ihtiyacınız olabilecek herhangi bir mantığı eklemek zorunda kalacaksınız. Farklı durumlar ve geri aramalar için temel çevre sağlanır ve console.log()mevcuttur.

var ds = ds || {};

( function( $, obj ) {
    var media;

    ds.media = media = {};

    _.extend( media, {
        view: {},
        controller: {}
    } );

    media.buttonID    = '#' + obj.buttonID,

    _.extend( media, {
        frame: function() {
            if ( this._frame )
                return this._frame;

            var states = [
                new wp.media.controller.Library(),
                new wp.media.controller.Library( {
                    id:                 'image',
                    title:              'Images',
                    priority:           20,
                    searchable:         false,
                    library:            wp.media.query( { type: 'image' } ),
                    multiple:           true
                } ),
                /*new wp.media.controller.Library( {
                    id:                 'video',
                    title:              'Video',
                    priority:           40,
                    library:            wp.media.query( { type: 'video' } ),
                    multiple:           false,
                    contentUserSetting: false // Show the Upload Files tab.
                } ),*/
                new wp.media.controller.Library( {
                    id:                 obj.SomeIDfromLocalizedScriptOBJ,
                    title:              obj.SomeTitlefromLocalizedScriptOBJ,
                    priority:           30,
                    searchable:         true,
                    // filterable:         'uploaded',
                    library:            wp.media.query( { type: obj.SomeMIMETypesfromLocalizedScriptOBJ } ),
                    multiple:           true
                    // contentUserSetting: true
                } ),
            ];

            this._frame = wp.media( {
                // className: 'media-frame no-sidebar',
                states: states
                // frame: 'post'
            } );

            this._frame.on( 'open', this.open );

            this._frame.on( 'ready', this.ready );

            this._frame.on( 'close', this.close );

            this._frame.on( 'menu:render:default', this.menuRender );

            this._frame.state( 'library' ).on( 'select', this.select );
            this._frame.state( 'image' ).on( 'select', this.select );
            this._frame.state( obj.ZIPTabID ).on( 'select', this.select );

            return this._frame;
        },

        open: function() {
            console.log( 'Frame opened' );
        },

        ready: function() {
            console.log( 'Frame ready' );
        },

        close: function() {
            console.log( 'Frame closed' );
        },

        menuRender: function( view ) {
            /* view.unset( 'library-separator' );
            view.unset( 'embed' );
            view.unset( 'gallery' ); */
        },

        select: function() {
            var settings = wp.media.view.settings,
                selection = this.get( 'selection' );

            selection.map( media.showAttachmentDetails );
        },

        showAttachmentDetails: function( attachment ) {
            // This function normally is used to display attachments
            // Handle removal of rows
            media.removeAttachmentRow( /* some var */ );
        },

        removeAttachmentRow: function( row ) {
            // Remove stuff callback
        },

        init: function() {
            // Open media frame
            $( media.buttonID ).on( 'click.media_frame_open', function( e ) {
                e.preventDefault();

                media.frame().open();
            } );
        }
    } );

    $( media.init );
} )( jQuery, wpse_obj );

Öğreticiler

WP 3.5 medya yöneticisinin yazarı olan Dominik Schilling, medya modacıları için bir dizi demo yazdı. Şunları yapabilirsiniz GitHub'dan onları görüntülemek .

— Kayser
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.