前面我們通過幾篇文章講述了怎樣新增一個簡單的表單，雖然只演示了簡單的文字輸入框，但是像文字域、單選框之類的跟文字輸入框基本一樣，今天這篇教程講述怎樣給wordpress後臺設定頁面新增一個圖片上傳功能，對於自定義背景、自定義頭部我們可以使用wp提供的函式，請參考本站wordpress主題功能整合之教程十五，但是對於自定義logo、自定義ico圖片、以及其它的一些關於圖片的設定選項就得自己配置了。

那樣是在是太繁瑣了，其實我們只需要呼叫wordpress的那個預設的圖片上傳頁面即可。

今天的例項為了簡單起見，只新增一個圖片上傳按鈕，並且使用我們上一篇教程中介紹的類。

檔案準備：我用預設主題Twenty Ten來測試，首先在這個主題的資料夾下新建一個檔案-myfunctions.php   然後開啟functions.php檔案在最底部新增下面的程式碼載入我們新建的這個檔案：

1. include_once('myfunctions.php');    

新增設定頁面：然後用編輯器開啟我們的myfunctions.php，新增建立後臺設定頁面的程式碼，下面的程式碼中，我將註釋全部去掉了，檢視註釋請參考上一篇文章。

1. <?php         
2. class ClassicOptions {            
3. function getOptions() {         
4. $options = get_option('classic_options');            
5. if (!is_array($options)) {          
6. $options['ashu_logo'] = 
   '';      
7.             update_option('classic_options', $options);         
8.         }   
9. return$options;      
10.     }   
11. function init() {   
12. if(isset($_POST['classic_save'])) {   
13. $options = ClassicOptions::getOptions();   
14. $options['ashu_logo'] = stripslashes($_POST['ashu_logo']);      
15.             update_option('classic_options', 
    $options);   
16.         } else {   
17.             ClassicOptions::getOptions();         
18.         }   
19.         add_theme_page("阿樹工作室主題設定", "阿樹工作室主題設定", 'edit_themes', basename(__FILE__), array('ClassicOptions', 'display'));         
20.     }   
21. function display() {        
22. $options = ClassicOptions::getOptions(); ?>         
23.         <form method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">         
24.         <div class="wrap">         
25.         <h2><?php _e('阿樹工作室主題設定'); ?></h2>   
26.         <p>   
27.         <label>   
28.             <input type="text" size="80"  name="ashu_logo" id="ashu_logo" value="<?php echo($options['ashu_logo']); ?>"/>   
29.             <input type="button" name="upload_button" value="上傳" id="upbottom"/>   
30.         </label>   
31.         </p>                           
32.         <p class="submit">    
33.             <input type="submit" name="classic_save" value="<?php _e('儲存設定'); ?>" />         
34.         </p>         
35.     </div>         
36. </form>         
37. <?php         
38.     }       
39. }         
40. add_action('admin_menu', array('ClassicOptions', 'init'));          
41. ?>   

之後檢視我們的後臺設定頁面，看一下我新增之後的效果圖：

此時文字域和上傳按鈕已經有了，但是點選還是沒有任何效果。為了點選後彈出那個上傳框架，我們還需要新增js程式碼。

為了便於管理，我們新建一個js檔案，在twentyten主題資料夾下新建一個資料夾js然後，在這個檔案加下新建一個upload.js檔案。新增js程式碼：

1. jQuery(document).ready(function() {   
2. //upbottom為上傳按鈕的id 
3.     jQuery('#upbottom').click(function() {   
4. //ashu_logo為文字域 
5.          targetfield = jQuery(this).prev('#ashu_logo');   
6.          tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');   
7. returnfalse;   
8.     });   
9.     window.send_to_editor = function(html) {   
10.          imgurl = jQuery('img',html).attr('src');   
11.          jQuery(targetfield).val(imgurl);   
12.          tb_remove();   
13.     }   
14. });   

下面就是載入js和css了。
在上面的類中display()函式中新增以下程式碼：

1. //載入upload.js檔案   
2.         wp_enqueue_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/upload.js');   
3. //載入上傳圖片的js(wp自帶) 
4.         wp_enqueue_script('thickbox');   
5. //載入css(wp自帶) 
6.         wp_enqueue_style('thickbox');  

之後如果你檢視後臺設定頁面的原始碼，在原始碼的大概最後面位置能看到你載入的這個js檔案。

好了，可以去試用了：

好了，一個簡單的後臺上傳圖片頁面已經新增完成，再接下來的教程中，我們將學習如何新增多個上傳表單，以及預覽圖片。

http://www.ashuwp.com/courses/optionpage/204.html