频道栏目
首页 > 程序开发 > Web开发 > PHP教程 > 开源程序 > wordpress > 正文
wordpress主题开发指南
2016-01-07 14:49:52           
收藏   我要投稿

本文介绍如何开发设计你自己的 WordPress 主题。如果你希望了解更多如何安装和应用主题的内容,请参阅应用主题文档。本文的内容不同于应用主题,因为所讨论的是编写代码去构建你自己的主题的技术内容,而非怎样去激活主题或者是哪里可以获得新主题。

为什么要使用 WordPress 主题

WordPress 主题由一系列文件和 CSS 样式表构成,构成了一个美丽的 WordPress 网站。每个主题都是不同的, 这样WordPress用户就可以随时更改 WordPress 网站的外观。

你也许想为自己开发 WordPress 主题,或者制作公开发行的的主题。但是除了这个为什么要自己制作主题呢?

创建自己独特的 WordPress 主题外观. 利用模板, 模板标签, 和 WordPress循环 来产生不同的效果. 为了产生不同的效果,比如在分类页面和搜索结果页面产生个性的效果. 为了迅速从两个主题改变你的博客外观,可以充分利用 Theme or style switcher 这个插件迅速改变外观. 设计 WordPress 主题,这样大家就可以通过网络更好的使用你的作品.

WordPress 主题有很多优点.

WordPress 主题把CSS样式表和模板文件 从系统中独立出来,所以这样升级博客的时候就不会破坏你的主题样式. 允许你自由的定制主题样式. 允许你迅速改变主题. 你甚至都不需要学习HTML,CSS,PHP等,即可拥有一个美观的主题.

为什么要自己制作主题呢?这才是问题的关键.

这是一个学习 CSS,HTML,和PHP的好机会. 这是一个积累你的 CSS,HTML,PHP实践经验的的机会. 制作主题的过程中充满创造力. 这非常的有趣(大多数情况下). 如果你设计公共主题, 你会感觉非常好,因为你为 WordPress 社区做出了自己的贡献。

主题开发标准

WordPress 主题应该按照如下标准开发:

使用结构化的、没有错误的PHP和有效的HTML代码。请看 WordPress编码标准。 使用简洁的、有效的CSS。参见 CSS编码标准。 遵循设计指南 站点设计及布局。

主题的剖析

WordPress主题目录位于 wp-content/themes/。主题的子目录拥有所有样式文件、模板文件、可选的函数文件 (functions.php)、JavaScript 文件、图片等。比如说一个叫做 "test" 的主题就会放在 wp-content/themes/test/目录里。请避免使用数字名字,这会导致无法在主题列表中正常显示出来。

WordPress每一个发行版都会有一个默认的主题。请认真查看默认的主题,这样可能会对制作你自己的主题有帮助。

WordPress 主题除了图片和JavaScript,经常由三种文件构成。

样式表文件 style.css, 控制着页面的外观 函数文件 (functions.php)。 模板文件,它控制着从数据库中调出的数据所呈现的外观。

让我们单独看一下。

主题样式表

CSS文件不仅列出了一些主题的样式设计, style.css 必须 以注释的形式列出主题的详细信息 两个不同的主题是不允许拥有相同的表述的 , 因为这样会导致主题选择出错.如果你通过拷贝一个你已经制作的主题来制作你新的主题,请确保先更改这些头部注释.

下面是样式表头部注释的例子,被称作样式表头注释。比如主题叫做 "Twenty Ten":

/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: the WordPress team
Version: 1.0 
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)

General comments and license statement (optional).
*/

这些位于style.css里的文件是必须要写的,这是用来区分安装的主题.

样式表指南

当创作你的CSS的时候请参考CSS 编码标准 尽可能使用有效地 CSS。作为例外,也可以使用一些前缀,遵循CSS3标准。 尽量减少使用CSS hacks。明显浏览器支持(如IE)是个例外,如果可能的话,将CSS hack文件区分开来或者使用独立的文件。 所有的 HTML 元素应该有样式声明,无论是文章页面还是评论部分。 Tables, captions, images, lists, block quotes,等等。 强烈建议添加打印友好的字体 你能通过使用media="print"属性来包含一个适用于打印的样式表文件,或者在你的主样式表文件中增加一部分专为打印提供的设置。

子主题

最简单的主题可能是子主题,其仅仅包含一个style.css文件,也可以加上一些图片。之所以它能工作是因为它是以另一个主题为基础进行工作的。

更多关于子主题的信息,请看子主题或者由op111写的不错的教材。

函数文件

一个主题可以使用一个函数文件,位于主题的子目录,叫做 functions.php。这个文件就像一个插件, 如果它位于你正在使用的主题里的话, 他在你的主题初始化的时候就会自动加载(后台和前台都一样加载)。对于这个文件的建议:

定义你的模板使用的函数. 启用缩略图功能,如位置,自定义标题和背景,和导航菜单. 设置一个选项菜单,让网站拥有者可以自定义颜色,样式,和你的主题的其他特性.

默认的WordPress的主题包含一个functions.php文件,它定义这些功能很多,所以你可能会把它当做参考.既然functions.php基本上可以作为一个插件,所以函数参考可以让你更多的了解这个函数,以及你可以怎么利用这些函数.

模板文件

模板 是一些PHP文件,他可以输出HTML代码呈献给浏览器,决定着主题的外观.下面让我们来看一下主题的模板.

WordPress允许为你的网站定义不同的模板.他虽然不是必需的,但是这些不同的模板为你的网站锦上添花. 模板是根据模板层次决定的,由一个具体的主题决定.

作为一个主题开发者,你可以自由决定如何定制你的模板.比如说,极端情况下, 你甚至可以仅仅使用一个文件index.php作为模板文件,所有 页面都会使用这个模板.更多的情况是,使用不同的模板文件产生不同的结果,以达到最大定制.

模板文件列表

这里是被WordPress确认的主题文件列表.当然,你的主题可以包含任何样式表,图像或者文件.记住 下面列出的文件对WordPress有特殊的意义-- 点击模板层次 查看具体情况.

style.css 主样式表,这个文件 必须 位于你的主题里面,而且必须在头部注释处写清楚你的主题的信息. rtl.css rtl 样式表。如果网站的阅读方向是自右向左的,他会自动被包含进来。你可以使用 the RTLer 插件来生成这个文件. index.php 主模板.如果你的主题使用自己的模板,index.php 是必须要有的. comments.php 评论模板. front-page.php 首页模板,仅用于开启 静态首页 时。 home.php 主页模板,默认的首页。如果你开启了 静态首页 这是展现最新的文章的模板页面。 single.php 单独页面模板。显示单独的一篇文章时被调用。对于这个以及其他的请求模板,如果模板不存在会使用 index.php。 single-.php 自定义单独页面模板。例如, single-books.php 展示自定义文章类型为 books的文章. 如果文章类型未被设置则使用index.php。 page.php 页面模板. 独立页面调用。 category.php 分类模板。 分类页面调用。 tag.php 标签模板。标签页面调用。 taxonomy.php 术语模板。请求自定义分类法的术语时使用。 author.php 作者模板。作者页面调用。 date.php 日期/时间模板,按时间查询时使用的模板。 archive.php 存档模板。查询分类,作者或日期时使用的模板。需要注意的是,该模板将会分别被category.php, author.php, date.php所覆盖(如果存在的话)。 search.php 搜索结果模板,显示搜索结果时使用的模板。 attachment.php 附件模板,查看单个附件时使用的模板。 image.php 图片附件模板。当在wordpress中查看单个图片时将调用此模板,如果不存在此模板,则调用attachment.php 模板。 404.php 404 错误页面 模板。当WordPress无法查找到匹配查询的日志或页面时,使用404.php文件。

按照模板层次,这些文件在 WordPress 中有特殊的意义,即当对应的 条件标签 返回 true 的时候,他们将在这种情况下代替index.php ,例如,如果当前显示的是单一的一篇博文,那么is_single() 这个函数将返回'true',并且,如果有一个single.php文件存在于当前主题中,该文件模板就将起作用.

基本模板

在最简单的情况下,一个WordPress主题由两个文件构成:

style.css index.php

这些文件都位于主题目录. 这index.php 模板 是非常灵活的.他可以用来包含所有的引用 header, sidebar, footer, content, categories, archives, search, error, 和其它在WordPress产生的文件.

或者,他也可以模块化,使用单独的文件分担工作.如果你没有提供其它的模板文件,WordPress 会使用默认文件.比如说,如果你没有提供comments.php 文件, WordPress会自动使用 wp-comments.php 模板文件 模板层次. (注意: 自3.0起,那些默认的文件已经不能保证都存在或者跟以前的一样。提供你自己的模板文件会更安全。)

典型的模板文件包括:

comments.php footer.php header.php sidebar.php

使用这些模板文件,你可以把这些文件嵌入到index.php 中,最后生成的文件里.

包含header, 使用get_header(). 包含sidebar, 使用 get_sidebar(). 包含 footer, 使用 get_footer(). 包含 search form, 使用 get_search_form().

include 用法:


关于更多的如何利用各种模板,如何产生不同的信息, 请阅读 模板 文档.

基于查询的模板文件

WordPress 可以根据不同的查询类型加载不同的模板。 有两个办法: 根据模板层次命名你的模板文件,或者在循环中使用条件标签(if 语句).

为了使用模板层次, 你需要提供基本的自动覆盖index.php的特定模板文件. 例如, 如果你的主题提供了category.php的模板并且一个分类被查询, category.php将会被加载来替代index.php.如果没有category.php, index.php会被默认使用.

你可以从模板层次中生成更多的模板文件, 例如, category-6.php -- 当生成分类ID为6的页面的时候这个文件将会替代category.php被使用。 想要了解更多该处理过程, 参阅 分类模板.

如果你的主题需要控制的模板文件超过模板层次所提供的,你可以使用条件标签. 条件标签会检查条件是否为true,然后在WordPress循环中,你可以基于这个条件加载特定的模板, 或者在屏幕上输入特定的文本.

例如, 为了在特定的分类文章中生成不同的样式, 代码如下所示:


或者使用查询, 代码如下:

post;
if ( in_category( '9' ) ) {
    get_template_part( 'single2' );
} else {
    get_template_part( 'single1' );
}
?>

在任意一个例子中, 示例代码将会基于特定分类下显示的文章调用不同的模板文件. 查询条件并不受限于分类, 可以参阅 条件标签 来查看更多。

定义模板

可以使用WordPress插件系统来定义更多基于自定义查询条件的模板. 可以使用template_redirect action hook来实现更高级的特性. 更多关于创建插件的信息可以参阅 插件 API 参考.

引入模板文件

为了加载其他的模板 (除了header, sidebar, footer, 这些已经通过get_header()命令预定义引入) 到一个模板, 你可以使用get_template_part(). 这可以使得主题复用代码片段更加便捷.

从模板中引用文件

在同一个主题中引用其他文件, 避免硬编码URIs和文件路径. 使用bloginfo()替换引用URIs和文件路径 : 参阅 从模板中引入文件.

注意在样式表中使用的URIs会相对于样式所在的目录, 而并不是引用样式的页面.例如, 如果你在主题中引入images/ 目录, 你只需要在CSS中指定相关的目录即可:

h1 {
    background-image: url(images/my-background.jpg);
}

插件 API 钩子

开发主题的时候,需要注意的是你的主题最好能和用户可能安装的任何插件共存。插件可以通过“动作钩子(Action Hooks, 查看 插件 API)”为wordpress增加功能。

大部分动作钩子存在于wp的php核心中,所以你的主题不需要任何多余的特殊标签来让它可以正常运转。但是少数的动作钩子需要在你的主题中做特殊处理,以使插件能够将头,尾,侧边栏等信息输出到页面中。如下是你需要包含到主题 中的动作钩子列表:

wp_head() 放在标签之内,在 header.php文件中. 大部分插件常在这里导入javascript文件。 wp_footer() 在footer.php,在标签之前 . 使用举例:一些插件会在这里插入要在文档最后执行的PHP代码。更常见的用法是插入网页静态代码,比如Google Analytics。 wp_meta() 通常位于主题菜单或者侧边栏中的
  •  
  • 之间; sidebar.php模板.示例插件使用: 包含广告或标签云. comment_form() 在comments.php文件中位于评论表单关闭标签()之前. 示例插件使用: 显示评论预览.在 WordPress 3.0之中,你应该使用默认的评论表单, 参阅 comment_form().

    在实际使用中, 你可以查看这些在默认主题模板中引入的插件钩子.


点击复制链接 与好友分享!回本站首页
相关TAG标签 开发指南 主题
上一篇:wordpress的PHP函数参考大全
下一篇:WordPress安装过程图文教程
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站