javascript - 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 作为 $ 符号注入(inject)作用域，现在我们可以使用 $ 符号代替 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);

这对我有用，如果您有任何问题，请告诉我。