WordPress后台定制-在自定义字段面板中调用媒体/图片上传对话框方法

美工学习

在wordpress自定义字段面板中，有时候我们需要上传图片，或者附件，并且获取它的URL作为这个自定义字段的值。这个属于WordPress比较高级的后台定制了，但却是很常见的。很多插件都提供了解决方案，今天我把代码扒出来，可以直接用在主题的后台中。
把原本自定义字段的的input标签换成如下这段代码：

1. <input type="text" name="custom_media_url" id="custom_media_url" value="<?php echo $custom_meta_url; ?>"  style="width:100%" />
   
2. <input type="button" value="Upload" class="custom_media_bt" />
   
3. <script>
   
4. jQuery(document).ready(function() {
   
5.     //input.custom_media_bt为上传按钮
   
6.     jQuery('input.custom_media_bt').click(function() {
   
7.         //custom_media_url为文本域
   
8.          targetfield = jQuery(this).prev('#custom_media_url');
   
9.          tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
   
10.          return false;
    
11.     });
    
12.     window.send_to_editor = function(html) {
    
13.          imgurl = jQuery('img',html).attr('src');
    
14.          jQuery(targetfield).val(imgurl);  
    
15.          tb_remove();
    
16.     }
    
17. });
    
18. </script>

复制代码

以上代码的custom_meta_url就是自定义字段的名称了，对应需做修改。
用了这段代码效果如图，上传文件的输入框和按钮：

点击按钮弹出媒体对话框：

上传完毕后会在input输入框中出现上传的媒体的URL。

从WordPress3.5开始，我们有了更先进的媒体管理工具，不用就浪费了，于是上面这段代码可以升级成这样：

1. <img class="custom_media_image" src="" style="width:30px; height:30px" />
   
2. <span class="custom_media_id" name="attachment_id"></span>
   
3. <input class="custom_media_url" type="text" name="attachment_url" value="">
   
4. <input type="button" value="Upload" class="custom_media_upload" />
   
5. <script>
   
6. jQuery('.custom_media_upload').click(function() {
   
7.     var send_attachment_bkp = wp.media.editor.send.attachment;
   
8.     wp.media.editor.send.attachment = function(props, attachment) {
   
9.         jQuery('.custom_media_image').attr('src', attachment.url);
   
10.         jQuery('.custom_media_url').val(attachment.url);
    
11.         jQuery('.custom_media_id').html(attachment.id);
    
12.         wp.media.editor.send.attachment = send_attachment_bkp;
    
13.     }
    
14.     wp.media.editor.open();
    
15.     return false;      
    
16. });
    
17. </script>

复制代码

这样点击上传按钮，就用上了最新的媒体管理工具，

这段代码顺便让自定义字段的面板变得更好用了，上传完毕后显示预览图和附件的ID。

这样就可以了

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！