WordPress - 使用wp.media将图库叠加添加到元数据库

Question

我正在尝试使用元数据库在WordPress中存储逗号分隔的附件ID字符串.

我的metabox工作得很好,但是我试图以wp.media允许用户选择多个图像的方式打开叠加层,然后拖放它们,然后单击"选择"按钮时,它会放置字符串ID到元数据箱中.

请不要建议插件.我知道那里有很多它们,但我正在将它构建成一个主题并且想要最少的代码.

我和JS的PHP是这样的:

jQuery('.custom-post-gallery').on( 'click', function(e){
    e.preventDefault();

    var image_frame;
    if(image_frame){
       image_frame.open();
    }

    // Define image_frame as wp.media object
    image_frame = wp.media({
        title: 'Select Gallery Images',
        library : {
            type : 'image'
        },
        multiple: true
    });

    image_frame.states.add([
        new wp.media.controller.Library({
            id:         'post-gallery',
            title:      'Select Images for the Post Gallery',
            priority:   20,
            toolbar:    'main-gallery',
            filterable: 'uploaded',
            library:    wp.media.query( image_frame.options.library ),
            multiple:   image_frame.options.multiple ? 'reset' : false,
            editable:   true,
            allowLocalEdits: true,
            displaySettings: true,
            displayUserSettings: true
        });
    ]);

    image_frame.open();
});

<?php
    $meta_key = 'custom_post_gallery';
    $image_ids = get_post_meta( $post->ID, $meta_key, true );
?>
  
<input class="custom-post-gallery" name="<?php echo $meta_key; ?>" type="text" value="<?php echo $image_ids; ?>"/>

这个叠加层只显示用于选择一个图像的UI,如果按住控制键,则显示多个图像,但没有拖放顺序等.我能以某种方式在"图库"模式下打开它吗？并为其提供用于当前所选图像的ID？

谢谢!

Answer 1

如果我说得对,你有一个文本字段,点击打开媒体窗口,你想在点击选择按钮时将所选图像的id插入字段值(id用逗号分隔).如果是这样,那么这就是我修改的内容:

固定:

由于分号错误(它在一个不能有分号的数组中)

    displayUserSettings: true
}); // --> here

改性:

需要在此范围之外设置image_frame变量,并在重新打开操作后返回

var image_frame; // --> outside the scope
if(image_frame){
   image_frame.open();
   // --> add return
}

加法:

包装JS并将jQuery注入$ scope作为范围,现在我们可以使用$ sign代替jQuery并防止与其他JS脚本冲突:

(function($){
...
})(jQuery);

将文本字段对象设置为$ that变量,以便我们在更深的范围内使用它

var $that = $(this);

添加选择操作,并将选中的图像ID以逗号分隔,插入字段值:

       image_frame.on( 'select', function() {

            var ids = '', attachments_arr = [];

            // Get media attachment details from the frame state
            attachments_arr = image_frame.state().get('selection').toJSON();
            $(attachments_arr).each(function(e){
                sep = ( e != ( attachments_arr.length - 1 ) ) ? ',' : '';
                ids += $(this)[0].id + sep;
            });
            $that.val(ids);

        });

全部一起:

只是JS部分,它被修改:

(function($){

    var image_frame;

    $('.custom-post-gallery').on( 'click', function(e){

        e.preventDefault();

        // If the media frame already exists, reopen it.
        if (image_frame){
           image_frame.open();
           return;
        }

        var $that = $(this);

        // Define image_frame as wp.media object
        image_frame = wp.media({
            title: 'Select Gallery Images',
            library : {
                type : 'image'
            },
            multiple: true
        });

        image_frame.states.add([
            new wp.media.controller.Library({
                id:         'post-gallery',
                title:      'Select Images for the Post Gallery',
                priority:   20,
                toolbar:    'main-gallery',
                filterable: 'uploaded',
                library:    wp.media.query( image_frame.options.library ),
                multiple:   image_frame.options.multiple ? 'reset' : false,
                editable:   true,
                allowLocalEdits: true,
                displaySettings: true,
                displayUserSettings: true
            })
        ]);

        image_frame.open();

        image_frame.on( 'select', function() {

            var ids = '', attachments_arr = [];

            // Get media attachment details from the frame state
            attachments_arr = image_frame.state().get('selection').toJSON();
            $(attachments_arr).each(function(e){
                sep = ( e != ( attachments_arr.length - 1 ) ) ? ',' : '';
                ids += $(this)[0].id + sep;
            });
            $that.val(ids);

        });

    });   

})(jQuery);

这对我有用,告诉我你是否有任何问题.