WordPress 主题开发：为新手准备的页面与模板入门模式

发布于 作者:

WordPress 区块编辑器功能强大，但并非所有用户都喜欢从零开始拖拽搭建页面。作为主题开发者，应该为用户提供一些“捷径”。WordPress 的入门模式（Starter Patterns）正是为此而生——它允许开发者预置设计好的布局，用户只需一键导入，然后稍作修改即可。本文将用通俗的语言和具体的代码示例，带你了解页面入门模式与模板入门模式的创建方法，帮助你在主题中为用户提供“开箱即用”的建站体验。

对于刚开始接触 WordPress 主题开发的朋友来说，首先要明白：主题是网站的“皮肤”和“骨架”，它决定了网站长什么样，以及内容如何展示给访客。

但在实际使用中，很多用户（尤其是非技术人员）面对空白编辑器往往会感到无所适从。他们不是设计师，也不是代码专家，只是想把内容放上去而已。这时，入门模式（Starter Patterns） 就成了连接开发者和用户的一座桥梁。

说白了，入门模式其实就是一组预先设计好的区块组合（Block Patterns）。只是它们被赋予了特定的“身份”，从而在特定的场景下（比如新建页面时，或者新建模板时）主动弹出来，供用户选择。

WordPress 支持的入门模式主要分为两类：

  1. 页面入门模式（Starter Page Patterns）：服务于传统的内容编辑，落脚点是在“文章内容”里。
  2. 模板入门模式（Starter Template Patterns）：服务于站点编辑，落脚点是在“整站模板”里。

接下来，我们逐一拆解。

一、页面入门模式：帮用户快速搭建页面内容

当你安装并激活默认的“Twenty Twenty-Four”主题后，去后台新建一个页面（页面 → 新建）。你会看到一个弹窗，里面展示了好几种不同的页面布局。用户点一下，这些布局和内容就会被自动插入到编辑器的内容区域中。

这就是页面入门模式在起作用。

如何创建一个页面入门模式？

其实，任何一个普通的区块模式（Pattern）都可以变成“页面入门模式”，关键在于你要在模式文件的文件头（File Header） 中告诉 WordPress：这个模式是用于页面内容的。

假设你在主题的 /patterns/ 文件夹下新建了一个 PHP 文件，比如 my-page-pattern.php。里面需要定义两个关键的头部信息：

  1. Block Types（区块类型）：必须包含 core/post-content。这告诉 WordPress，这个模式里的内容是要插入到文章/页面的“内容区域”里的。
  2. Post Types（文章类型）：指定这个模式对哪种内容类型生效。比如 page（页面）或 post（文章）。

下面是一个简单的代码示例，这是一个名为“关于我们”的页面入门模式：

php

<?php
/**
 * Title: 关于我们 - 经典布局
 * Slug: mytheme/about-us-classic
 * Categories: page
 * Block Types: core/post-content
 * Post Types: page
 * Viewport width: 1280
 */
?>

<!-- 这里开始是区块代码 -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
    <!-- wp:heading {"level":1} -->
    <h1>关于我们的团队</h1>
    <!-- /wp:heading -->

    <!-- wp:paragraph -->
    <p>我们是一群热爱技术和设计的创造者，致力于为用户提供的数字体验。</p>
    <!-- /wp:paragraph -->

    <!-- wp:image {"id":123,"sizeSlug":"large"} -->
    <figure class="wp-block-image size-large">
        <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/team.jpg" alt="团队合影" />
    </figure>
    <!-- /wp:image -->
</div>
<!-- /wp:group -->

注意：页面模式专注于“内容”本身，所以通常不会包含网站的页眉（Header）或页脚（Footer）。那些属于模板的范畴。

二、模板入门模式：为用户预设整页框架

如果说页面模式是帮用户填充“血肉”，那么模板模式就是帮用户搭建“骨架”。

模板入门模式的工作场景在“站点编辑器”（外观 → 编辑器 → 模板）。当用户点击“添加新模板”时，系统会根据模板类型（比如首页、归档页）推荐相应的模式供用户选择。

如何创建一个模板入门模式？

与页面模式不同，模板模式通常包含一个完整页面所需的所有元素，比如页眉、导航菜单、页脚、侧边栏等。

创建它的关键，是定义 Template Types（模板类型） 这个头部字段。

例如，你想为主题创建一个“首页”的模板入门模式，可以在 /patterns/ 目录下创建 home-template.php 文件：

php

<?php
/**
 * Title: 现代企业首页模板
 * Slug: mytheme/modern-home
 * Template Types: front-page, home
 * Viewport width: 1400
 * Inserter: no
 */
?>

<!-- 区块代码开始 -->
<!-- wp:template-part {"slug":"header","theme":"mytheme"} /-->

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
    <!-- wp:cover {"url":"<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/hero-bg.jpg","dimRatio":50} -->
    <div class="wp-block-cover">
        <span class="wp-block-cover__background"></span>
        <div class="wp-block-cover__inner-container">
            <!-- wp:heading {"textAlign":"center","level":1} -->
            <h1 class="has-text-align-center">欢迎来到我们的</h1>
            <!-- /wp:heading -->
        </div>
    </div>
    <!-- /wp:cover -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","theme":"mytheme"} /-->

注意几个关键点：

  • Template Types：这里指定了 front-page（前台首页）和 home（博客首页）。当用户创建这两种模板时，这个模式就会出现在推荐列表里。
  • Inserter: no：这个设置非常实用。它将这个模式隐藏在区块插入器（也就是编辑器左侧的“+”号面板）中。因为模板模式是给整个页面用的，如果让它出现在普通区块选择列表里，可能会让用户感到困惑。

模板类型支持列表

你可以将模板模式绑定到以下任意一种模板类型：
index, home, front-page, singular, single, page, archive, author, category, taxonomy, date, tag, attachment, search, privacy-policy, 404

这些名称对应于 WordPress 的模板层级结构。如果你对它们的具体含义不熟悉，可以去查阅官方文档。

三、在主题模板中复用模式代码

你可能会想：我创建了一个非常棒的首页模板模式，同时我也想直接把它当作我主题的默认首页模板，难道要复制粘贴一遍代码吗？

大可不必。WordPress 允许你在模板文件中直接调用已注册的模式。

假设你的主题目录下有一个 templates/index.html 模板文件，你可以在其中这样写：

html

<!-- wp:pattern {"slug":"mytheme/modern-home"} /-->

就这么一行，WordPress 就会将你之前定义好的 mytheme/modern-home 这个模式的所有区块代码渲染到这个模板里。

这样一来，你既为用户提供了可选模板，又为主题设置了默认模板，代码却没有冗余，一举两得。

总结

总的来说，WordPress 的入门模式机制，本质上是在降低用户的使用门槛。作为主题开发者，你不需要用户掌握任何技术，只需提供几种设计好的选项，就能让他们在几分钟内搭建出一个的页面或网站框架。

核心要点回顾：

  • 页面入门模式：通过 Block Types: core/post-content 和 Post Types: page 来定义，内容插入到编辑器内容区。
  • 模板入门模式：通过 Template Types 来定义，用于站点编辑器，通常包含页眉、页脚等全局部分。
  • 模式复用：在模板文件中使用 <!-- wp:pattern {"slug":"模式名称"} /--> 可以避免重复编码。
  • 细节控制：使用 Inserter: no 可以避免模板模式在区块插入器中“喧宾夺主”。

当你开始将这些模式融入到你的主题开发流程中，你会发现，它不仅提升了用户体验，也让你的主题变得更加完整和。