WordPress 主題後臺製作 (八): 圖片上傳

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

以前苦太狼在部落格中透過兩篇文章的篇幅用自己配置的程式碼實現了圖片上傳功能：參考 http://www.kutailang.com/WordPress/admin-panel/261.html

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

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

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

include_once('myfunctions.php');

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

<?php
class ClassicOptions {
function getOptions() {
$options = get_option('classic_options');
if (!is_array($options)) {
$options['ashu_logo'] = '';
update_option('classic_options', $options);
}
return $options;
}
function init() {
if(isset($_POST['classic_save'])) {
$options = ClassicOptions::getOptions();
$options['ashu_logo'] = stripslashes($_POST['ashu_logo']);
update_option('classic_options', $options);
} else {
ClassicOptions::getOptions();
}
add_theme_page("阿樹工作室主題設定", "阿樹工作室主題設定", 'edit_themes', basename(__FILE__), array('ClassicOptions', 'display'));
}
function display() {
$options = ClassicOptions::getOptions(); ?>
<form method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">
<div class="wrap">
<h2><?php _e('阿樹工作室主題設定'); ?></h2>
<p>
<label>
<input type="text" size="80" name="ashu_logo" id="ashu_logo" value="<?php echo($options['ashu_logo']); ?>"/>
<input type="button" name="upload_button" value="上傳" id="upbottom"/>
</label>
</p>
<p class="submit">
<input type="submit" name="classic_save" value="<?php _e('儲存設定'); ?>" />
</p>
</div>
</form>
<?php
}
}
add_action('admin_menu', array('ClassicOptions', 'init'));
?>

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

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

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

jQuery(document).ready(function() {
//upbottom 為上傳按鈕的 id
jQuery('#upbottom').click(function() {
//ashu_logo 為文字域
targetfield = jQuery(this).prev('#ashu_logo');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery(targetfield).val(imgurl);
tb_remove();
}
});

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

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