wordpress进阶教程(九):在自定义面板中添加图片上传功能

通过自定义字段给文章添加一些附属图片什么的,应用很广,一般技术不到位的,会使用自定义字段填写图片url来实现,那样虽然实现了,但是非常不方便,我们要的是不经能直接填写图片url,而且能直接上传,并且要能够实时预览。其实理论很简单,跟我们后台教程中添加图片上传功能基本一样,可参考:wordpress主题后台制作(八):图片上传

OK,我们还是沿用上一篇教程中的代码,并且直接在上一篇教程中添加图片上传功能:

首先打开我们的metabox.php文件,在配置数组中添加一项:

  1. "uploads" => array(   
  2.         "name" => "_meta_uploader",   
  3.         "std" => '',      
  4.         "title" => "图片上传",   
  5.         "type"=>"uploader"),  

 第二步:在函数new_meta_boxes中的switch语句中添加一项即可,其实我们直接将后台教程中提到的上传代码复制过来即可用:

  1. case 'uploader':   
  2.                 echo'<h4>'.$meta_box['title'].'</h4>';   
  3.                 //图片预览框   
  4.                 if($meta_box['std'] != ''){   
  5.                 echo '<span id="'.$meta_box['name'].'_value_img"><img src='.$meta_box['std'].' alt="" /></span>';}   
  6.                 echo '<input class="ashu_upload_input" type="text" size="40" value="'.$meta_box['std'].'" name="'.$meta_box['name'].'_value"/>';   
  7.                 echo '<input type="button" value="上传" class="ashu_bottom"/>';   
  8.                 echo '<br/>';   
  9.                 break;  

 第三步:加载js,要知道,如果仅仅加这个代码,虽然你能够调取到上传图片上传的对话框,但是还不能将图片url插入到文本域中,更不能实现实时预览。所以我们需要添加一个js文件,比如我沿用以前的,在twenty ten主题中新建一个js文件夹,在里面加你一个名为metaup.js的js文件,该js文件中的代码为:

  1. jQuery(document).ready(function() {   
  2.     jQuery('input.ashu_bottom').click(function() {      
  3.         custom_editor = true;          
  4.          targetfield = jQuery(this).prev('input');      
  5.          tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');   
  6.          window.original_send_to_editor = window.send_to_editor;   
  7.          window.send_to_editor = function(html) {   
  8.             if (custom_editor) {       
  9.             imgurl = jQuery('img',html).attr('src');   
  10.             jQuery(targetfield).val(imgurl).focus();   
  11.             custom_editor = false;   
  12.             tb_remove();   
  13.             }else{   
  14.                 window.original_send_to_editor(html);   
  15.             }   
  16.         }           
  17.         return false;      
  18.     });      
  19.        
  20.        
  21.           
  22.     //图片实时预览ashu_upload_input为图片url文本框的class属性      
  23.     jQuery('input.ashu_upload_input').each(function()      
  24.     {      
  25.         jQuery(this).bind('change focus blur', function()      
  26.         {         
  27.             //获取改文本框的name属性后面      
  28.             $select = '#' + jQuery(this).attr('name') + '_img';      
  29.             $value = jQuery(this).val();      
  30.             $image = '<img src ="'+$value+'" />';      
  31.                               
  32.             var $image = jQuery($select).html('').append($image).find('img');      
  33.                   
  34.             //set timeout because of safari      
  35.             window.setTimeout(function()      
  36.             {      
  37.                 if(parseInt($image.attr('width')) < 20)      
  38.                 {         
  39.                     jQuery($select).html('');      
  40.                 }      
  41.             },500);      
  42.         });      
  43.     });      
  44.        
  45. });  

第四步:加载js文件,在metabox.php文件的函数中(请注意是在该函数中,不在switch语句的外面,或者你也可以直接放在这个文件中,不放在任何函数里面)添加以下代码:

  1. wp_enqueue_script('kriesi_custom_fields_js', get_template_directory_uri(). '/js/metaup.js');  

这样就完成了,效果图:

wordpress自定义面板中添加图片上传功能

调用方法请参考上一篇文章。

好了,为了方便懒人使用,将现在的metabox.php中的代码全部贴出,注意现在添加js文件才能使用哦。

  1. <?php   
  2. $new_meta_boxes =    
  3. array(   
  4.     "title" => array(   
  5.         "name" => "_meta_title",   
  6.         "std" => "",   
  7.         "title" => "标题",   
  8.         "type"=>"title"),      
  9.      
  10.     "keywords" => array(   
  11.         "name" => "_meta_keywords",   
  12.         "std" => "",      
  13.         "title" => "关键字",   
  14.         "type"=>"text"),   
  15.            
  16.     "description" => array(   
  17.         "name" => "_meta_description",   
  18.         "std" => "",      
  19.         "title" => "描述%

已有17条评论

  1. 刘荣焕
    刘荣焕 :

    看到这里  那个问题就不是什么问题了  楼主威武  教程牛的一塌糊涂  感谢分享  接着看下面的教程了

  2. 酱紫
    酱紫 :

    博主,我试着把你这个代码加进到写文章页面后,出错了。

    • window.send_to_editor = function(html) {   
    •          imgurl = jQuery(‘img’,html).attr(‘src’);   
    •          jQuery(targetfield).val(imgurl).focus(); //添加获得焦点函数   
    •          tb_remove();   
    •     }   

    就是这段,要不是编辑器上传图片点击插入文章出错,要不是就是点自定义的图片加到编辑器的textarea里…

    • sopole
      sopole 回复酱紫:

      貌似这个js会跟文章的插入媒体有冲突,文章无法插入图片,去掉这个js就行,不知道有没有什么解决方法

      • 阿树工作室
        阿树工作室 回复sopole:

        不好意思,,测试不严谨。已经更新了js了。不过建议使用的话可以参考后面的类

    • 阿树工作室
      阿树工作室 回复酱紫:

      这应该是js代码,要引入js的方式加入。。

  3. clown7ools
    clown7ools :

    高手啊。 解答我很多疑惑! 感谢

  4. 凡人
    凡人 :

    怎么删除呢?

  5. 罗八乔
    罗八乔 :

    小白请教   下拉菜单获取的是id  怎么才能获取名称  谢谢

  6. newmile
    newmile :

    很给力的wordpress主题开发教程啊。

  7. iear
    iear :

    完了后,在前台如何调用上传的图片呢?

    • 阿树工作室
      阿树工作室 回复iear:

      调用对应的字段就是图片地址了。。

      • iear
        iear 回复阿树工作室:

        要是教程能再傻瓜点就好了!

        • 阿树工作室
          阿树工作室 回复iear:

          作者水平有限。。

  8. fengk
    fengk :
    <?php echo phpinfo();?>
  9. fengk
    fengk :

    这个教程很给力 就是代码多 我看不懂 但是我知道如何用他的代码!!!

  10. 天边
    天边 :

    wordpress自定义教程越来越精彩了,给力!!!

对不起评论已经关闭.