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

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

我有Meta Box工作正常,但我试图让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？

谢谢！

解决方法

如果我说得对,你有一个文本字段,点击打开媒体窗口,你想在点击选择按钮时将所选图像的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',displayUserSettings: true
            })
        ]);

        image_frame.open();

        image_frame.on( 'select',' : '';
                ids += $(this)[0].id + sep;
            });
            $that.val(ids);

        });

    });   

})(jQuery);

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

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

解决方法

猜你在找的JavaScript相关文章