WordPress 主题开发:从入门到精通(必读)

2018-03-01 11:13:06来源:segmentfault作者:Ayuan人点击

分享

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


为什么要使用 WordPress 主题?

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


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

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

WordPress 主题有很多优点.

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

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

这是一个学习 CSS,HTML,和 PHP 的好机会。
这是一个积累你的 CSS,HTML,PHP 实践经验的的机会。
制作主题的过程中充满创造力。
这非常的有趣(大多数情况下)。
如果你 设计公共主题, 你会感觉非常好,因为你为 WordPress 社区做出了自己的贡献 (增加技术圈内资质)。
在本专栏中能学习到哪些知识?WordPress 的深度使用技巧
WordPress 的主题开发
WordPress 的插件开发
独立制作一个完整的博客
独立制作一个完整的电子商务网站
WordPress 主题模板开发标准

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

使用结构化的、没有错误的PHP和有效的HTML代码。请看 WordPress代码规范。
使用简洁的、有效的CSS。参见 CSS Coding Standards。
遵循设计指南。主题的剖析

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


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


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

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

让我们单独看一下。


主题样式表( style.css )

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


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


/*
Theme Name: Bachelor
Theme URI: http://taper.io/themes/bachelor
Author: Ayuan
Author URI: http://taper.io/
Description: The Bachelor theme for TaperLabs takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: bachelorThis theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

在接下来的文章里,我将从 WordPress 主题文件结构开始,讲解并创建实例来分别讨论函数文件、模板文件、基本模板、自定义页面模板、搜索查询模板、定义模板、模板的引用、插件 API 钩子等的用法及机制。快速简单的入门到了解这一方便简洁的开源 CMS 系统中。

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台