WordPress 3.5 自定义媒体上传为您的主题选项

Posted 2023-05-09

【中文标题】WordPress 3.5 自定义媒体上传为您的主题选项

【英文标题】：WordPress 3.5 custom media upload for your theme options

【发布时间】：2012-11-30 15:02:29

【问题描述】：

WordPress 3.5 最近发布了，我通过thickbox 和window.send_to_editor 使用了WordPress 媒体上传系统，用于我的WordPress 主题中的一些选项（背景、徽标等...）。

但正如您所知，WordPress 已经集成了一个新的媒体管理器，我想使用这个新功能将图像/文件作为自定义字段上传。所以我花了一上午的时间想办法得到想要的结果。

我发现了这个解决方案，它对你们中的一些人可能有用。感谢您对代码或您想到的任何改进提供反馈！

html 示例：

<a href="#" class="custom_media_upload">Upload</a>
<img class="custom_media_image" src="" />
<input class="custom_media_url" type="text" name="attachment_url" value="">
<input class="custom_media_id" type="text" name="attachment_id" value="">

jQuery 代码：

$('.custom_media_upload').click(function() 

    var send_attachment_bkp = wp.media.editor.send.attachment;

    wp.media.editor.send.attachment = function(props, attachment) 

        $('.custom_media_image').attr('src', attachment.url);
        $('.custom_media_url').val(attachment.url);
        $('.custom_media_id').val(attachment.id);

        wp.media.editor.send.attachment = send_attachment_bkp;
    

    wp.media.editor.open();

    return false;
);

如果您想查看attachment 变量中包含的所有设置，您可以使用console.log(attachment) 或alert(attachment)。

【问题讨论】：

Wordpress 管理员使用 noConflict 所以我不得不更改 $ -> jQuery。非常有帮助，谢谢！

非常感谢这个清晰的例子！传递帖子 ID 就像在 wp.media.editor.open() 中将其作为参数传递一样简单

我想知道如何将媒体 API 作为依赖项加载到 wp_enqueue_script() 中的某些脚本。我知道wp_enqueue_media() 在那里，但我更喜欢使用依赖 - 有没有办法做到这一点？

【参考方案1】：

您以一种无意的方式进行操作。您的 javascript 代码应该看起来像这样：

$('.custom_media_upload').click(function(e) 
    e.preventDefault();

    var custom_uploader = wp.media(
        title: 'Custom Title',
        button: 
            text: 'Custom Button Text'
        ,
        multiple: false  // Set this to true to allow multiple files to be selected
    )
    .on('select', function() 
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $('.custom_media_image').attr('src', attachment.url);
        $('.custom_media_url').val(attachment.url);
        $('.custom_media_id').val(attachment.id);
    )
    .open();
);

【讨论】：

你能建议我如何从上传器中删除媒体库选项

custom_uploader.on('open', function()...customize...) ?

有人知道wp.media() 的完整参数列表吗？例如，它也有库，并且需要类型，但我想从选择选项中排除某些 ID。

实例打开了2次，不明白为什么会这样？谢谢

我认为没有完整的参数列表，但如果您愿意，可以查看wp-includes/js/media-views.js 中的代码。只需搜索“media.controller.Library =”

【参考方案2】：

如果您不在帖子编辑页面上，请不要忘记使用wp_enqueue_media（3.5 中的新功能）

要使用旧媒体上传框，您可以这样做：

if(function_exists( 'wp_enqueue_media' ))
    wp_enqueue_media();
else
    wp_enqueue_style('thickbox');
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');

【讨论】：

我想知道如何将媒体 API 作为依赖项加载到 wp_enqueue_script() 中的某些脚本。我知道wp_enqueue_media() 在那里，但我更喜欢使用依赖 - 有没有办法做到这一点？我正在寻找所有必需库的名称 - 就像您在示例中使用 WP3.5 之前的媒体脚本一样。

最好查看源代码到底排入了什么队列：core.trac.wordpress.org/browser/tags/3.5.1/wp-includes/…

【参考方案3】：

我稍微修改了这段代码，使其可以同时用于多个字段：

HTML：

<!-- Image Thumbnail -->
<img class="custom_media_image" src="" style="max-width:100px; float:left; margin: 0px     10px 0px 0px; display:inline-block;" />

<!-- Upload button and text field -->
<input class="custom_media_url" id="" type="text" name="" value="" style="margin-bottom:10px; clear:right;">
<a href="#" class="button custom_media_upload">Upload</a>

jQuery:

jQuery(document).ready(function($)

$('.custom_media_upload').click(function() 

        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = $(this);

        wp.media.editor.send.attachment = function(props, attachment) 

            $(button).prev().prev().attr('src', attachment.url);
            $(button).prev().val(attachment.url);

            wp.media.editor.send.attachment = send_attachment_bkp;
        

        wp.media.editor.open(button);

        return false;       
    );

);

【参考方案4】：

如果编辑器关闭，我没有发现任何可以触发自定义功能的东西。我用这个：

wp.media.editor.open();
$('.media-modal-close, .media-modal-backdrop').one('click', function()
    //do some stuff
);

或更好：

var id = wp.media.editor.id();
var editor = wp.media.editor.get( id );
if('undefined' != typeof( editor )) editor = wp.media.editor.add( id );

if ( editor ) 
    editor.on('close', function()
        //do some stuff
    );

【讨论】：

有close 和escape 等事件，您可以在wp.media 对象上进行绑定。例如，wp.media.editor.add('content').on('all',function(n)alert(n);)

【参考方案5】：

我没有太多机会玩这个，但对于那些希望利用画廊元素的人来说，这段代码应该会让你上路。

这只是一个起点 - 它只提供了一个逗号分隔的图像 ID 列表，但这应该足以开始有创意了。

<input id="custom_media_id" type="text" name="attachment_id" value="">
<a href="#" class="button custom_media_upload" title="Add Media">Add Media</a>

<script type="text/javascript">
  jQuery('.custom_media_upload').click(function() 
    var clone = wp.media.gallery.shortcode;
    wp.media.gallery.shortcode = function(attachments) 
    images = attachments.pluck('id');
    jQuery('#custom_media_id').val(images);
    wp.media.gallery.shortcode = clone;
    var shortcode= new Object();
    shortcode.string = function() return '';
    return shortcode;
  
jQuery(this).blur(); // For Opera. See: http://core.trac.wordpress.org/ticket/22445
wp.media.editor.open();
return false;       
);
</script>

这将使用逗号分隔的图像 ID 列表填充输入字段，按照它们在编辑器中设置的顺序（使用新的拖放功能）。

该函数希望将短代码发回以放置在主编辑器中，但我们不想这样做，因此我们创建了一个新对象，该对象返回一个空白字符串以供插入。

另外请注意，这不会像上面描述的那样处理插入单个图像 - 它只会将其放入帖子编辑器中。所以尝试组合这两个监听器，或者删除相应的选项卡。

编辑

花了一些时间研究核心，我认为使用here 中的技术实际上可以更轻松地完成整个过程，但正如您将阅读的那样，我还没有弄清楚如何预先选择重新打开媒体管理器时的图像。