Inning In Chaos » 主题 http://prokuso.com 这里是lifishake同学的blog，主要涉及他所关心的游戏、动漫、笑话以及其他话题。 Wed, 08 Sep 2010 01:21:25 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 为你的wordpress主题添加选项页 http://prokuso.com/2010/07/create-an-options-page-for-your-wordpress-theme.html http://prokuso.com/2010/07/create-an-options-page-for-your-wordpress-theme.html#comments Wed, 28 Jul 2010 10:11:23 +0000 大致 http://prokuso.com/?p=1657 为你的wordpress主题添加选项页

CC(by-nc-sa) Inning In Chaos

准确的说，这篇主要是译作。我在搜索wordpress+主题+选项的时候并没有找到合适的教程。只有Neoease小哥的一篇符合要求。但是他把一堆属性放到表格的同一位置存放，用起来不是很方便。接着换用英文关键字，终于搜到了这个不错的教程。所以翻译一下并结合自己的理解写这一篇。
我很有诚意的！为了写这个俺甚至换了显示代码的插件。

为主题添加一个选项页是降低复杂主题管理难度的最好的方法。但是，能Google到的资料很少所以很多人都放弃了。在设计上一个如此重要的应用却有很少的文档，貌似那些资深开发者们都把这个方法当作祖传秘方私藏了起来。
在这篇文章中我将合并一个选项面板到WP默认主题（WordPress Classic）中，你学到的方法将很容易扩展到自己的工程上。

首先，blabla……（与WP无关），感谢国家。

我们的目标是，没有蛀牙
我们的目标是，在Wordpress的默认主题上方开辟一个区域，用来显示一段欢迎语。这段欢迎语的内容可以在后台的选项页中进行编辑。后台界面是这个样子的：
welcom
如果对加入的选项页的格式不加以控制的话，看起来会非常别扭，所以修改的内容中还包括一部分后台界面的美化。

****后台修改****
我们从修改/wp-content/themes/classic/下的functions.php开始。
为了避免麻烦，在functions.php文件的最前或最后加上下面的代码是最安全的。

首先添加

<?php
$themename = "WordPress Classic"; //改成你主题的名字,可以用中文
$shortname = "wpc";				//你主题名字的缩写,一定不要用中文!
 
$options = array (
 
	array(	"name" => "欢迎语",  
			"type" => "title"),
 
	array(	"type" => "open"),
 
	array(	"name" => "标题",
			"desc" => "输入欢迎语页面的标题.",
			"id" => $shortname."_welcome_title",
			"std" => "",
			"type" => "text"),
 
	array(	"name" => "内容",
			"desc" => "欢迎语的内容.",
            "id" => $shortname."_welcome_message",
            "type" => "textarea"),
 
	array(  "name" => "是否显示?",
			"desc" => "选中此项如果你**不想**显示欢迎语.",
            "id" => $shortname."_welcome_disable",
            "type" => "checkbox",
            "std" => "false"),
	//再有想添加的可以参照这个格式进行
	/*
		array(	"name" => "内容2",
				"desc" => "内容2的内容",
			            "id" => $shortname."_welcom2",
			            "type" => "textarea"),
	*/
	array(	"type" => "close")
 
);

这里是我们创建选项的地方。
我们把每个选项都放到一个数组中，方便在后面把它们组合到一起。每个选项都有一下复用的代码。在每个数组中，我们使用如下参数：
name – 用来显示这个选项的标题（可以是中文）。
desc – 对于这个选项的描述（可以是中文）。
id – 非常重要！ 我们用来识别每个存储数据。 $shortname将与id组合到一起存到数据库中，所以id是不能重复的。 (在我们的例子中,把$shortname设成wpc)。
std – 选项的默认值. 例如对于checkbox类型，可以设成true或者false以决定这个选项初始的时候是否选中。
type – 用来定义选项显示的类别. 像文字、文字输入框、checkbox之类。
首先以title类型作为开始。
‘open’选项才是真正有意义的开始，作用是开始表格的绘制（是的，原作者那个笨蛋为了好看用了table，后悔来不及了已经。）
接下来用一个text做欢迎语选项的标题，之后用一个textarea来存放消息的内容。接下来的checkbox用来决定是否启用这个欢迎语。
最后用’close’跟’open’相对应。

所以，利用这个模板，你可以在open和close之间任意增加或删除选项，所要做的只是照葫芦画瓢写一个array而已。注意id。

后边的部分是一坨Wordpress代码，用来具体实现选项页的做成和功能。不感兴趣的可以跳过。感兴趣的，我也在我能看懂的部分加了中文注释。
如果特别关注的话，会发现我对原英文作者的代码改动了两处。因为原来的作者没考虑到往数据库里存代码（比如adsense或analitics）的情况。
And now for the rest of the code. Most of which is a bunch of WordPress functions to tell it this is an options page, so we wont go over most of it:

function mytheme_add_admin() {
 
    global $themename, $shortname, $options;
 
    if ( $_GET['page'] == basename(__FILE__) ) {
 
        if ( 'save' == $_REQUEST['action'] ) { //save按下时的动作
 
                foreach ($options as $value) {				
					//将内容更新到数据库.译者添加去转义字符命令stripslashes
                    update_option( $value['id'], stripslashes($_REQUEST[ $value['id'] ]) ); 
					}
 
                foreach ($options as $value) {
                    if( isset( $_REQUEST[ $value['id'] ] ) ) {
						//将内容更新到数据库.译者添加去转义字符命令stripslashes
						update_option( $value['id'], stripslashes($_REQUEST[ $value['id'] ]  )); } 
					else { 
						delete_option( $value['id'] ); 
						} 
						}
				//更新标题栏
                header("Location: themes.php?page=functions.php&saved=true");
                die;
 
        } else if( 'reset' == $_REQUEST['action'] ) { //reset按下的动作
 
            foreach ($options as $value) {
                delete_option( $value['id'] ); }
			//更新标题栏
            header("Location: themes.php?page=functions.php&reset=true");
            die;
 
        }
    }
	//调用WP函数add_theme_page.回调函数是mytheme_admin(),显示的名字就是主题名+"Options"Options这几个字可以换成别的.
    add_theme_page($themename." Options", "".$themename." Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');
 
}
 
function mytheme_admin() {
 
    global $themename, $shortname, $options;
	//保存后的提示信息,settings saved.可以替换成中文
    if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings saved.</strong></p></div>';
	//重置后的提示信息,settings reset可以替换成中文
    if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings reset.</strong></p></div>';
 
?>
<div class="wrap">
<!--整个Options页面的标题.完全可以随意发挥.-->
<h2><?php echo $themename; ?> settings</h2>
 
<form method="post">
 
 
 
<?php foreach ($options as $value) { 
 
	switch ( $value['type'] ) {
 
		case "open":
		?>
		<!--open里table开始了.-->
        <table width="100%" border="0" style="background-color:#eef5fb; padding:10px;">
 
 
 
		<?php break;
 
		case "close":
		?>
 
        </table><br />
 
 
		<?php break;
 
		case "title":
		?>
		<table width="100%" border="0" style="background-color:#dceefc; padding:5px 10px;"><tr>
        	<td colspan="2"><h3 style="font-family:Georgia,'Times New Roman',Times,serif;"><?php echo $value['name']; ?></h3></td>
        </tr>
 
 
		<?php break;
 
		case 'text':
		?>
 
        <tr>
            <td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
            <td width="80%"><input style="width:400px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo stripslashes( get_settings( $value['id'] )); } else { echo $value['std']; } ?>" /></td>
        </tr>
 
        <tr>
            <td><small><?php echo $value['desc']; ?></small></td>
        </tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
		<?php 
		break;
 
		case 'textarea':
		?>
        <!--我一直觉得作者用的textarea有点大,可以调小一点儿.-->
        <tr>
            <td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
            <td width="80%"><textarea name="<?php echo $value['id']; ?>" style="width:400px; height:200px;" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?></textarea></td>
 
        </tr>
 
        <tr>
            <td><small><?php echo $value['desc']; ?></small></td>
        </tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
		<?php 
		break;
 
		case 'select':
		?>
		<!--这里还藏了一个select类型可以用.应该是上传用的吧?-->
        <tr>
            <td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
            <td width="80%"><select style="width:240px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"><?php foreach ($value['options'] as $option) { ?><option<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?></select></td>
       </tr>
 
       <tr>
            <td><small><?php echo $value['desc']; ?></small></td>
       </tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
		<?php
        break;
 
		case "checkbox":
		?>
            <tr>
            <td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td>
                <td width="80%"><? if(get_settings($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = ""; } ?>
                        <input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
                        </td>
            </tr>
 
            <tr>
                <td><small><?php echo $value['desc']; ?></small></td>
           </tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;">&nbsp;</td></tr><tr><td colspan="2">&nbsp;</td></tr>
 
        <?php 		break;
 
 
} 
}
?>
 
<!--</table>-->
<!--俩按钮.-->
<p class="submit">
<input name="save" type="submit" value="Save changes" />    
<input type="hidden" name="action" value="save" />
</p>
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
 
<?php
}
//在进入控制面板的时候计入选项页
add_action('admin_menu', 'mytheme_add_admin'); ?>

后台页面就OK了。在后台选中默认主题激活就可以看到选项页了。

****使用选项****
现在我们要做的是让添加的选项能用起来。这次，打开header.php
我们的任务有:

1.从数据库读取选项
2.判断禁用的checkbox功能是不是选上了，如果没有，才进行下一步
3.判断标题是否存在，如果存在就显示
4.否则，显示基本的“Welcom”
5.判断欢迎语是否存在，存在就显示
6.不存在就显示点儿别的
7.checkbox如果选上了，就什么都不显示。

1.读数据库选项

在 header.php 的底部，添加

<?php
global $options;
foreach ($options as $value) {
    if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }
}
?>

上面的代码提取了我们所添加的选项，它们是：

$wpc_welcome_disable

$wpc_welcome_title

$wpc_welcome_message

2. 查看“禁用”选项

<?php
if ($wpc_welcome_disable == "false") { ?>

checkbox选中的时候，$wpc_welcome_disable值就是true，未选中就是false。接下来的动作只有未选中的时候才进行。

3. 查看是否有title并显示

<?php
 
if ($wpc_welcome_title) { ?>
<h4><?php echo $wpc_welcome_title; ?></h4>

用个H4显示欢迎语的标题

4.否则,显示默认标题

<?php } else { ?>
<h4>Welcome!</h4>
<?php } ?>

如果标题没设就显示Welcom

5 & 6. 查看并显示欢迎语的内容

<?php if ($wpc_welcome_message) { ?>
<p><? echo $wpc_welcome_message; ?></p>
<?php } else { ?>
<p>Hello and welcome to our site. We hope you enjoy your stay!</p>
<?php } ?>

跟上一步差不多但是这次用到的是$wpc_welcome_message 。

7. 如果没选中，就什么都不显示

<?php } else { ?>
 
    <!-- You could insert something here which will display when the box IS checked. -->
 
<?php } ?>

虽然不重要，但这几句不能省，不如编不过。

最后。如果你按照上面的步骤一步一步做下来，应该就能学会添加自己的option页了。
下载完整例子代码（备用）

© 以上由lifishake发表在Inning In Chaos, 2010. | 永久链接

本文采用 知识共享署名-非商业性使用-相同方式共享 3.0 Unported许可协议授权

添加到 del.icio.us(美味书摘)

]]> http://prokuso.com/2010/07/create-an-options-page-for-your-wordpress-theme.html/feed 20 庆奥运,换张皮 http://prokuso.com/2008/08/qingaoyunhuanzhangpi.html http://prokuso.com/2008/08/qingaoyunhuanzhangpi.html#comments Tue, 26 Aug 2008 13:58:45 +0000 大致 http://9601.org/lifishake/2008/08/qingaoyunhuanzhangpi.html 庆奥运,换张皮

CC(by-nc-sa) Inning In Chaos

话说这个theme在结婚的时候就打算换了的.但是结婚前不幸换了部门,不能随意上网,结婚之后又是无休止的加班.
奥运期间参考水煮鱼老兄的教程, 尝试自己写主题.本打算完全自给自足的,但是还是忍不住参考了dfmarine因为它的侧边栏java效果实在是太帅了!!
这个主题被我命名为exile,继承了dfMarine.按照CC是应该共享出来的.
可俺的水准现在还很低.还没有弄过w3c验证.本想把所有用到的插件集合到function里的,也没有实现.真有感兴趣的朋友个别留言吧.
再次鸣谢Dezinerfolio和水煮鱼!!

© 以上由lifishake发表在Inning In Chaos, 2008. | 永久链接

本文采用 知识共享署名-非商业性使用-相同方式共享 3.0 Unported许可协议授权

添加到 del.icio.us(美味书摘)

]]> http://prokuso.com/2008/08/qingaoyunhuanzhangpi.html/feed 0 Nokia5610XM的两个小工具 http://prokuso.com/2008/01/nokiz5160xmdelianggexiaogongju.html http://prokuso.com/2008/01/nokiz5160xmdelianggexiaogongju.html#comments Wed, 02 Jan 2008 01:39:19 +0000 大致 http://9601.org/lifishake/?p=1002 Nokia5610XM的两个小工具

CC(by-nc-sa) Inning In Chaos

其实都是N记官方的,但是都不太好找.
第一个是诺基亚PC套件.但是因为5610XM的黑身份性质,导致了官方的套件支持列表里并没有它.但是用起来还是一样的.
这里下载:Nokia_PC_Suite_6_84_10_3_chi_sc_web.exe

第二个是诺基亚S40系列主题编辑器.其实这个东东挺平常的,2.1也有汉化版,但是汉化的组织不地道,强行捆绑了一个流氓插件,还振振有词,看得不爽.该组织倒也没把事情做绝,提供了诺基亚那边的原始下载地址.这个工具其实是N记开发包的一部分,功能还是蛮强大的,但是必须注册用户才能下载.注册虽然免费,但是竟然要填写5页的资料,真不知道这边北欧人怎么想滴.这东东能改的地方是比较多滴.不建议自己白手起家,基于某个主题逐渐修改是比较好的做法.
这里下载:S40_ThemeStudio_2_2_Installer.exe

© 以上由lifishake发表在Inning In Chaos, 2008. | 永久链接

本文采用 知识共享署名-非商业性使用-相同方式共享 3.0 Unported许可协议授权

添加到 del.icio.us(美味书摘)

]]> http://prokuso.com/2008/01/nokiz5160xmdelianggexiaogongju.html/feed 0