主题技巧: 为主题添加管理选项

WordPress 主题的管理选项标签页

难度:

过去一年, 我先后发布了 Elegant Box 和 Block 两个 WordPress 主题. 对于主题的制作虽不如老手, 但在完善的过程中对主题灵活性的要求却是体会颇深.
用户对界面的要求是各不相同的, 一个主题做下来就一个样是不能满足用户的. 他们会改你的主题 (烧刻的 Feed 地址也得改上去吧), 并向你提出各种问题直到你应接不暇.
对用户来说, 页面上的一些东西可能会常变的 (比如: 公告). 作为主题制作者应该考虑到这样的一些问题并灵活处理, 以免用户频繁的修改代码.
为此, 我们可以为主题添加一些管理选项, 用户可以在后台通过修改这些选项的值令主题有不一样的表现.

为主题添加一些管理选项并不是难事, 你只要回写完第一个选项处理, 其他选项的处理就迎刃而解了.
我们这次用 WordPress 自带的主题 classic 作为例子, 创建一个首页公告栏的管理选项.
本教程需要一定的 HTML 基础, 并对 PHP 有初步了解.
好, 我们这就说说怎么处理.

后台处理

首先, 我们要修改 function.php, 主要的处理工作都在这个文件里面, 如果主题没有这个文件, 就创建一个吧. (没有 function.php 说明主题不支持 Widget, 可不是一个好习惯哦, 还是赶紧新建一个吧, 想让主题支持 Widget 可以看看这里: 让主题支持 Widget)
我的处理包括 3 大块: 获取选项, 初始化, 标签页操作界面. 我这里只创建一个公告栏, 包括两个选项 (是否显示公告栏和公告栏内容). 如果要添加更多选项, 也只需要代码中 3 个 TODO 的位置上追加一些代码而已. 当然, 你还需要改一下选项名称, 将 Classic 和 classic 全部之换掉.
我已经在代码中标注了大量注释, 下面看看代码吧.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<?php
 
/**
 * 选项组类型
 */
class ClassicOptions {
 
	/* -- 获取选项组 -- */
	function getOptions() {
		// 在数据库中获取选项组
		$options = get_option('classic_options');
		// 如果数据库中不存在该选项组, 设定这些选项的默认值, 并将它们插入数据库
		if (!is_array($options)) {
			$options['notice'] = false;
			$options['notice_content'] = '';
			// TODO: 在这里追加其他选项
			update_option('classic_options', $options);
		}
		// 返回选项组
		return $options;
	}
 
	/* -- 初始化 -- */
	function init() {
		// 如果是 POST 提交数据, 对数据进行限制, 并更新到数据库
		if(isset($_POST['classic_save'])) {
			// 获取选项组, 因为有可能只修改部分选项, 所以先整个拿下来再进行更改
			$options = ClassicOptions::getOptions();
 
			// 数据限制
			if ($_POST['notice']) {
				$options['notice'] = (bool)true;
			} else {
				$options['notice'] = (bool)false;
			}
			$options['notice_content'] = stripslashes($_POST['notice_content']);
 
			// TODO: 在这追加其他选项的限制处理
 
			// 更新数据
			update_option('classic_options', $options);
 
		// 否则, 重新获取选项组, 也就是对数据进行初始化
		} else {
			ClassicOptions::getOptions();
		}
 
		// 在后台 Design 页面追加一个标签页, 叫 Current Theme Options
		add_theme_page("Current Theme Options", "Current Theme Options", 'edit_themes', basename(__FILE__), array('ClassicOptions', 'display'));
	}
 
	/* -- 标签页 -- */
	function display() {
		$options = ClassicOptions::getOptions();
?>
 
<form action="#" method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">
	<div class="wrap">
		<h2><?php _e('Current Theme Options', 'classic'); ?></h2>
 
		<!-- 公告栏 -->
		<table class="form-table">
			<tbody>
				<tr valign="top">
					<th scope="row">
						<?php _e('Notice', 'classic'); ?>
						<br/>
						<small style="font-weight:normal;"><?php _e('HTML enabled', 'classic') ?></small>
					</th>
					<td>
						<!-- 是否显示公告栏 -->
						<label>
							<input name="notice" type="checkbox" value="checkbox" <?php if($options['notice']) echo "checked='checked'"; ?> />
							 <?php _e('Show notice.', 'classic'); ?>
						</label>
						<br/>
						<!-- 公告栏内容 -->
						<label>
							<textarea name="notice_content" cols="50" rows="10" id="notice_content" style="width:98%;font-size:12px;" class="code"><?php echo($options['notice_content']); ?></textarea>
						</label>
					</td>
				</tr>
			</tbody>
		</table>
 
		<!-- TODO: 在这里追加其他选项内容 -->
 
		<!-- 提交按钮 -->
		<p class="submit">
			<input type="submit" name="classic_save" value="<?php _e('Update Options &raquo;', 'classic'); ?>" />
		</p>
	</div>
 
</form>
 
<?php
	}
}
 
/**
 * 登记初始化方法
 */
add_action('admin_menu', array('ClassicOptions', 'init'));
 
?>

前台处理:

要公告栏在首页上显示, 需要修改一下 index.php, 这个比较简单, 只是通过一些判断语句决定东西要不要显示出来而已. 当然, 你可以进行其他操作, 关键是获取到选项的值, 并对它们进行处理.
其实可以分为两步:
1. 获取选项 (对每个 PHP 文件, 获取一次就行了, 可以在文件顶部执行)
2. 对选项进行处理 (这里判断成立的话就将公告内容显示出来)

1
2
3
4
5
6
7
8
9
10
11
<!-- 获取选项 -->
<?php $options = get_option('classic_options'); ?>
 
 
 
<!-- 如果用户选择显示公告栏, 并且公告栏有内容, 则显示出来 -->
<?php if($options['notice'] && $options['notice_content']) : ?>
	<div id="notice">
		<div class="content"><?php echo($options['notice_content']); ?></div>
	</div>
<?php endif; ?>

演示主题:

下载: classic_with_options

注: 原主题是 WordPress 2.6 的自带主题 classic 1.5, 我对 function.php 和 index.php 两个文件进行了修改. 如果看不出改了那些代码, 请用对比工具查看 (Windows 推荐使用 DF, Linux 推荐 Meld Diff Viewer).

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 主题技巧: 为主题添加管理选项
  1. underone | #1
    2008-08-02 17:28

    不成,太高档了。。看不懂。。。

  2. zwws | #2
    2008-08-02 20:21

    哈。先坐个靠前的位置,然后慢慢学习。

  3. schuen | #3
    2008-08-03 16:12

    学习中

  4. calcifer | #4
    2008-08-04 08:35

    Quote:请用对比工具查看 (Windows 推荐使用 DF, Linux 推荐 Meld Diff Viewer).
    DW就知道,DF是什么?好用吗?

  5. MI Corazón | #5
    2008-08-04 17:40

    mg12;你好,又有事望你帮忙了哦。 “Quote”留言引用你用的是什么插件实现的?谢谢啦 :lol:

  6. mg12 | #6
    2008-08-04 21:59

    @calcifer
    不错, 够轻巧.

    @MI Corazón
    这个不是插件实现的, 是主题自带的功能. Blocks 系列都有.

  7. PlanetaJob | #7
    2008-08-07 08:27

    Спасибо автору.

  8. 锐风 | #8
    2008-08-13 23:41

    正需要这个.. 哈..

  9. Rui Shen | #9
    2008-12-17 15:38

    不错啊,我在我的主题上也用上了,十分强大哈! :roll:

  10. yofox | #10
    2009-03-01 17:08

    不错的文章哦。

  11. M.坏男 | #11
    2009-03-18 16:01

    thanks

  12. bolo | #12
    2009-06-14 09:57

    每次看你的教程都能感受到你思维的精密

  13. 菠菜 | #13
    2009-07-01 11:00

    bolo :
    每次看你的教程都能感受到你思维的精密

    确实很牛

  14. Jutoy | #14
    2009-11-11 19:36

    现在好多收费主题都带这个了呢~很不错

  15. cat | #15
    2010-08-28 10:03

    您好,我下载了一款主题,因为是在wp3多用户使用,超级管理员能看到主题的选项,但是其他成员看不到,想问一下要在哪里修改才可以呢?是哪一句判断呢?
    我参考过一些全部可以显示的主题,却没找到头绪,望指教……

  1. mg12's Blog » 主题技巧: 让主题支持单/多侧边栏切换
    2008-08-23 16:15
  2. 主题技巧: 二级导航菜单 - Moxida网摘
    2008-09-20 21:31
  3. 主题技巧: 滚动导航菜单 - Moxida网摘
    2008-09-20 21:44
  4. Theme: White
    2008-12-01 15:00
  5. 鹏博新主题上线!
    2010-07-18 11:55
  6. 为你的wordpress主题添加选项页 | Inning In Chaos
    2010-07-28 18:13

Twitter Email feed
RSS feed