WordPress的3.5自定义媒体上传为您的主题选项 [英] Wordpress 3.5 custom media upload for your theme options

问题描述

最近发布的Wordpress 3.5，我通过thickbox和 window.send_to_editor 来使用Wordpress媒体上传系统，用于我的Wordpress主题（背景，徽标等等）中的一些选项。但是，正如你所知道的，Wordpress已经集成了一个新的媒体管理器，我想用这个新功能上传图片/文件作为自定义字段。所以我花了早上找到一个方法来获得希望的结果。

我发现这个解决方案，这可能对你们中的一些人有用。

HTML示例：

 < a href =＃class =custom_media_upload>上传< / a> 
< img class =custom_media_imagesrc =/> 
< input class =custom_media_urltype =textname =attachment_urlvalue => 
< input class =custom_media_idtype =textname =attachment_idvalue => 
  

jQuery代码：

点击（函数（）{
 
 var send_attachment_bkp = wp.media.editor.send.attachment; 
 
 wp（$。code> $（'。custom_media_upload' .media.editor.send.attachment = function（props，attachment）{
 $ b $（'。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; 
}）; 
  

如果您想查看附件中包含的所有设置变量，你可以做一个 console.log（附件）或警报（附件）。

解决方案

不要忘记使用 wp_enqueue_media 不要在帖子编辑页面上使用旧的媒体上传框，你可以这样做：

  if（function_exists（'wp_enqueue_media'））{
 wp_enqueue_media（）; 
} else {
 wp_enqueue_style（'thickbox'）; 
 wp_enqueue_script（'media-upload'）; 
 wp_enqueue_script（'thickbox'）; 
} 
  

Wordpress 3.5 has been released recently, I used the Wordpress Media Upload system via thickbox and window.send_to_editor for some options in my Wordpress theme (backgrounds, logos etc...).

But as you know Wordpress has integrated a new Media Manager, I wanted to used this new feature to upload images/files as custom fields. So I spent the morning to find a way to get the wished result.

I found with this solution, which can be useful for some of you. Thanks to give me your feedback on the code or any improvements you have in mind!

HTML Sample:

<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 Code:

$('.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;
});

If you want to see every settings contained in the attachment variable you can do a console.log(attachment) or alert(attachment).

解决方案

Don't forget to use wp_enqueue_media (new in 3.5) if you'r not on the post edit page

To use the old media upload box you can do this:

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

这篇关于WordPress的3.5自定义媒体上传为您的主题选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！