透過自定義欄位給文章新增一些附屬圖片什麼的，應用很廣，一般技術不到位的，會使用自定義欄位填寫圖片 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');  

這樣就完成了，效果圖：

呼叫方法請參考上一篇文章。

好了，為了方便懶人使用，將現在的 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" => "描述%