10 Comments May 7th, 2007 by Xu Yiyang
4.2 后台管理页面
贫僧先来介绍一下今天的主角——Wordpress Theme Toolkit 和 Unnamed 0.4.1:Wordpress Theme Toolkit 是著名 WordPress 达人 Ozh 开发的专用于编写 WordPress 模板后台管理页面的工具(Ozh 开发了很多经典且实用的WordPress插件和工具,施主可以在这里找到更多好玩的东西)。尽管已经有很久没有更新,但经过测试,发布于九个月前的、将该工具性能压榨殆尽的 Unnamed 0.4 至今仍能非常稳定的工作在 WordPress 2.3-Alpha 平台下,足见 Theme Toolkit 的经典程度。
施主们先来看看 Unnamed 0.4 的后台管理页面截图。
对比 Unnamed 1.2 的后台管理页面,施主们可以发现,这九个月来,Unnamed 虽然一直在进步,但其基本框架是在 0.4 时代就定型了的。从Unnamed 0.5 起,贫僧开始自己编写后台页面,代码最多时达到700余行,而 0.4 的后台管理页面只有区区200行代码,简练易读。贫僧认为,对于初学者,Theme Toolkit 提供的方便而强大的开发环境可以让施主事倍功半。
OK,现在我们来介绍 Theme Toolkit 的使用方法。
1. 调用themetoolkit.php
首先,我们利用下面这条语句将所需的themetoolkit.php加入functions.php中:
<?php include(dirname(__FILE__).’/themetoolkit.php’); ?>
然后,我们来看如何在 functions.php 定义模板所需要的功能:
<?php
themetoolkit(
‘mytheme’, array(
‘option1′ => ‘Text for Option One’,
‘option2′ => [...]
10 Comments April 24th, 2007 by Xu Yiyang
题外话:WordPress团队最近干了两件很2的事情,其一是将一个极不成熟的tag系统引入WordPress 2.2。仅从模板开发者的角度来说,该tag系统与UTW的兼容性较差,基本上支持了WordPress内生的tag就等于放弃对UTW的支持(屠杀啊),而该tag系统不过是原分类系统的畸形衍生品,功能上实在不敢恭维。其二是他们又把tag给去掉了,说是要到2.3的时候再推出,这就是对UTW判了死缓。对贫僧个人而言,这意味着刚刚加入对这个破玩艺支持的Unnamed 1.2作废了,搞得贫僧很没有兴致。这些行为实在是太2了,连Blogging Pro也说:
I would rather see the team take their time, delay a release until June with the tagging feature properly implemented and tested, rather than removing it due to potential issues.
OK,让我们进入正题。
四、杂项
4.1 Custom Image Header
Custom Image Header 是WordPress 2.1增加的一个新功能,支持该功能的主题允许用户自定义Header图片。所以今天贫僧来介绍如何让施主们的WordPress主题支持该牛逼闪闪的功能。本文中涉及的相关代码可以在Unnamed Special Edition 的functions.php中找到。
首先,各位施主请看如下几行代码,它们分别定义了header部分的字体颜色、默认背景图片以及图片尺寸:
define(‘HEADER_TEXTCOLOR’,'FFFFFF’);
define(‘HEADER_IMAGE’,'%s/images/bg_header.jpg’);
define(‘HEADER_IMAGE_HEIGHT’,150);
define(‘HEADER_IMAGE_WIDTH’,960);
这段代码告诉我们一个道理:Unnamed SE的header部分字体颜色为白色(FFFFFF),默认背景图片为bg_header.jpg,背景图片尺寸为960*150。
再来看下面这段代码,在这里,函数custom_css()包含了定义主题header样式所需的CSS,它会被输出到模板的头部(如果施主不想在页面头部生成过多代码,可以考虑和Unnamed一样将CSS写入php文件,不过贫僧不推荐这样做,尽管好处大大地,但弊端也很是不少)。
<?php
function custom_css() {
?>
<style type=”text/css”>
#header {
height:<?php echo HEADER_IMAGE_HEIGHT; ?>px;
background:url(<?php header_image() ?>) transparent repeat top [...]
8 Comments April 12th, 2007 by Xu Yiyang
3.2 Index.php
以WordPress默认模板的index.php为例。我们先来看看它的结构:首先,通过<?php get_header(); ?>获得头信息;然后是一个循环体(The Loop,不知这样叫对不对);最后通过<?php get_sidebar(); ?>和<?php get_footer(); ?>加载侧边栏和页脚。
熟悉The Loop的用法能够让你随心所欲的控制文章的输出,因此我们来着重了解一下The Loop:
WordPress使用一个循环体来控制正文内容的显示,文章将按循环体内代码所定义的格式输出到当前页面上。部分模板标签必须在循环体内使用,如每篇文章的标题(the_title()),时间(the_time())和分类(the_category()) 。
简单表示如下:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
…找到相关内容则按格式输出正文…
<?php endwhile; else: ?>
…否则输出错误信息…
<?php endif; ?>
The Loop的用法非常灵活,比如你可以将其和分类标签结合起来以限定某个页面或某一部分只显示某个或几个分类的内容,这就是一个最简单的Asides。有兴趣的自己不妨找找相关插件或模板来看看。我在这里仅举两个简单的例子。比如,如果你想要某一页面只显示分类x(x代表该分类的ID)的内容,你可以这样写:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php if ( in_category(‘x’) ) { ?>
…正文内容…
<?php } else { ?>
…其他内容…
<?php } ? >
<?php endwhile; [...]
9 Comments April 1st, 2007 by Xu Yiyang
三、模板文件解析
首先提一下WordPress的模板标签(Template Tags)。WordPress提供的模板标签十分丰富,你几乎可以利用它们把主题做成任何你想要的样子。了解并掌握重要标签的形式和用法是进行WordPress主题开发的重要环节。WordPress Codex给出了大部分Template Tags的说明,我就不做重复劳动了。
进入正题,我们以WordPress Default 1.6为例,尽可能详细的分析模板文件中所用到的相关代码及技巧。
3.1 Header.php
我们从头开始好了。打开Header.php,在这里我们可以看到不少常用的模板标签,其中<?php language_attributes(); ?>是WordPress 2.1新增加的标签,用于在头部输出“lang=’zh-CN’”这样的语言标记,站点语言可以在后台定义。
在这里,你可以看到<?php bloginfo() ?>是一个被使用多次的模板标签,用于显示一些站点的相关信息,比如标题、网页类型、字符集、样式表链接、Rss链接等等。其用法是:
<?php bloginfo(’show’); ?>
Show是你想要显示的内容,可以是:name、description、url、charset、stylesheet_url等等,具体请见http://codex.wordpress.org/Template_Tags/bloginfo
另外,<title> </title>之间的代码用于输出网页的标题,先看WP默认模板的标题输出:
除了用<?php bloginfo(‘name’); ?>输出Blog的名字之外,该模板还使用了”is_single()”函数来判断当前页面是否是单篇汇整页面,如果是,则输出<?php if ( is_single() ) { ?>…<?php } ?>之间的语句。
这是一个非常常用的技巧,它允许你使用一段代码控制不同页面的输出效果,简便且灵活。除了is_single()之外,常用的还有:is_home()、is_page()、is_paged()、is_archive()、is_search()、is_404()、is_tag()。意思都很好理解,is_paged()就是某个存档的除第一页外的后n页(这个解释很别扭,俗称“上一页”…)。
如果非再要举个例子,那就来一个豪华的,K2的theloop.php。有别于普通WP模板按网页结构和存档性质划分模板文件的方法,K2使用theloop.php来定义全部页面的正文内容输出,主要手段就是通过上面提到的那些函数来判断当前页面的性质以输出相应的内容。尽管原理很简单,但这种处理模板文件的形式大大简化了代码编辑工作,因为你只需要通过一个模板文件中的几行代码就可以改变几乎任何一个页面上的内容。
如果你想要某页面不显示某些内容,只要在is前加上感叹号表示否定即可,例如:
<?php if ( !is_home() ) { ?>…<?php } ?>
最后,在</head>之前,一定会有一个<?php wp_head(); ?>,wp_head()用于获取一些插件或者主题所需的功能,这些功能通常是在后台就定义好的,比如在一些主题和插件里你可以看到add_action(‘wp_head’, ‘函数名’);这样的语句。
大部分主题将导航栏也放在header.php中,就简单提一点:WordPress对当前页定义的CSS Class是current_page_item,而其他页面则是page_item,也就是说,你可以在CSS中定义current_page_item和page_item以区分当前页和其他页面的样式。比如:
li.current_page_item {
…
}
li.page_item {
…
}
wp_list_pages()也是一个很有讲究的模板标签,具体用法参见Codex。
接下来的过几天交完论文终稿再写吧。。。
参考文献:
Template Tags: bloginfo
Hooks: wp_head
The Loop
18 Comments March 27th, 2007 by Xu Yiyang
我决定静下心来,好好的写一些东西,最好能把我这一年多来设计WordPress主题的体验记录下来,和大家分享。
这会是几篇半教程性质的手记,估计内容会很杂,也很难写成体系,所以我打算写到哪算哪。有兴趣的随便看看吧,兴许能找到一两个有用的点子。
今天先扯开发WordPress主题可能用到的工具和资源,并简单介绍一下WordPress主题的结构……我废话又多了,开始吧。
一、开发工具及相关资源
本地WordPress架设:Xampp(WordPress官方也推荐了这一软件组合,方便实用)。
代码:Dreamweaver(我选择它仅仅是出于习惯,你完全可以选择一个更称手的)。
图像:Photoshop、Illustrator、Fireworks之类之类。
版本控制:Google Code,在教育网利用svn往google code上传东西实在是太慢了,不过还是推荐。
浏览器测试:Firefox(当然,少不了Web Developer Toolbar)、Internet Explorer 7、Mutiple IEs(包含可独立运行的IE3——IE6)、Opera、Swift(基于WebKit引擎的浏览器,用于Safari兼容性测试)。
相关站点:
WordPress Codex
WordPress Hooks
WordPress Theme Viewer
二、WordPress主题结构——模板文件及其调用
传统的网页通常使用HTML来控制页面结构,并通过样式表(CSS)来控制页面的表现。WordPress也使用样式表来控制网页的表现,但其页面内容则是由几个模板文件(Template Files)共同构建而成的。其中一些模板文件是全局性的,比如头信息和页脚模块,而有一些则只用于特殊场合。
这些模板文件通常由XHTML和简单的PHP代码构成,只要你有一些基本的网页知识,并且知道什么是“if…else…”,就不用太担心代码问题——当然,掌握一些基本的XHTML、CSS、PHP和Javascript知识,还是大有好处的。在文章中,我会尽量少涉及模板之外的代码,很多东西,不是拿来谈论的,比如网页标准,我们遵循它,使用它,就可以了。
我们习惯性的将网页分解为 “头信息(Header)”、“内容(Content)”、“侧边栏(Sidebar)”、“页脚(Footer)”这几个主要部分,而这也是主要WordPress模板文件划分的依据。通常一个普通的WordPress主题会包含一下几个模板文件:
样式表:style.css
头信息模块:header.php
内容模块:index.php、page.php、single.php、archive.php、search.php、404.php
侧边栏模块:sidebar.php
页脚模块:footer.php
评论模块:comments.php
搜索表单模块:searchform.php
其中,style.css用于定义主题的外观;头信息模块定义了网站的基本信息,比如标题、关键词等等;站点的主要内容使用index.php输出,page.php用于输出分页内容,而single.php则被用于单篇汇整,404模块用于返回站点404错误信息;sidebar.php包含了网站的一些次要内容,比如订阅、分类、链接等等;页脚信息通常会包含站点的版权等相关信息;而其他模块所含内容视情况而定,比如comments.php用于控制评论输出,而searchform.php则包含了搜索表单。当然,WordPress也允许用户调用自己定义的模块。
注意:当archive.php和search.php不存在时,WordPress会自动调用index.php中的内容,因此这两个模板文件已经不是必需的了,在此不作介绍。
在WordPress中,主要的模板文件都有自己专用的调用代码:
style.css:<?php bloginfo(’stylesheet_url’); ?>
header.php:<?php get_header(); ? >
sidebar.php:<?php get_sidebar(); ? >
footer.php:<?php get_footer(); ? >
comments.php:<?php comments_template();? >
而其他辅助模块则可以使用相关语句来调用,比如你要在侧边栏里调用搜索模块,就可以在sidebar.php的相关位置输入:
<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>
该语句也可用于调用你自己创建的模板文件。
举个例子,比如在index.php中,我们需要头信息、正文、侧边栏和页脚信息,那么该模板的结构就是:
<?php get_header(); ?>
…主体内容…
<?php get_sidebar(); ?>
<?php get_footer(); ?>
先写这么多吧,下回再续-_-!
参考文献:
Stepping Into Templates
海豚的WordPress Theme教程 part1