在 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. }