WordPress 主题开发核心概念详解
如果你刚开始接触 WordPress 主题开发,面对各种文件、术语可能会有点懵。别担心,这很正常。这篇文章就是帮你理清头绪的。
WordPress 主题开发现在主要分两条路:经典主题和区块主题。经典主题是我们熟悉的 PHP 模板方式,灵活但需要一定的编码基础。而区块主题是 WordPress 5.9 之后的新方向,大的特点是可以直接用可视化编辑器修改网站的任何部分——包括页眉、页脚这些以前只能靠写代码才能动的地方。
新手入门,我建议从区块主题开始。不是说经典主题过时了,而是区块主题更符合未来的趋势,对新手也友好得多。你不需要一开始就写 PHP,先把 theme.json 和模板文件的结构搞清楚,后面的事情就顺理成章了。
这篇文章会带你过一遍主题的核心构成:目录结构、那几个关键文件是干什么用的、模板系统怎么运作。不求一次全记住,先有个整体印象就行。
主题的“骨架”:核心文件和目录
所有 WordPress 主题都放在 wp-content/themes/ 目录下,每个主题独占一个文件夹。
不管是哪种主题,都离不开几个核心文件。你可以把它们理解成主题的“骨架”:
style.css:主题的“身份证”和样式表
style.css 是所有主题的必备文件,它有两个作用:
一,声明主题信息。在文件开头,用注释的形式写上主题名称、作者、版本号、描述等。WordPress 就是靠这段注释来识别你的主题,并显示在后台“外观 > 主题”页面里。
二,存放 CSS 样式。经典主题里,几乎所有的样式都写在这里。但在区块主题中,样式主要交给 theme.json 管理,style.css 更多是保留主题信息的作用,样式代码可以留空或者只放少量补充。
一个典型的 style.css 文件头长这样:
css
/* Theme Name: 我的主题 Author: 我的名字 Version: 1.0 Description: 这是我开发的一个WordPress主题 */
functions.php:功能的“开关”
functions.php 是主题的功能扩展文件,主题激活时它就会自动加载。
你可以在这里做很多事情:注册导航菜单、给主题添加特色图片支持、引入 CSS 和 JS 文件等等。
但这里有个重要的原则:functions.php 适合放那些“离开了这个主题就不成立”的功能。如果你的功能换了个主题还想用,那应该做成插件,而不是塞进 functions.php。
举个例子,在经典主题中注册导航菜单:
php
function my_theme_setup() {
register_nav_menus(array(
'primary' => '主菜单',
'footer' => '页脚菜单'
));
}
add_action('after_setup_theme', 'my_theme_setup');
这段代码应该放在 functions.php 里,因为它定义的是这个主题特有的菜单位置。
theme.json:区块主题的“总设计师”
theme.json 是区块主题的核心配置文件,你可以把它理解为整个主题的“总设计师”。
它做的事情主要分两块:
- “设置”:定义设计师想控制的内容,比如颜色、字体大小、间距等。定义好后,用户在编辑器里就只能选这些,不能乱用别的颜色或字体,保证品牌统一。
- “样式”:给默认的样式定调。比如默认背景色是什么、正文用什么字体、标题字号多大等等,都在这里配置。
需要注意的是,theme.json 可以用于区块主题,也可以添加到经典主题中。即使你不打算转向区块主题,引入 theme.json 也能帮你更好地控制编辑器里的样式选项。
一个简单的 theme.json 结构如下:
json
{
"version": 3,
"settings": {
"color": {
"palette": [
{
"slug": "primary",
"color": "#0073aa",
"name": "主色"
}
]
}
},
"styles": {
"color": {
"background": "#ffffff"
}
}
}
模板与模板部件:拼出网站的样子
在区块主题中,网站页面是通过“模板”和“模板部件”拼起来的。
模板(Templates)
模板用来定义某个页面或某类页面的整体布局。templates/ 文件夹里放的就是这些模板文件,它们用 .html 格式保存。
举个例子,page.html 是“页面”的模板,single.html 是“文章”的模板,index.html 是首页模板。当 WordPress 需要显示一个“页面”时,它会找 page.html;如果找不到,就依次往前找 index.html。
模板部件(Template Parts)
模板部件是可以重复使用的页面片段,存放在 parts/ 文件夹里。常见的模板部件就是页眉和页脚。
在模板中引用模板部件非常简单,只需要一行代码:
html
<!-- wp:template-part {"slug":"header"} /-->
这行代码告诉 WordPress:把 parts/header.html 的内容放在这里。
这种设计的好处是:如果你要改页脚信息,只需要改 footer.html 一个文件,所有用到这个页脚的页面都会自动更新。
总结
经典主题和区块主题是 WordPress 主题开发的两条路。经典主题用 PHP 模板,灵活但需要编程基础;区块主题用可视化编辑器和配置文件,更直观,是未来的方向。
主题的核心文件各司其职:
style.css是主题的“身份证”,告诉 WordPress 你是谁functions.php是主题的“工具箱”,装各种自定义功能theme.json是区块主题的“总设计师”,统一样式和设置
模板和模板部件是区块主题的拼图:
templates/放完整的页面布局(如首页、文章页)parts/放可复用的片段(如页眉、页脚)
对于新手,从理解 theme.json 和模板结构开始是的路径。你不需要一上来就写复杂的 PHP 代码,先用区块编辑器搭出样子,再逐步深入。