我已经创建了一个自定义Wordpress小部件，它允许我用媒体上传器上传图像，一切正常，但现在我想让它可以重复。我用它为一个简单的滑块上传照片，这就是为什么我需要在一个小部件中有多个媒体上传器。只允许一个媒体上传器选择多张照片是行不通的，因为每个特定的照片都有文本字段。

理想情况下，最好有某种“添加另一张幻灯片”按钮，允许我在一个小部件中有我想要的尽可能多的上传者，但在这一点上，我只能在代码中设置一定数量的幻灯片。

我以前从来没有做过这样的事情，所以这段代码只是我从在线搜索中找到的信息中拼凑出来的一些片段，这意味着我对它的理解不是很好，所以我无法找出如何重复它。我把一些不同的事情弄得一团糟，但什么都没做出来。我尝试过简单地复制代码中的图像上传部分并更改ID，就像我能够处理文本区域一样，但这只给了我两个媒体上传器，它们似乎是链接的，因为当我更改一个时，它们都会更改。

我也愿意接受任何关于如何改进或清理此代码的建议。正如我所说，我对这一点有点不熟悉，所以我不确定这段代码写得有多好。

PHP

<p>
    <label for="<?php echo $this->get_field_id(\'subheading_1\'); ?>">Subheading</label><br />
    <input type="text" name="<?php echo $this->get_field_name(\'subheading_1\'); ?>" id="<?php echo $this->get_field_id(\'subheading_1\'); ?>" value="<?php echo $instance[\'subheading_1\']; ?>" class="widefat" />
</p>
<p>
    <label for="<?php echo $this->get_field_id(\'body_1\'); ?>">Body Text</label><br />
    <input type="text" name="<?php echo $this->get_field_name(\'body_1\'); ?>" id="<?php echo $this->get_field_id(\'body_1\'); ?>" value="<?php echo $instance[\'body_1\']; ?>" class="widefat" />
</p>

<p>
    <label for="<?php echo $this->get_field_id(\'image_uri_1\'); ?>">Image</label><br />
    <?php
        if ( $instance[\'image_uri_1\'] != \'\' ) :
            echo \'<img class="custom_media_image" src="\' . $instance[\'image_uri_1\'] . \'" style="margin:0;padding:0;max-width:100px;float:left;display:inline-block" /><br />\';
        endif;
    ?>
    <input type="text" class="widefat custom_media_url" name="<?php echo $this->get_field_name(\'image_uri_1\'); ?>" id="<?php echo $this->get_field_id(\'image_uri_1\'); ?>" value="<?php echo $instance[\'image_uri_1\']; ?>" style="margin-top:5px;">

    <input type="button" class="button button-primary custom_media_button" id="custom_media_button" name="<?php echo $this->get_field_name(\'image_uri_1\'); ?>" value="Upload Image" style="margin-top:5px;" />
</p>

jQuery(document).ready( function($) {
function media_upload(button_class) {
    var _custom_media = true,
    _orig_send_attachment = wp.media.editor.send.attachment;

    $(\'body\').on(\'click\', button_class, function(e) {
        var button_id =\'#\'+$(this).attr(\'id\');
        var self = $(button_id);
        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = $(button_id);
        var id = button.attr(\'id\').replace(\'_button\', \'\');
        _custom_media = true;
        wp.media.editor.send.attachment = function(props, attachment){
            if ( _custom_media  ) {
                $(\'.custom_media_id\').val(attachment.id);
                $(\'.custom_media_url\').val(attachment.url);
                $(\'.custom_media_image\').attr(\'src\',attachment.url).css(\'display\',\'block\');
            } else {
                return _orig_send_attachment.apply( button_id, [props, attachment] );
            }
        }
        wp.media.editor.open(button);
            return false;
    });
}
media_upload(\'.custom_media_button.button\');
});