在 WordPress 3.5 以前，WordPress 上傳圖片彈出框如圖所示，而本工作室釋出的設定選項類檔案、新增自定義面板類檔案中的圖片上傳也是使用的老版本的圖片上傳工能。

到了 WordPress 3.5 以上版本，出現了新的媒體中心，新的媒體庫介面還支援圖片多選，介面如圖：

那麼怎樣呼叫新的媒體中心呢？

下面做一個示例：

第一步：在後臺新建一個設定頁面

首先在後臺新建一個設定頁面，用來上傳 Logo，在 functions.php 檔案中新增以下程式碼，其中 add_theme_page 函式將會在後臺的 「外觀」 選單項裡面再增加一個子選單項，新新增的設定頁面將會呼叫 ashuwp_display_function 這個函式來輸出內容。

  1. function ashuwp_function(){   
  2.     add_theme_page( '主題設定', '主題設定', 'edit_themes', 'ashu_slug','ashuwp_display_function');   
  3. }   
  4. add_action('admin_menu', 'ashuwp_function');  

 

第二部，在頁面輸出內容

上面新增設定頁面的函式中，要呼叫 ashuwp_display_function 這個函式來顯示內容，那麼接下來就新增 ashuwp_display_function 函式，來輸出上傳 logo 的輸入框和按鈕。

  1. function ashuwp_display_function(){   
  2.     echo '<h1>Logo 設定</h1>';   
  3.     echo '<form method="post">';   
  4.        
  5.     echo '<input type="text" size="60" value="'.get_option('ashu_upload').'" name="ashu_upload" class="ashuwp_url_input" id="ashu_upload_input"/><a id="ashu_upload" class="ashu_upload_button button" href="#"> 上傳</a>';   
  6.        
  7.     echo '<p><input type="hidden" value="1" name="save_ashuwp_options"/>';   
  8.     echo '<input type="submit" name="Submit" class="button-primary autowidth" value="儲存設定" /></p>';   
  9.     echo '</form>';   
  10. }  

上面的程式碼輸出了一個標題，一個簡單的表單，表單中包含：一個文字輸入框，一個上傳按鈕，一個隱藏的驗證域，一個提交按鈕，其中 input 文字輸入框的 value 為 get_option('ashu_upload')，請注意 input 的 id 、 name，以及按鈕的 id, 要說明的是，雖然上面的按鈕只是輸出了一個<a> 標籤，但是其中的類名為 button，在 wp 的後臺就會顯示為按鈕樣式。此時新增的主題設定頁面應該如圖：

有了顯示，還得能儲存，所以將 ashuwp_display_function 函式中新增處理資料並儲存的程式碼, 更改後的函式如下：

  1. function ashuwp_display_function(){   
  2.     /****處理資料********/  
  3.     if ( isset( $_POST['save_ashuwp_options'] ) ) { //save_ashuwp_options 是先前輸出的隱藏域   
  4.         $new_option = $old_option = get_option('ashu_upload'); //獲取老資料, 新資料的值暫時和老資料一樣   
  5.         $new_option = $_POST['ashu_upload']; //獲取提交的資料，新資料重新賦值   
  6.            
  7.         if ( $old_option != $new_option ) { //如果新老資料不一樣，就說明更改了   
  8.             update_option( 'ashu_upload', $new_option ); //更新上資料   
  9.         }   
  10.     }   
  11.     /******處理資料*****/  
  12.     echo '<h1>Logo 設定</h1>';   
  13.     echo '<form method="post">';   
  14.        
  15.     echo '<input type="text" size="60" value="'.get_option('ashu_upload').'" name="ashu_upload" class="ashuwp_url_input" id="ashu_upload_input"/><a id="ashu_upload" class="ashu_upload_button button" href="#"> 上傳</a>';   
  16.        
  17.     echo '<p><input type="hidden" value="1" name="save_ashuwp_options"/>';   
  18.     echo '<input type="submit" name="Submit" class="button-primary autowidth" value="儲存設定" /></p>';   
  19.     echo '</form>';   
  20. }  

此時，如果再後臺手動輸入資料，是已經可以儲存、更改設定資料的。

第三步：新增 js

首先需要呼叫 wp_enqueue_media() 載入媒體庫的程式碼，不過如果你是在文章頁面，預設已經載入了這些程式碼，可以不用再呼叫。
其次，為了程式碼的完整性，本次的 js 程式碼也不單獨放一個 js 檔案了。以下是新增了 js 程式碼之後的 ashuwp_display_function 函式，，由於這是 php 程式碼，所以請注意 php 的<?php 和?> 標籤。

  1. function ashuwp_display_function(){   
  2.     /****處理資料********/  
  3.     if ( isset( $_POST['save_ashuwp_options'] ) ) { //save_ashuwp_options 是先前輸出的隱藏域   
  4.         $new_option = $old_option = get_option('ashu_upload'); //獲取老資料, 新資料的值暫時和老資料一樣   
  5.         $new_option = $_POST['ashu_upload']; //獲取提交的資料，新資料重新賦值   
  6.            
  7.         if ( $old_option != $new_option ) { //如果新老資料不一樣，就說明更改了   
  8.             update_option( 'ashu_upload', $new_option ); //更新上資料   
  9.         }   
  10.     }   
  11.     /******處理資料*****/  
  12.     echo '<h1>Logo 設定</h1>';   
  13.     echo '<form method="post">';   
  14.        
  15.     echo '<input type="text" size="60" value="'.get_option('ashu_upload').'" name="ashu_upload" class="ashuwp_url_input" id="ashu_upload_input"/><a id="ashu_upload" class="ashu_upload_button button" href="#"> 上傳</a>';   
  16.        
  17.     echo '<p><input type="hidden" value="1" name="save_ashuwp_options"/>';   
  18.     echo '<input type="submit" name="Submit" class="button-primary autowidth" value="儲存設定" /></p>';   
  19.     echo '</form>';   
  20.        
  21.     /******以下是新增的 js****/  
  22.     wp_enqueue_media(); //在設定頁面需要載入媒體中心   
  23.     ?>   
  24.     <script>   
  25.     jQuery(document).ready(function(){   
  26.     var ashu_upload_frame;   
  27.     var value_id;   
  28.     jQuery('.ashu_upload_button').live('click',function(event){   
  29.         value_id =jQuery( this ).attr('id');       
  30.         event.preventDefault();   
  31.         if( ashu_upload_frame ){   
  32.             ashu_upload_frame.open();   
  33.             return;   
  34.         }   
  35.         ashu_upload_frame = wp.media({   
  36.             title: 'Insert image',   
  37.             button: {   
  38.                 text: 'Insert',   
  39.             },   
  40.             multiple: false   
  41.         });   
  42.         ashu_upload_frame.on('select',function(){   
  43.             attachment = ashu_upload_frame.state().get('selection').first().toJSON();   
  44.             jQuery('input[name='+value_id+']').val(attachment.url);   
  45.         });   
  46.            
  47.         ashu_upload_frame.open();   
  48.     });   
  49.     });   
  50.     </script>   
  51.     <?php   
  52.     /*****js******/  
  53. }  

至此，呼叫新版媒體庫程式碼已經完成。

以下是本次的完整程式碼，懶人專用，你只需要複製下面的程式碼放到主題的 functions.php 檔案的最後一個?> 之前即可。本次程式碼在 wp 3.8.1 版本的 Twenty Fourteen 主題下測試。

  1. function ashuwp_function(){   
  2.     add_theme_page( '主題設定', '主題設定', 'administrator', 'ashu_slug','ashuwp_display_function');   
  3. }   
  4. add_action('admin_menu', 'ashuwp_function');   
  5.   
  6.   
  7. function ashuwp_display_function(){   
  8.     /****處理資料********/  
  9.     if ( isset( $_POST['save_ashuwp_options'] ) ) { //save_ashuwp_options 是先前輸出的隱藏域   
  10.         $new_option = $old_option = get_option('ashu_upload'); //獲取老資料, 新資料的值暫時和老資料一樣   
  11.         $new_option = $_POST['ashu_upload']; //獲取提交的資料，新資料重新賦值   
  12.            
  13.         if ( $old_option != $new_option ) { //如果新老資料不一樣，就說明更改了   
  14.             update_option( 'ashu_upload', $new_option ); //更新上資料   
  15.         }   
  16.     }   
  17.     /******處理資料*****/  
  18.     echo '<h1>Logo 設定</h1>';   
  19.     echo '<form method="post">';   
  20.        
  21.     echo '<input type="text" size="60" value="'.get_option('ashu_upload').'" name="ashu_upload" class="ashuwp_url_input" id="ashu_upload_input"/><a id="ashu_upload" class="ashu_upload_button button" href="#"> 上傳</a>';   
  22.        
  23.     echo '<p><input type="hidden" value="1" name="save_ashuwp_options"/>';   
  24.     echo '<input type="submit" name="Submit" class="button-primary autowidth" value="儲存設定" /></p>';   
  25.     echo '</form>';   
  26.        
  27.     /******以下是新增的 js****/  
  28.     wp_enqueue_media(); //在設定頁面需要載入媒體中心   
  29.     ?>   
  30.     <script>   
  31.     jQuery(document).ready(function(){   
  32.     var ashu_upload_frame;   
  33.     var value_id;   
  34.     jQuery('.ashu_upload_button').live('click',function(event){   
  35.         value_id =jQuery( this ).attr('id');       
  36.         event.preventDefault();   
  37.         if( ashu_upload_frame ){   
  38.             ashu_upload_frame.open();   
  39.             return;   
  40.         }   
  41.         ashu_upload_frame = wp.media({   
  42.             title: 'Insert image',   
  43.             button: {   
  44.                 text: 'Insert',   
  45.             },   
  46.             multiple: false   
  47.         });   
  48.         ashu_upload_frame.on('select',function(){   
  49.             attachment = ashu_upload_frame.state().get('selection').first().toJSON();   
  50.             //jQuery('#'+value_id+'_input').val(attachment.url).trigger('change');   
  51.             jQuery('input[name='+value_id+']').val(attachment.url).trigger('change');   
  52.         });   
  53.            
  54.         ashu_upload_frame.open();   
  55.     });   
  56.     });   
  57.     </script>   
  58.     <?php   
  59.     /*****js******/  
  60. }