为 WordPress 主题添加管理选项

Aug 2nd, 2008 Add Comment

过去一年, 我先后发布了 Elegant Box 和 Block 两个 WordPress 主题. 对于主题的制作虽不如老手, 但在完善的过程中对主题灵活性的要求却是体会颇深. 用户对界面的要求是各不相同的, 一个主题做下来就一个样是不能满足用户的. 他们会改你的主题 (烧刻的 Feed 地址也得改上去吧), 并向你提出各种问题直到你应接不暇.

对用户来说, 页面上的一些东西可能会常变的, 比如公告. 作为主题制作者应该考虑到这样的一些问题并灵活处理, 以免用户频繁的修改代码. 为此, 我们可以为主题添加一些管理选项, 用户可以在后台通过修改这些选项的值令主题有不一样的表现.

WordPress 主题的管理选项标签页

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

后台处理

首先, 我们要修改 function.php, 主要的处理工作都在这个文件里面, 如果主题没有这个文件, 就创建一个吧. (没有 function.php 说明主题不支持 Widget, 可不是一个好习惯哦, 还是赶紧新建一个吧, 想让主题支持 Widget 可以看看这里: 让主题支持 Widget)

我的处理包括 3 大块: 获取选项, 初始化, 标签页操作界面. 这里只创建一个公告栏, 包括两个选项 (是否显示公告栏和公告栏内容). 如果要添加更多选项, 也只需要代码中 3 个 TODO 的位置上追加一些代码而已. 当然, 你还需要改一下选项名称, 将 Classic 和 classic 全部之换掉.

<?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. 对选项进行处理 (这里判断成立的话就将公告内容显示出来)
<!-- 获取选项 -->
<?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 协议进行授权. 转载请注明转自: 为 WordPress 主题添加管理选项

  1. http://0.gravatar.com/avatar/4c18fcc535fb41c92661a15d8f4df02e?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    用这个做了个微言,就是有点看不懂啊

  2. http://1.gravatar.com/avatar/f50ba9ad7cdc9958de06a1f9589f34ba?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    非常经典、简练、轻巧、细致的教程。
    看完后就知道怎么做了。

  3. http://0.gravatar.com/avatar/0939bfc7fcb075a3d061d2065d161630?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    偶,还是有点不懂,有点复杂。

  4. http://1.gravatar.com/avatar/f07cc0a8eba80fd0de00933accc4b2a4?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    看着有点懵....

  5. http://0.gravatar.com/avatar/e90d28227f224a7ac54f33dffb52d799?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    最近也在学做主题,可以在你这学下啦

  6. http://1.gravatar.com/avatar/bc358b3fce307cdd3679682e095fb269?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G
  7. http://0.gravatar.com/avatar/cad94b365d9cf34dd0efd1aa2203c594?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    谢谢了,刚才在老外的网站看到一个很例子,搞的我头晕。

  8. http://0.gravatar.com/avatar/25b72286083d5fc406cc16818318d264?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    看了一下,自愧不如,看来得多努力加把劲呀。

  9. http://1.gravatar.com/avatar/50fe72838ea855eaecef21ad44b7fcc6?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

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

  10. http://1.gravatar.com/avatar/78b0fd25b4aadfa50d9dde0ba2cc5d50?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

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

  11. http://1.gravatar.com/avatar/53a88541f1e66d006de2767d47114aed?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

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

    确实很牛

  12. http://0.gravatar.com/avatar/6f6612e7a9c4a07411398b0674945358?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

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

  13. http://1.gravatar.com/avatar/98eba59253334dcc5848b41c13d6f6ad?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G
  14. http://0.gravatar.com/avatar/efa7d8d9f85c7bb772042d827aa54c5d?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    不错的文章哦。

  15. http://0.gravatar.com/avatar/68d948b7e2e6a0fbd1711d033cb031c5?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

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

  16. http://1.gravatar.com/avatar/7060dfb9a4706f749898fb7b915aa5da?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    正需要这个.. 哈..

  17. http://1.gravatar.com/avatar/d21108390200afa5c4ba0eedd0c91044?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

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

  18. http://0.gravatar.com/avatar/490cf262668eebb0f0f1a50d9d48d702?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

    @calcifer
    不错, 够轻巧.

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

  19. http://0.gravatar.com/avatar/ee4b45a6811905edbee4626db0b7e3d1?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

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

  20. http://0.gravatar.com/avatar/cab963ed5a8f34ea97a0769184715808?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

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

  21. http://1.gravatar.com/avatar/7c9412d8d9386b950a3ebfe8bfedc053?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G
  22. http://1.gravatar.com/avatar/bca4d64891bb457b13007c04e77fee19?s=32&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

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

  23. http://0.gravatar.com/avatar/e8f87528ed0a0eaba60009f8580df401?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G

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

  1. Loading...