社区新闻

为你的 WordPress 主题添加起始模式

查看官方原文 ↗ 发布于

如果你曾面对空白屏幕不知从何下手,那么你和你的用户有着同样的困扰。你可以通过起始模式帮助他们迈出第一步,起始模式有两种类型:

  • 页面模式: 这些可选模式在你创建新文章、页面或自定义文章类型条目时出现。(WordPress 6.0 中新增.)
  • 模板模式: 同样可选,当你在站点编辑器中创建新模板时显示。(WordPress 6.2 中新增.)

从未听说过起始模式? 没关系。我们将介绍它们的工作原理以及你为何应该使用它们。

本文将使用默认的 Twenty Twenty-Four 主题来探索这些功能。请安装并激活它以跟随操作。

本教程假设你已经具备在 WordPress 中构建自定义模式的工作知识。如果你是模式的新手,请先跳转到主题手册中的文档。然后回来完成本文。

起始页面模式

页面模式允许你创建自定义模式,当用户通过 WordPress 管理后台的 页面 > 添加新页面 添加新页面时,可以访问这些模式。此时,一个模态窗口会弹出,覆盖屏幕,并向他们展示多种模式选择,如下所示:

覆盖编辑页面屏幕的模态窗口,显示各种页面布局的网格。

现在,用户有很多很好的选项来开始一个新页面,而无需逐个区块地构建每个布局。

顺便说一下,这是 WordPress 项目中的一个既定理念。它的一个好处是,即使是非常有经验的设计师,随着模式页面的发展,也可能会发现一些新的选项。

现在,回到手头的页面:继续并选择“关于”模式。它会自动显示在编辑器的内容区域,供你自定义:

WordPress 页面编辑屏幕,显示一个带有演示文本和旁边图像的“关于”页面。

让我们看看在 Twenty Twenty-Four 主题中,这是如何在幕后实现的。如果你打开相应的模式文件 (patterns/page-about-business.php),你会看到以下代码:

<?php
/**
 * Title: About
 * Slug: twentytwentyfour/page-about-business
 * Categories: page
 * Keywords: starter
 * Block Types: core/post-content
 * Post Types: page, wp_template
 * Viewport width: 1400
 */
?>
<!-- Block code here. -->

注意其中两个重要的文件头值:

  • Block Types: 此模式注册的区块类型列表,以逗号分隔。必须包含 core/post-content
  • Post Types: 此模式应使用的文章类型列表,以逗号分隔。

以这种方式组合这两个字段,可以将它们变成页面模式。具体来说,当 Block Types 包含 core/post-contentPost Types 设置为任何有效的文章类型时,该模式将在你开始创建新文章或页面时作为选项出现。

这适用于任何文章类型,包括自定义文章类型。假设你创建了一个模式,希望可以插入到文章、页面和产品中。你需要在 Post Types 列表中包含每个文章类型,用逗号分隔:

<?php
/**
 * Title: Example
 * Slug: themeslug/your-pattern-slug
 * Block Types: core/post-content
 * Post Types: page, post, product
 */
?>
<!-- Block code here. -->

需要一些灵感吗?Twenty Twenty-Four 主题有很多优秀的页面模式:

  • 首页模式:
    • 博客首页
    • 商业首页
    • 作品集首页图片库
    • 带文章特色图片的作品集首页
  • 新闻通讯着陆页
  • 作品集项目概览
  • RSVP 着陆页

最佳实践是使用一个标准方案来命名你的模式文件,以便长期管理。Twenty Twenty-Four 主题在其页面模式文件前加上 page- 前缀。

起始模板模式

与页面模式类似,模板模式在构建新模板时为用户提供一个起点。区别在于模板模式从站点编辑器工作。

转到 WordPress 管理后台的 外观 > 编辑器 > 模板,点击创建新模板的 + 图标按钮。当模态窗口出现时,选择 首页 选项:

WordPress 站点编辑屏幕,弹出一个模态窗口,要求用户添加新模板。

这将带你进入模板编辑器来创建你的首页模板。屏幕上会出现一个模态窗口,提供几个构建网站首页的选项:

一个模态覆盖层,显示来自 WordPress 站点编辑器内部的四个首页模板选项。

此功能的主要好处与页面模式相同。目标是让用户在创建模板时有一个更顺畅的起点,即使他们几乎没有独立布局页面的经验。与页面模式一样,即使是经验丰富的设计师也可能会发现一些新的、不同的方法。

让我们看看 Twenty Twenty-Four 中一个适用于首页的模板模式。打开 patterns/template-home-blogging.php。文件头如下所示:

<?php
/**
 * Title: Blogging home template
 * Slug: twentytwentyfour/template-home-blogging
 * Template Types: front-page, index, home
 * Viewport width: 1400
 * Inserter: no
 */
?>
<!-- Block code here. -->

再次注意这两个重要字段:

  • Template Types: 此模式注册的模板类型列表,以逗号分隔。
  • Inserter: 是否在插入器中显示该模式。通常,你会将其设置为 no,因为模板模式不打算在文章内容中使用。它也会将该模式从模式库中隐藏。

如你所见,这个特定模式在创建新的首页、索引或主页模板时可用。但 WordPress 有几个默认的模板类型可供选择:

  • index
  • home
  • front-page
  • singular
  • single
  • page
  • archive
  • author
  • category
  • taxonomy
  • date
  • tag
  • attachment
  • search
  • privacy-policy
  • 404

你始终可以从 get_default_block_template_types() 函数参考中获取最新的默认模板类型列表。主题手册中的模板层次结构文档是了解前端在各种场景下显示哪些模板的良好参考。

Twenty Twenty-Four 主题在其模板模式文件前加上 template- 前缀。与页面模式一样,为了长期维护,使用标准命名约定总是一个好主意。

关于重用模式的提示

良好开发的基石之一是代码重用。基本上,如果可以避免,就没有理由在多个地方重新创建相同的区块标记。

WordPress 中的模式只是一个区块 (<!-- wp:pattern /-->)。这意味着你可以在任何解析和渲染区块标记的地方使用一个或多个模式。让我们看看几个良好实践,它们将使管理你的起始模式(以及一般的其他模式)变得更加容易。

在你的起始模式中嵌套“普通”模式

是的,你绝对可以在你的模式中嵌套模式。

再看一下 Twenty Twenty-Four 的 patterns/page-about-business.php 文件。注意到什么了吗?代码中唯一的区块标记是对其他模式的调用!

<?php
/**
 * Title: About
 * Slug: twentytwentyfour/page-about-business
 * Categories: page
 * Keywords: starter
 * Block Types: core/post-content
 * Post Types: page, wp_template
 * Viewport width: 1400
 */
?>

<!-- wp:pattern {"slug":"twentytwentyfour/text-title-left-image-right"} /-->
<!-- wp:pattern {"slug":"twentytwentyfour/text-project-details"} /-->
<!-- wp:pattern {"slug":"twentytwentyfour/cta-services-image-left"} /-->
<!-- wp:pattern {"slug":"twentytwentyfour/team-4-col"} /-->
<!-- wp:pattern {"slug":"clients-section"} /-->
<!-- wp:pattern {"slug":"twentytwentyfour/text-faq"} /-->
<!-- wp:pattern {"slug":"twentytwentyfour/cta-content-image-on-right"} /-->

这是将大型模板分解为部分的好方法。它有两个优点:

  • 你不必重复在其他地方编写的代码,这意味着长期的维护和错误更少。
  • 用户可以在其网站的其他地方将这些其他模式作为独立部分插入。

在你的模板中使用起始模式

如果你已经在构建完整的模板模式,你也应该利用这个嵌套功能,在你主题的许多地方重用你自己的模式——例如,在你的主题模板内部。

你不仅会节省编码时间和击键次数,而且你的主题会自动看起来更加一致和精致,无需额外思考!

打开 Twenty Twenty-Four 主题的 templates/home.html 文件,它代表博客文章索引(博客页面)。实际上只有一行代码调用了现有的模式:

<!-- wp:pattern {"slug":"twentytwentyfour/template-home-business"} /-->

这是 DRY(不要重复自己)原则的一大胜利!

此外,调用现有模式会给你一个即时的超能力:你可以在其中编写 PHP。这打开了其他可能性的世界。但我们将把这个留到另一天的另一篇文章中。

现在,去为你的页面和模板构建一些很酷的起始模式吧。