web-dev-qa-db-ja.com

WordPressのwp_mediaモーダルに画像選択を事前設定する

私はAdvanced Custom Fieldsプラグインの開発者であり、私が直面している問題についてあなたが私を手伝ってくれることを願っています。

画像を編集できるボタンがあります。このボタンはwp_media（）関数を介してWP 3.5メディアモーダルを起動します。

問題は、詳細がサイドバーパネルに読み込まれるように画像を事前に選択したいということです。

現在、私は 'open'コールバックに夢中になっていて、この選択を取り込むいくつかのコードを実行しています、しかしそれは不格好で効率的です。これはそれがどのように見えるかです：

// _media is an object I am using

_media.frame = wp.media({
    title       :   'title',
    multiple    :   false,
    button      :   { text : 'button' }
});


// open
_media.frame.on('open',function() {


    // add class
    _media.frame.$el.closest('.media-modal').addClass('acf-media-modal acf-expanded');


    // set selection
    var selection   =   _media.frame.state().get('selection'),
        attachment  =   wp.media.attachment( id );


    attachment.fetch();
    selection.add( attachment );

});


// Finally, open the modal
_media.frame.open();

ユーザーが別のモーダルウィンドウを開き、[アップロード]タブを選択してから、作成した[編集]ボタンを使用するまで、これは問題なく機能します。私のコードが「ブラウズ」モードになっているモーダルに依存しているため、コードは完全に失敗します。

私は、ブラウズモードにフレームを交換するコードを見つけました、それはこのように見えます：

_media.frame.content.mode('browse');

これは時々機能しますが、それから以下のコードは失敗します。添付ファイルを選択範囲に追加する前に、レンダリングに時間がかかるようにします。

確かにもっと良い方法があります。

ご協力いただきありがとうございます。エリオット

mediabackbone
32
Elliot Condon

これがスクリプトです。

次のスクリプトで関数loadImagesを使用してAJAXを介して既存の添付画像を読み込み、次に画像のIDを指定してこの関数を渡すだけで、事前入力されたモーダルが開きます。

var frame,
selection = loadImages(images);

$('#stag_images_upload').on('click', function(e) {
    e.preventDefault();

var options = {
    title: '<?php _e("Create Featured Gallery", "stag"); ?>',
    state: 'gallery-edit',
    frame: 'post',
    selection: selection
};

frame = wp.media(options).open();

frame.menu.get('view').unset('cancel');
frame.menu.get('view').unset('separateCancel');
frame.menu.get('view').get('gallery-edit').el.innerHTML = '<?php _e("Edit Featured Gallery", "stag"); ?>';
frame.content.get('view').sidebar.unset('gallery'); // Hide Gallery Settings in sidebar

// when editing a gallery
overrideGalleryInsert();
frame.on( 'toolbar:render:gallery-edit', function() {
    overrideGalleryInsert();
});

frame.on( 'content:render:browse', function( browser ) {
    if ( !browser ) return;
    // Hide Gallery Settings in sidebar
    browser.sidebar.on('ready', function(){
        browser.sidebar.unset('gallery');
    });

    // Hide filter/search as they don't work
    browser.toolbar.on('ready', function(){
        if(browser.toolbar.controller._state == 'gallery-library'){
            browser.toolbar.$el.hide();
        }
    });
});

// All images removed
frame.state().get('library').on( 'remove', function() {
    var models = frame.state().get('library');
    if(models.length == 0){
        selection = false;
        $.post(ajaxurl, { ids: '', action: 'stag_save_images', post_id: stag_ajax.post_id, nonce: stag_ajax.nonce });
    }
});

function overrideGalleryInsert(){
    frame.toolbar.get('view').set({
        insert: {
            style: 'primary',
            text: '<?php _e("Save Featured Gallery", "stag"); ?>',
            click: function(){
                var models = frame.state().get('library'),
                    ids = '';

                models.each( function( attachment ) {
                    ids += attachment.id + ','
                });

                this.el.innerHTML = '<?php _e("Saving...", "stag"); ?>';

                $.ajax({
                    type: 'POST',
                    url: ajaxurl,
                    data: { 
                        ids: ids, 
                        action: 'stag_save_images', 
                        post_id: stag_ajax.post_id, 
                        nonce: stag_ajax.nonce 
                    },
                    success: function(){
                        selection = loadImages(ids);
                        $('#_stag_image_ids').val( ids );
                        frame.close();
                    },
                    dataType: 'html'
                }).done( function( data ) {
                    $('.stag-gallery-thumbs').html( data );
                    console.log(data);
                });
            }
        }
    });
}

function loadImages(images){
    if (images){
        var shortcode = new wp.shortcode({
            tag:      'gallery',
            attrs:    { ids: images },
            type:     'single'
        });

        var attachments = wp.media.gallery.attachments( shortcode );

        var selection = new wp.media.model.Selection( attachments.models, {
            props:    attachments.props.toJSON(),
            multiple: true
        });

        selection.gallery = attachments.gallery;

        selection.more().done( function() {
            // Break ties with the query.
            selection.props.set({ query: false });
            selection.unmirror();
            selection.props.unset('orderby');
        });

        return selection;
    }
    return false;
}

});

これがAJAXリクエストを処理するphp関数です。

function stag_save_images(){
    if( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ){
        return;
    }

    if ( !isset($_POST['ids']) || !isset($_POST['nonce']) || !wp_verify_nonce( $_POST['nonce'], 'stag-ajax' ) ){
        return;
    }

    if ( !current_user_can( 'edit_posts' ) ) return;

    $ids = strip_tags(rtrim($_POST['ids'], ','));
    update_post_meta($_POST['post_id'], '_stag_image_ids', $ids);

    $thumbs = explode(',', $ids);
    $thumbs_output = '';
    foreach( $thumbs as $thumb ) {
        $thumbs_output .= '<li>' . wp_get_attachment_image( $thumb, array(75,75) ) . '</li>';
    }

    echo $thumbs_output;

    die();
}
add_action( 'wp_ajax_stag_save_images', 'stag_save_images' );

function stag_metabox_scripts(){
    global $post;
    if( isset($post) ) {
        wp_localize_script( 'jquery', 'stag_ajax', array(
            'post_id' => $post->ID,
            'nonce' => wp_create_nonce( 'stag-ajax' )
        ) );
    }
}

add_action( 'admin_enqueue_scripts', 'stag_metabox_scripts' );

WordPressフレームワークからスニペットをコピーしたところです。

3
Ram Ratan Maurya