WordPress Themes 设计手记(一)
我决定静下心来,好好的写一些东西,最好能把我这一年多来设计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主题结构——模板文件及其调用
传统的网页通常使用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(); ?>
先写这么多吧,下回再续-_-!
参考文献:
This entry is filed under themes, tutorial, Wordpress. You can follow any responses to this entry through RSS 2.0. You can leave a response, or trackback from your own site.
密切关注!
thx 研究一下
做设计好累啊,不过能设计出这么不错的模板,真的是很值得高兴的事情。
会一直关注的~~!!
这样的内容一定要支持的
Unnamed1.13 在IE6上显示不正常,侧边栏显示在底部~~,希望能够修改一下
如果你早一點寫這篇文章,也就不用在網上找得這麼辛苦啦!
我在做標籤雲於archive中時就是不會在那php頁中加語法,所以出來就是有一塊雲!
以前的版本正文和侧边栏都有overflow:hidden的属性,1.13给去掉了,因为有人抱怨侧边栏内容过宽的话会被截断,但去掉改属性的后果便是ie6下超过宽度的内容会使侧边栏跑到底部去。
我觉得firebug也应是firefox上必备的设计工具了,用来查看元素受哪些代码控制时十分方便!用来学习css的编写也很好
[...] WordPress Themes 设计手记(一) at Xu Yiyang 我决定静下心来,好好的写一些东西,最好能把我这一年多来设计WordPress主题的体验记录下来,和大家分享。 [...]
[...] 原文地址:http://xuyiyang.com/2007/03/27/wordpress-theme-design-notes-part1/ [...]
文章深入潜出,条理清晰,本人受益匪浅!谢谢。
我会继续拜读下去,也希望你多多分享你的心得。
[...] WordPress Themes 设计手记(一) [...]
[...] WordPress Themes 设计手记(一) http://xuyiyang.com/2007/03/27/wordpress-theme-design-notes-part1/ [...]
[...] WordPress Themes 設計手記(一) [...]
呵呵,写得好,很容易让人看懂,谢谢
[...] 原文转自:WordPress Themes 设计手记 感觉有收获就保存下来了! [...]
[...] Themes 设计手记 WordPress Themes 设计手记(一) WordPress Themes 设计手记(二) WordPress Themes 设计手记(三) WordPress Themes [...]
代码还可以,不过想要做出漂亮的图片估计要有一定得美工基础!操作ps要有一定得功力!
wp的主题感觉更多是彰显个性的东东!
楼主的这个主题好cool啊!