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 代码,先用区块编辑器搭出样子,再逐步深入。