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');