Wp_enQueue_media()；在多个小部件中

时间：2017-01-18 作者：Danny Cooper

我有这个代码，如果你使用一个小部件，它就可以完美地工作。但是，如果创建另一个小部件，上载程序将覆盖这两个小部件的设置。

有人知道如何修改此脚本以允许多次使用吗？

HTML

<p>
        <label for="<?php echo $this->get_field_name( \'image_url\' ); ?>"><?php _e( \'Category Image:\', \'text-domain\' ); ?></label>
        <input name="<?php echo $this->get_field_name( \'image_url\' ); ?>" id="<?php echo $this->get_field_id( \'image_url\' ); ?>" class="widefat img custom_media_url" type="text" size="36"  value="<?php echo esc_url( $image_url ); ?>" />
        <input class="custom_media_upload" id="custom_media_button" type="button" value="<?php esc_attr_e(\'Upload Image\', \'text-domain\'); ?>" />
</p>

Javascript:

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_url\').val(attachment.url);
            } else {
                return _orig_send_attachment.apply( button_id, [props, attachment] );
            }
        }
        wp.media.editor.open(button);
            return false;
    });
}
  media_upload(\'.custom_media_upload\');
});

1 个回复
最合适的回答,由SO网友:Radoslav Georgiev 整理而成

您的实际问题是您正在使用$(\'.custom_media_url\').val(attachment.url); 无需选择所需的确切字段。这将选择.custom_media_url 页面上的字段，例如每个小部件中的每个字段。

由于您使用的是jQuery，因此可以替换此行：

$(\'.custom_media_url\').val(attachment.url);

具有

$( e.target ).siblings( \'.custom_media_url\' ).val( attachment.url )

但是，使用wp.media.editor 这不是一个完美的功能，因为它的目的是在编辑器中发送图像，这包括额外的字段，如“链接到”等。这对你来说太过分了。

我建议尝试以下代码片段：

function media_upload( button_class ) {
    $( \'body\' ).on( \'click\', button_class, function( e ) {
        var $button = $( this ), frame;

        e.preventDefault();

        // Create a proper popup for selecting an image
        frame = wp.media({
            title:    \'Select image\',
            multiple: false,
            button: {
                text: \'Use this image\'
            }
        });

        // Add a callback for when an item is selected
        frame.state( \'library\' ).on( \'select\', function(){
            var image = this.get( \'selection\' ).first();

            // Inspect the image variable further
            // console.log( image.toJSON() )

            // Save the actual URL within the input
            $button.siblings( \'.custom_media_url\' ).val( image.get( \'url\' ) );
        });

        // Finally, open the frame
        frame.open();
    });
}
这将使用一个合适的媒体选择弹出窗口，虽然您可以使用该选项在那里选择图像大小，但那里也不会有无意义的选项。请记住，我没有测试此代码的错误。

标签： widgets   uploads   media-modal   小码农  

相关推荐

ADD_THEME_SUPPORT(‘CUSTOM-HEADER-UPLOADS’)；功能有什么作用？

同时向functions.php 文件中，我发现了以下内容：add_theme_support(\'custom-header-uploads\');这到底是做什么的？我删除了条目functions.php 但对网站没有什么不同。我最初认为这与上传标题图像的能力有关，但这取决于add_theme_support(\'custom-header\');在执行搜索时，我无法在Codex中看到任何有意义的信息。这是某种贬值的特征还是我忽略了什么？