Question

我需要以下帮助：我在WordPress插件中创建了一个新的<select>按钮。我想在插件中选择此按钮，从WordPress媒体库中选择图像并上传到客户表单。

简而言之，我需要管理员能够通过从媒体库中选择来更改表单的背景图像。

按钮看起来像这样：

<button>Select Image</button>

客户表格（预览结束）：

<div id="giftcardForm" style="position:relative;">
    <img src="url" id="background img" style="width:100%; height:auto; z-index:0;">
    <div style="position:absolute; top:$from_y; left:$from_x; width:auto;" id="printname"></div>
    <div style="position:absolute; top:20%; left:$from_x; width:auto;" id="print_to_name"></div>
    <div style="position:absolute; top:30%; left:$from_x; width:auto;" id="showtext"></div>
</div>

Answer 1

试试这个!!

在前端使用WordPress媒体加载器

https://derekspringer.wordpress.com/2015/05/07/using-the-wordpress-media-loader-in-the-front-end/

希望这有帮助。

Answer 2

你需要给你的按钮上课，如：

<button class="media">Select Image</button>

并为您的图片标记提供正确的ID，例如

<img src="url" id="background_img" style="width:100%; height:auto; z-index:0;">

之后你需要添加以下jQuery代码，点击按钮打开选择媒体弹出窗口并设置选中的img src。

jQuery(document).ready(function(){
        var frame = wp.media({
            multiple: true
        });
        jQuery(".media").on("click", function(e) {
            frame.open();
            e.preventDefault();
        });
        frame.on('select', function() {
            var selection = frame.state().get('selection');

            selection.each(function(attachment) {
                jQuery('#background_img').attr('src',attachment.attributes.url);
            });
        });
    });

将图片上传到客户表单作为背景

2 个答案: