如果想给主题添加自定义的主题页面呢？
先来看看Ryan’s提供的方法：如何在wordpress主题中添加设置页面。
读完这篇文章，相信我们已经可以为主题添加一个主题设置页面了，嗯，但是好像还有些问题：
如何在顶级菜单中添加多个设置页面？
设置页面中我想添加css和js，怎么实现？
必须要把那么多的代码都写在functions文件中吗？
要让使用者选择文章分类，自定义页面，图片上传等等复杂的业务选项呢？
ok，下面我们动手来解决上面几个问题：
先看最终实现的效果：
先看最终实现的效果：
注：以下代码较长，如有密集恐惧症者慎入，头晕恶心，偶感不适者可下载代码包后酌情考虑！
下载源代码包：options.zip
1、添加顶级菜单和子菜单
在functions.php中加入以下代码：
<?php
//添加设置菜单，注意add_menu_page和add_submenu_page的写法
//参考：http://lizhenzhen8911.blog.163.com/blog/static/96400189201292442712309/
add_action('admin_menu', 'options_admin_menu');
function options_admin_menu(){
add_menu_page( '主题设置', '主题设置', 'administrator', 'base-settings', 'BaseSettings', '', 100);
add_submenu_page('base-settings', '基本设置', '基本设置', 'administrator', 'base-settings', 'BaseSettings');
add_submenu_page('base-settings', '高级设置', '高级设置', 'administrator', 'advanced-settings', 'AdvancedSettings');
}
//加载设置文件
add_action('admin_head', 'OptionFile');
function OptionFile(){
require_once( get_template_directory() . '/inc/option.php' ); //代码解耦
}
?>
然后我们在主题根目录下面新建一个inc文件夹，并新建option.php放入其中，加入以下代码：
<?php /**主题设置项更新页面**/
//成功提示
define('SuccessInfo','<div class="updated"><p><strong>设置已保存。</strong></p></div>');
//基本设置
function BaseSettings(){
if ($_POST['update_options']=='true') {
// 数据更新验证
update_option('text-demo', $_POST['text-demo']); //input
update_option('textarea-demo', $_POST['textarea-demo']); //textarea
update_option('select-demo', $_POST['select-demo']); //select
if ($_POST['checkbox-demo']=='on') { $display = 'checked'; } else { $display = ''; }
update_option('checkbox-demo', $display); //checkbox
echo SuccessInfo;
}
require_once(get_template_directory().'/inc/base.php'); //代码解耦
add_action('admin_menu', 'BaseSettings');
}
//高级设置
function AdvancedSettings(){
if ($_POST['update_options']=='true') {
update_option('categories-demo', $_POST['categories-demo']); //Categories
update_option('pages-demo', $_POST['pages-demo']); //Pages
update_option('upload-demo', $_POST['upload-demo']); //Upload
echo SuccessInfo;
}
require_once(get_template_directory().'/inc/advanced.php'); //代码解耦
add_action('admin_menu', 'AdvancedSettings');
}
?>
在inc文件夹下新建base.php，加入以下代码：
<div class="wrap">
<h2>基本设置</h2>
<form method="POST" action="">
<input type="hidden" name="update_options" value="true" />
<table class="form-table">
<tbody>
<tr valign="top">
<th scope="row"><label for="text-demo">文本框(text)示例</label></th>
<td>
<input type="input" name="text-demo" id="text-demo" class="regular-text" value="<?php echo get_option('text-demo'); ?>" />
<p class="description">说明文字</p>
</td>
</tr>
<tr valign="top">
<th scope="row"><label for="textarea-demo">文本域(textarea)示例</label></th>
<td><textarea name="textarea-demo" id="textarea-demo" class="large-text"><?php echo get_option('textarea-demo'); ?></textarea></td>
</tr>
<tr valign="top">
<th scope="row"><label>下拉列表(Select)示例</label></th>
<td><select name ="select-demo">
<?php $colour = get_option('select-demo'); ?>
<option value="gray" <?php if ($colour=='gray') { echo 'selected'; } ?>>灰色</option>
<option value="blue" <?php if ($colour=='blue') { echo 'selected'; } ?>>浅蓝</option>
</select></td>
</tr>
<tr valign="top">
<th scope="row"><label for="checkbox-demo">复选框(checkbox)示例</label></th>
<td><input type="checkbox" name="checkbox-demo" id="checkbox-demo" <?php echo get_option('checkbox-demo'); ?> /> 任何人都可以注册</td>
</tr>
</tbody>
</table>
<p><input type="submit" class="button-primary" name="admin_options" value="更新数据"/></p>
</form>
</div>
在inc下新建advanced.php，加入以下代码：
<div class="wrap">
<h2>高级设置</h2>
<form method="POST" action="">
<input type="hidden" name="update_options" value="true" />
<table class="form-table">
<tbody>
<tr valign="top">
<th scope="row">选择文章分类</th>
<td>
<?php wp_dropdown_categories(array('name' =>'categories-demo','hide_empty' => 0,'orderby' => 'name','show_count' => 1,'selected' =>get_option('categories-demo'),'hierarchical' => true,'show_option_none' =>'全部分类','echo' => 1)); ?>
</td>
</tr>
<tr valign="top">
<th scope="row">选择页面</th>
<td><?php wp_dropdown_pages(array('name' =>'pages-demo')); ?></td>
</tr>
<tr valign="top">
<th scope="row">图片选择&图片上传</th>
<td><input type="text" name="upload-demo" value="<?php echo get_option('upload-demo'); ?>"/><a id="upload-demo" class="cp_upload_button button" href="#">上传</a></td>
</tr>
</tbody>
</table>
<p><input type="submit" class="button-primary" name="admin_options" value="更新数据"/></p>
</form>
</div>
<?php wp_enqueue_media(); ?> <!-- 必须 -->
<script>
//调用媒体库上传图片
jQuery(document).ready(function(){
var upload_frame;
var value_id;
jQuery('.cp_upload_button').live('click',function(event){
value_id =jQuery( this ).attr('id');
event.preventDefault();
if( upload_frame ){
upload_frame.open();
return;
}
upload_frame = wp.media({
title: '选择图片',
button: {
text: '插入',
},
multiple: false
});
upload_frame.on('select',function(){
attachment = upload_frame.state().get('selection').first().toJSON();
jQuery('input[name='+value_id+']').val(attachment.url);
//jQuery('img').attr("src",attachment.url);//图片预览
});
upload_frame.open();
});
});
</script>
注意在wordpress后台中，jQuery的控制权并没有移交给$，所以不能直接是用$代替，可参考《wordpress插件后台界面中如何使用JQuery》。
2、添加自定义css和js
需要添加自定义的css和js可在主函数文件（functions.php）中通过add_action(“admin_print_styles”)函数实现，示例如下：
//后台自定义选项样式
add_action("admin_print_styles", "OptionsStyle" );
function OptionsStyle(){
wp_enqueue_style( "admin_css", get_template_directory_uri() . "/inc/options.css" );
}
Over！以上代码只说明了一个大概的流程，代码也做了解耦处理，便于二次开发和维护。如果发现错误或者更好的实现办法，请不吝赐教。