分类： 用WordPress开发

有时，您可能需要一种方法来修改或扩展现有主题，而无需更改主题的代码。

这就是子主题发挥作用的地方。

在本课中，您将了解什么是子主题、为什么应该使用它们，以及如何创建和使用子主题。

什么是子主题？

子主题是其父主题的扩展。

使用子主题允许您扩展或修改父主题的任何部分，而无需对父主题代码进行任何更改。

为了理解其工作原理，让我们看一个简化的例子。

为什么要使用子主题？

从 WordPress 主题仓库中安装并激活任意主题到您的本地 WordPress 环境中。

在这个例子中，默认主题 Twenty Twenty-Four 已被安装并激活。

假设您想要自定义主题的某些部分，例如页脚的布局和结构。

您更希望站点菜单位于左侧，而站点徽标、标题和标语位于右侧。

您还想更改页脚版权信息，使其引用您的公司名称并更新 URL。

实现此目的的一种方法是在站点编辑器中操作。

您可以找到并编辑页脚模板部分，并进行所需的更改。

将菜单移到左侧，站点徽标和标题移到右侧，并更新页脚版权信息。

但是，如果您想在不同的站点上重复使用这些相同的更改呢？您每次都必须手动在站点编辑器中进行这些更改。

当然，您也可以手动进行更改，方法是导航到页脚模板中使用的 Twenty Twenty-Four 页脚模式，并更改该模式的内容。

但如果主题有更新会发生什么？在主题更新期间，整个主题会被替换为更新版本，因此您对任何特定文件所做的任何更改都将丢失！

这就是子主题发挥作用的地方。

通过创建一个仅包含您所需特定更改的子主题，您可以激活该子主题，更改就会被应用。

如果将来父主题有任何更新（在本例中是 Twenty Twenty-Four），子主题中的修改仍然会被应用，并且更改将保持不变。

创建子主题

为了理解子主题的工作原理，创建一个您的第一个子主题是个好主意。

让我们使用上面的例子来创建您的第一个子主题。

在 wp-content/themes 目录中，创建一个名为 twentytwentyfourchild 的新空主题目录。

在该目录中，创建一个 style.css 文件。然后，将以下主题头部信息添加到该文件中

/**
 * Theme Name: Child theme of Twenty Twenty-Four
 * Template:   twentytwentyfour
 */

现在浏览到 WordPress 管理区域，并导航到主题页面。您应该会看到列出的新子主题。

现在激活该子主题。然后浏览到网站前端。

您会注意到网站看起来和之前完全一样。这是因为所有主题元素都继承自父主题。

子主题的工作原理

所有 WordPress 主题——除非它们特指是子主题——从技术上讲都是父主题。

子主题与父主题略有不同，因为它们在 style.css 文件中有一个特殊的主题头部字段，用于定义它们是哪个父主题的子主题。

这个头部字段是 Template 字段。该字段的值必须与父主题的文件夹名称（或别名）匹配，相对于 wp-content/themes 目录。

这有时也被称为主题的别名。

因此，在这个例子中，这个主题是 Twenty Twenty-Four 的子主题，因为它将 Template 字段定义为 twentytwentyfour。

您现在可以做的就是选择要修改的父主题的特定部分。

例如，如果您只想修改页脚，您可以在子主题目录中创建一个新的 footer.html 文件，位置与父主题中的 footer.html 相对路径相同，然后对子主题的 footer.html 进行所需的更改。

生成子主题页脚的一种方法是在站点编辑器中对页脚模板进行所需的更改。

然后，切换到代码编辑器视图，复制代码，并将其粘贴到子主题的 footer.html 文件中。

激活子主题后，您对子主题中 footer.html 文件所做的更改将被应用，并且页脚将按您期望的方式显示。

值得注意的是，子主题不仅可以扩展父主题的模板，实际上几乎可以扩展父主题的每个部分。通过子主题，你可以扩展模板部分、样式、甚至自定义主题功能。

使用创建块主题功能

虽然可以手动创建子主题，但你也可以使用“创建块主题”插件，基于在站点编辑器中进行的修改来创建子主题。

为此，请激活 Twenty Twenty-Four 主题，并删除本课程前面创建的子主题。

然后，搜索、安装并激活“创建块主题”插件。

接下来，导航到站点编辑器，对页脚模板部分进行相同的修改。

对修改满意后，点击站点编辑器右上角的“创建块主题”图标，打开创建块主题选项。

选择“创建主题”，然后选择“创建子主题”。

为子主题命名，并可选地添加相关主题元数据。

然后点击“创建子主题”。

子主题将被创建，编辑器会重新加载。

如果导航到 WordPress 管理区域的主题页面，你会看到新的子主题已列出，并已安装和激活。

如果浏览前端页面，你会看到对页脚模板部分所做的修改已生效。

最后，如果你查看代码编辑器，会发现子主题文件已创建。

延伸阅读

有关子主题的更多信息，请参阅主题开发者手册中高级主题下的“子主题”页面。你还可以在主题开发者手册核心概念章节的“子主题头部字段”部分，了解更多关于子主题特定头部字段的内容。

随着互联网的发展，用户隐私的保护方式也在不断演变。

在本课中，你将了解主题如何影响用户隐私，以及你可以采取哪些措施来确保你的主题尊重用户隐私。

互联网隐私

世界各地的各种法律法规规定了网站如何收集和使用个人数据。

这些法律要求公司和网站所有者透明地说明他们如何收集、使用和共享个人数据。

同时，它们也赋予个人更多权限和选择权，以决定自己的个人数据如何被收集、使用和共享。

在 4.9.6 版本中，WordPress 引入了多项与隐私相关的功能，主要是为了帮助网站所有者遵守欧盟的《通用数据保护条例》（GDPR）。

WordPress 4.9.6 引入的主要功能包括：设置隐私政策页面的选项、允许通过评论与网站互动的用户选择不捕获其个人信息，以及网站管理员可以更好地处理用户个人信息的工具。

在这些功能中，隐私政策页面和评论数据处理与主题开发者最为相关。

隐私政策页面

隐私政策页面功能允许网站所有者创建一个隐私政策页面，说明其网站如何收集、使用和共享个人数据。在新安装的 WordPress 中，此页面会自动以草稿状态创建。

网站所有者可以编辑并发布该页面，然后在设置 > 隐私下将其配置为隐私页面。

作为主题开发者，你可以通过提供从主题链接到隐私政策页面的方式来帮助网站所有者。

这可以通过在页脚添加隐私政策页面的链接，或在网站的主菜单中添加隐私政策链接来实现。

有几种方法可以向主题添加隐私政策链接。

你可以使用以下 PHP 函数：

• get_privacy_policy_url()：获取隐私政策页面的 URL。
• the_privacy_policy_link()：在适用时显示格式化的隐私政策页面链接。
• get_the_privacy_policy_link()：在适用时返回格式化的隐私政策页面链接。

例如，以下代码会在一个 div 中显示隐私政策链接：

<div class="privacy-policy-link">
    <?php the_privacy_policy_link(); ?>
</div>

目前，在站点编辑器中还没有用于添加隐私政策链接的核心区块。

但是，你可以创建一个包含隐私政策页面链接的自定义模式。

<!-- wp:paragraph -->
<p><a href="<?php echo esc_url( get_privacy_policy_url() ); ?>">隐私政策</a></p>
<!-- /wp:paragraph -->

然后，你可以将此模式包含在主题的可用区块模式中，供网站管理员在需要时添加。

评论数据

WordPress 文章允许访客发表评论。

此功能在区块主题中由评论表单区块处理，在经典主题中由 comment_form() 函数处理。

当没有特定网站账户的访客在文章上发表评论时，他们会被要求提供姓名、电子邮件和网站。

这些信息会以浏览器 cookie 的形式存储在评论者的浏览器中，目的有两个：

1. 如果他们再次在网站上留下评论，其姓名、电子邮件和网站将自动填入相应字段。
2. 如果他们的评论被保留以待审核，他们可以返回该文章并在审核通过前删除评论。

此 cookie 中存储的信息对于网站功能并非必需。因此，用户需要有权选择是否同意存储这些个人信息。

为此，WordPress 会在评论表单下方输出一个复选框，允许评论者选择是否同意将这些数据存储在 cookie 中。

此复选框默认处于未选中状态，因为选择加入是用户必须明确批准的操作。

幸运的是，这个新的复选框字段会自动添加到使用评论表单区块或 comment_form() 函数显示的评论表单中。

然而，作为主题开发者，测试你的主题以确保此复选框在评论表单显示的任何位置都能正确显示并按预期工作，这一点非常重要。

延伸阅读

有关用户隐私以及主题如何影响它的更多信息，请查看主题开发者手册高级主题下的隐私页面。

无障碍测试是主题开发过程中至关重要的一环。

它确保安装了你的主题的网站，无论用户的能力如何，都能被所有人使用。

本课程将向你介绍一些用于测试主题无障碍性的工具和技巧。

测试、修复、重复

尽早并反复进行测试，有助于你在新组件或页面发布前发现潜在的无障碍违规问题。

让我们来看看一些测试主题的方法。

自动化测试

基于 Chromium 的浏览器在开发者工具中内置了 Google Lighthouse。
Lighthouse 也可以作为独立网页和 NPM 包使用。

Firefox 有无障碍检查器，Safari 提供了审核功能。

WebAIM 的 Wave 是一个适用于 Firefox 和基于 Chromium 浏览器的浏览器扩展。

Deque Systems 的 axe 是一套无障碍测试工具：包括浏览器扩展、Figma 插件、VS Code 扩展、代码检查器等。

Pa11y 是一个面向开发者的免费开源替代方案。

WordPress 插件 (1:13)

Sa11y、WP Tota11y 和 Editoria11y 是你可以安装的插件，用于测试 WordPress 网站上的无障碍问题。每个插件在无障碍检查方面的方法略有不同；因此，请全部测试一下，看看哪个适合你的需求。

最后，还有 Accessibility Checker，它可以在文章编辑器和前端工作，显示错误，并提供详细解释（包括相关代码片段）和可能的修复方法。

手动测试

此外，你还可以进行一些手动测试。

1. 尝试仅使用键盘浏览你的主题——不要用鼠标。使用 tab 键在链接、按钮和表单字段之间导航。按 enter 或 space 键激活这些交互元素。
2. 更改配色方案（通过浏览器的开发者工具），以确保在深色模式或高对比度模式下显示良好。
3. 最后，使用你设备内置的语音控制功能或专门的屏幕阅读器软件浏览网站。这是首选——有时也是唯一的方式，因为许多视障人士都使用网络。

结论

将无障碍优先的开发方法与开发过程中正确的测试工具和技巧相结合，将有助于确保你创建的主题能够被网络上的所有人使用。

如果你看过《什么是无障碍，以及为什么它很重要》这节课，你就会知道数字无障碍是一个广义术语，意味着确保尽可能多的人能够使用网络。

这涉及法律和商业层面的影响，但更重要的是，无障碍指南能保证每个人都能获得更好的浏览体验。

提供无障碍主题、插件或网站最简单的方法就是从一开始就考虑它。在规划阶段就将其纳入，并教育同事（和客户）。这样，你不仅能尽早发现错误，实际上还能预防许多错误。

在本课中，你将学习无障碍 HTML 的基础知识，以及如何将它们应用到你的 WordPress 主题中。

基础知识

HTML 既强大又易于访问。

自己试试看：打开你的代码编辑器，创建一个有效的 HTML 页面——正确标记了地标、标题、文本、按钮、链接、表单等。

如果你愿意，可以使用下面的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My website</title>
</head>
<body>

<header>
    <h1>Welcome to My Website</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a>
            <li><a href="#about">About</a>
            <li><a href="#services">Services</a>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

<main>
    <article id="home">
        <h2>Home</h2>
        <p>This is the home section where introductory content can be found.</p>
        <form name="Just a button">
            <button type="button">Click Me!</button>
        </form>
    </article>

    <article id="about">
        <h2>About</h2>
        <p>This section contains information about the website or the person/company behind it.<p><a href="https://example.com">Visit their full profile</a></p>
    </article>

    <article id="services">
        <h2>Services</h2>
        <p>Details about the services offered can be found here.</p>
    </article>

    <article id="contact">
        <h2>Contact</h2>
            <form action="#" method="post" name="contact" autocomplete="on">
                <fieldset>
                    <legend>Let's chat</legend>
                    <div><label for="name">Name:</label></div>
                    <div><input type="text" id="name"></div>
                    <div><label for="email">Email:</label></div>
                    <div><input type="email" id="email"></div>
                    <div><label for="message">Message:</label></div>
                    <div><textarea id="message" rows="4" cols="50" spellcheck="true"></textarea></div>
                    <div><input type="submit" value="Submit"></div>
                </fieldset>
            </form>
        </article>
</main>

<footer>
    <p>© 2024 My Website</p>
</footer>

</body>
</html>

现在，通过在线无障碍检查器（如 Web Accessibility Checker）运行这段代码，你会注意到它检测到零个无障碍问题。

问题通常出现在你添加样式、脚本或媒体资源之后。作为现代 WordPress 主题的开发者，这些正是你会用到的技术——基于 React 的区块、PHP 注入的模板，以及从 theme.json 编译而来的 CSS。

关键在于你在编码和设计时要时刻注意无障碍性。

让我们探讨一些开发者和设计师在创建自定义区块、模板和模板部件时可以采用的技巧和最佳实践。

语义化 HTML

不要用 <div> 元素包裹所有内容，而是利用 HTML 中具有语义意义的元素。

这将为你省去那些为了把轮子重新发明成矩形而采用的变通方法。

地标

地标是一种定义页面结构的方式。它们帮助屏幕阅读器更轻松地浏览内容。

例如，与其只定义一堆带有类的 div：

<div class="header">
    <h1>Welcome to My Website</h1>
</div>

<div class="nav">
    <ul>
        <li><a href="#home">Home</a>
        <li><a href="#about">About</a>
        <li><a href="#services">Services</a>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

你可以为相关部分使用地标。

<header>
    <h1>Welcome to My Website</h1>
</header>

<nav>
    <ul>
        <li><a href="#home">Home</a>
        <li><a href="#about">About</a>
        <li><a href="#services">Services</a>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

如果你在站点编辑器中设计或构建主题，也可以在那里设置地标。

要将组、行和堆叠区块定义为内容分区元素，请选择该区块，打开区块设置，然后展开高级部分。

向下滚动，根据区块的功能和位置，将HTML 元素设置为 header、main、section、article、aside 或 footer。

标题

在模板中添加标题时，始终按正确顺序使用标题，从 H2 开始，依次递减到 H6。

在站点编辑器中，点击文档概览 > 大纲，检查你是否跳过了某个级别，或者一切是否设置正确。

按钮与链接

在设计用户操作时，考虑以下关于使用按钮或链接的要点：

• 如果你希望访客执行某个操作，请使用 button 元素。
• 当你希望他们导航到另一个页面时，请使用 anchor 元素（<a>）。
• 如果链接应该看起来像按钮，例如在落地页上的行动号召按钮，那么就用 CSS 来设置样式。

表单

如果你在主题中设计任何表单，请遵循以下指南：

始终将表单包裹在 form 元素中。

在 input 字段上，始终设置适当的类型和匹配的属性。例如，将输入类型定义为 tel，会在移动设备上显示数字键盘。

<code><input type="tel" name="phone" id="phone" required>

不要依赖占位符文本来告诉用户输入字段的用途，始终提供可访问的标签。

对任何搜索表单使用 search 元素。

在设计登录表单时，你可以使用 autocomplete 属性来帮助密码管理器填写表单。

<code><input type="password" autocomplete="current-password">

默认情况下，大多数浏览器会在元素获得焦点时显示焦点环。

如果你想更改这些焦点环的显示方式，请使用 :focus-visible 伪类，并且不要完全移除焦点环。

颜色

务必创建具有足够对比度的无障碍调色板。

在编辑模板时，当你设置的文本和背景颜色组合未能满足要求时，WordPress 会发出警告。

不要仅使用颜色来传达信息。例如，链接应通过颜色以外的其他方式标记，焦点状态也是如此。如有疑问，请参考默认的 HTML 链接和焦点样式，并遵循它们。

排版

使用相对单位（如 rem）设置合适的字体大小，尽量避免使用 px。

将内容宽度限制在 50 到 70 个字符之间；字符单位或 ch 单位非常适合此用途。

根据字体大小使用适当的行间距。

尊重用户偏好

媒体查询是响应式设计的基石，有助于创造更好的用户体验。

某些媒体查询类型（如 prefers-color-scheme 或 prefers-reduced-motion）明确以无障碍性为驱动，但还有 pointer、hover 或 scripting 等类型，可根据用户设备调整组件的行为。

ARIA 的变通方法

ARIA 是 可访问的富互联网应用程序 框架的缩写，常被引用为一种快速让 HTML 内容对屏幕阅读器更友好的方法。

然而，ARIA 最重要的规则是：只有在绝对必要时才使用它。理想情况下，你应该始终使用 HTML 功能来提供屏幕阅读器所需的语义，以便向用户说明正在发生什么。

误用的 aria 属性会使事情变得更不无障碍，因此除非你无法控制 HTML 或需要处理动态生成的内容，否则请避免使用它们。

有关更多信息，请务必访问 MDN 的 WAI-ARIA 基础知识部分。

总结与进一步阅读

无障碍性是一项永无止境的工作。即使是一个小小的改进，也能为你的网站访客带来巨大变化，而且它没有任何负面影响。它绝不会让他们的体验变得更糟。

要了解更多信息，请访问 W3C 网络无障碍倡议（WAI）的教程部分。

欢迎来到本课程，我们将探讨如何将经典主题转换为混合主题或完整的区块主题。

转换经典主题

开始将经典主题转换为区块主题需要什么？

如果你选择不添加 theme.json（你将在上一课中学到），你需要查看使用 functions.php 文件添加主题支持的各种选项。

在 WordPress 仪表盘中快速说明一下，最终用户在外观设置中无法访问站点编辑器时，就会知道他们正在使用的是经典主题还是混合主题。

混合主题与区块主题

现在让我们看看混合主题和区块主题之间的区别。

首先来看一个经典主题。

这里的经典主题是 Twenty Twenty，如果我们打开一个示例页面，可以看到最终用户可以在排版设置下使用多个区块设置。

他们还可以通过选择自定义颜色或主题提供的颜色之一来更改文本和背景的颜色。

通过点击“插入器”，最终用户可以选择区块、模板和媒体。

在模板下，他们可以访问主题自带的模板。

同样在小工具中，最终用户可以使用区块来构建他们的小工具。

混合主题本质上仍然是经典主题，但主题作者选择为区块模板部分等功能添加主题支持。

转换经典主题的步骤

现在让我们看看将经典主题转换为区块主题的步骤。

第一步是查看设置和样式。

你可以通过简单地在主题中添加 theme.json 来弥合经典主题和区块主题之间的差距。

你可以在本模块的上一课中了解更多相关信息。或者你也可以选择在 functions.php 中为区块添加主题支持。

下一步是查看编辑体验。

WordPress 核心为最终用户提供了许多选项，但这可能会让人不知所措。

我们刚刚看到，即使在模板下，也会向最终用户提供模板目录中可用的模板选项。你可以选择移除这些，只包含你希望最终用户为你的主题使用的模板。

这里的目标是开始减少样式表中的 CSS 数量，转而使用 theme.json。

这里有一篇很棒的博客文章可以启发你。它提供了 15 种方法来策划 WordPress 编辑体验。这篇文章可在 WordPress 开发者博客上找到，它首先介绍了如何使用 theme.json 来实现。但还有很多方法可以通过 JavaScript 或 PHP 来实现。

下一步是开始使用区块编辑器（现在简称为编辑器）来构建你的页面。你还没有访问站点编辑器的权限，因此无法使用站点编辑器开发 HTML 模板，但你可以使用编辑器构建页面。

最后一步是将站点编辑器添加到你的主题中，并开始使用站点编辑器构建所有模板，这基本上意味着你将不再使用 PHP 模板，而是用 HTML 模板替换它们。

你不需要将经典主题转换为区块主题。你可以在混合主题阶段停下来，并根据预算做出决定。

如果你有兴趣将经典主题转换为混合主题，你可能希望首先在 functions.php 中添加对区块模板部分的支持。

请查看 Learn WordPress 上提供的相关教程，了解如何操作。

欢迎来到本课程，我们将探索如何使用自定义 API 为经典主题添加选项。

什么是自定义器？

这里我们查看的是 Twenty Twenty-Four 主题。

当前激活的主题是什么？当我们将鼠标悬停在外观上时，我们看到可以访问站点编辑器。让我们进入主题，然后安装一个经典主题。

点击添加新主题，选择 Twenty Twenty-One 主题。安装并点击启用。

我们看到那里出现了几个新菜单。但是，我们不再看到编辑器选项，因为经典主题无法访问站点编辑器。

现在用户可以点击自定义来打开自定义器。在这里，用户可以进行全站范围的更改，例如更改颜色，并且还有一个深色模式选项。

这就是我们接下来要查看的内容。

使用自定义器

现在让我们看看自定义器在 Twenty Twenty-One 主题中是如何使用的。

当用户点击颜色和深色模式时，他们现在可以选择点击颜色选择器来更改背景颜色。

让我们查看代码，了解这是如何实现的。

如果我们打开 functions.php 文件，我们会看到刚才看到的默认颜色是使用 add_theme_support() 在这里指定的。这里还有编辑器调色板。这样用户就可以从调色板中选择颜色。

让我们再次查看前端，看看这在自定义器中是如何为用户整合的。

在这里，他们点击颜色选择器，然后看到那个调色板。请注意，他们也可以输入十六进制颜色代码，并且可以在这里滚动并选择他们喜欢的颜色。

注册主题选项

让我们看看如何使用自定义器注册主题选项。

这一切都始于 WP_Customize_Manager 类，它将帮助你创建自定义器中的那些控件。请注意下面更多信息下的注释，说明$wp_customize 对象如何作为此类的一个实例使用，并且这是你在主题中看到此类的主要用途。

<?php
// 示例代码：使用 $wp_customize 添加设置和控件
$wp_customize->add_setting( 'example_setting', array(
    'default' => '#000000',
    'sanitize_callback' => 'sanitize_hex_color',
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'example_control', array(
    'label'    => __( '示例颜色', 'textdomain' ),
    'section'  => 'colors',
    'settings' => 'example_setting',
) ) );
?>

这里我们查看的是 Twenty Twenty-One 主题中调用 WP_Customize_Manager 来创建该对象$wp_customize 的类。如果我们向下滚动一点，我们可以看到这个类是如何编写的，以便与我们刚才在 functions.php 文件中看到的内容联系起来。

我们定义了背景颜色，这里有控件注册，并且使用 get_theme_support() 调用调色板，最后我们使用一个数组来构建调色板。

然后，所有内容在底部整合，添加了背景颜色的控件，这覆盖了 WordPress 自带的默认背景颜色控件。

有关更多详细信息，强烈建议开发者研究核心自定义器代码。这是所有包含“customize”一词的核心文件，你可以在 WordPress 安装文件夹 ‘wp-includes/customize’ 中找到它们。

后续步骤

你可以参考 WordPress.org 上提供的主题手册，了解更多关于使用自定义 API 添加主题选项的信息。

欢迎来到本课程，我们将深入探讨 WordPress 用于在页面上输出文章的机制。

循环如何在主题中使用？

这一切都源于使用主题的模板文件在页面中显示文章的需求。

例如，这里我们查看的是一个作品集主题的存档页面模板文件。循环从 WordPress 数据库中提取每篇文章的数据，并将相应的信息插入到每个模板标签的位置，例如文章的标题和摘要。

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_excerpt(); ?>
<?php endwhile; endif; ?>

循环中的任何 HTML 或 PHP 代码都会为每篇文章进行处理。简单来说，循环名副其实。它逐一循环遍历为当前页面检索到的每篇文章，并执行主题中指定的操作。

循环可以显示什么？

现在让我们来看一些循环可以显示的示例。

这里我们查看的是 Twenty Seventeen 主题的演示站点，这是一个经典主题，他们使用循环来显示博客文章。这是一个博客首页，对于每篇文章，我们可以看到元数据、文章标题、特色图像和摘要。

使用循环的其他示例包括在单篇文章中列出评论，以及从自定义文章类型和自定义字段中提取数据，这是我们接下来要探讨的内容。

自定义文章类型和自定义字段

在下一个示例中，我们将查看一个具有自定义文章类型 portfolio 的作品集主题，我们将使用循环来显示作品集文章，并包含一个自定义字段。

那么，让我们开始吧。

这里我们查看的是作品集文章。每篇文章都有一个文章标题、一个项目简介和一个特色图像。

让我们在 WordPress 仪表盘中查看其中一篇文章。

在这篇文章中，右侧我们看到技能和工具的分类，底部我们看到项目简介自定义字段。

现在让我们看看这是如何实现的。

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php if ( has_excerpt() ) : ?>
        <?php the_excerpt(); ?>
    <?php endif; ?>
    <?php if ( get_post_meta( $post->ID, 'catmom_textarea', true ) ) : ?>
        <p><?php echo get_post_meta( $post->ID, 'catmom_textarea', true ); ?></p>
    <?php endif; ?>
    <?php the_post_thumbnail(); ?>
<?php endwhile; endif; ?>

因此，我们通过验证是否存在任何作品集文章来启动循环，如果存在，那么首先显示的是标题，并且使用 the_permalink() 模板标签使 the_title() 可点击，因此它是一个链接。

接下来是一个 if 语句，它验证我们是否有摘要。模板标签 the_excerpt() 用于显示摘要。

接下来是自定义字段，名为 catmom_textarea。我们稍后会看看这是如何实现的，但这里的这个 if 语句验证项目信息是否存在。如果该字段中有数据，它将在此处显示。

最后在底部，我们看到使用 the_post_thumbnail() 模板标签来显示文章的特色图像。

创建了一个插件来创建自定义字段，它实际上被称为元框。这个元框就是项目简介，你可以看到使用 ID，我们得到了 catmom_textarea 字段，我们在刚才查看的 PHP 代码中引用了它。

后续步骤

要了解更多关于循环的信息，请参考 WordPress.org 上提供的主题手册。

欢迎来到本课，我们将深入探讨经典主题是如何构建的。

经典主题与区块主题

经典主题和区块主题有什么区别？

如果你还没有看过，请务必查看《面向开发者的主题简介》课程，你可以在《WordPress 开发者入门学习路径》中找到它。

早在 2018 年 12 月，WordPress 5.0 发布了 Gutenberg，那时我们首次看到了文章区块编辑的概念。现在，快进到 2023 年 8 月，WordPress 6.3 真正起飞，感兴趣的用户开始看到全站编辑的强大功能。

这里我们正在查看当前的默认主题 Twenty Twenty-Four，如果快速浏览一下，我们会发现我们可以管理和创建新模板。我们可以创建模板并管理模板部件。

这一切都得益于全站编辑。

如果我们比较传统的经典主题和区块主题，主要区别在于三个主要类别：文件结构、通过设置进行的最终用户自定义以及样式。

经典主题和区块主题之间的一个显著区别是最终用户如何对其网站进行全站更改。用户界面发生了巨大变化。

这里我们以经典主题 Twenty Twenty-One 为例，左侧是自定义器，用户可以修改颜色，另一个非常经典主题的部分是添加小工具的能力。

有一个术语叫做混合主题。

经典主题本质上是一个正在向完整区块主题过渡的经典主题。因此，经典主题不必是区块主题，也能利用 theme.json 文件提供的某些灵活性。

因此，经典主题有能力为区块编辑器和区块内容提供配置和样式选项，这是通过主题支持来实现的，你可以将这些包含在 functions.php 文件中，或者考虑添加 theme.json。

经典主题文件

现在让我们更仔细地看看经典主题中常见的文件。

这里我们有经典主题 Twenty Twenty-One，你可以看到有 CSS 文件、图片、JavaScript 文件、更多 CSS 文件。这些都在 assets 文件夹中，然后我们有 PHP 函数和 PHP 模板。

组织主题文件

现在让我们看看如何组织你的主题文件。

实际上，在经典主题中，文件结构的组织方式相当灵活。这里我们有一个 Twenty Seventeen 主题组织方式的例子，它和我们刚才看到的 Twenty Twenty-One 主题有一些相似之处。

所以基本上，我们有用 PHP 编写的模板，然后有 CSS 和 JavaScript 文件。

下一步

要了解更多关于经典主题的信息，你可以参考 WordPress.org 上的开发者主题手册，你会在经典主题和主题基础模块中找到许多章节，以便更好地理解经典主题的结构和开发方式。

欢迎来到本课程，我们将深入探讨如何扩展已注册的区块，并创建区块设置的替代版本。

什么是区块变体？

区块变体是一种替代区块，你可以使用区块变体 API 将其添加到主题中。你将使用创建变体时所依据区块的已有属性。

你不需要构建过程，因为你可以选择从 functions.php 中加载自定义的 JavaScript 文件，同时传递一些依赖项。

你可以选择将区块变体放置在插件中或主题文件中。

如果你还没有机会查看《WordPress 初学者开发者学习路径》，请务必查看关于《开发 WordPress 插件》的模块。

区块变体与区块样式的对比

区块变体和区块样式有什么区别？

区块变体和区块样式的主要区别在于，区块样式会向区块应用一个 CSS 类，以便以替代方式进行样式设置。

让我们以 Twenty Twenty-Four 主题为例来看一下。

它们有一个带星号的区块样式。你会看到 CSS 类是 style asterisks。

这可以应用于标题，但这不是段落区块可用的区块样式，仅适用于标题区块。

如果你点击插入器并向下滚动，你会看到区块变体的示例。这些是 WordPress 核心自带的，其中每个嵌入都是一个区块变体。

要查看完整代码，你可以在 GitHub 上查看。

如果你想了解更多关于区块变体和区块样式之间的区别，可以参考一个很棒的在线工作坊。

添加 JavaScript

现在，让我们将 JavaScript 文件添加到你的主题中。

你可以将 JavaScript 文件命名为 block-variations，并将其放置在 assets 下的 JS 子文件夹中。

注册区块变体

现在，让我们注册区块变体。

你可以使用 functions.php 文件，打开你的 PHP，使用 enqueue_block_editor_assets 动作钩子，并使用 wp_enqueue_script 函数。

你在这里看到，block-variations.js 文件被调用，并附带了一个依赖项数组。

<?php
function my_theme_enqueue_block_editor_assets() {
    wp_enqueue_script(
        'my-theme-block-variations',
        get_template_directory_uri() . '/assets/js/block-variations.js',
        array( 'wp-blocks', 'wp-dom-ready', 'wp-i18n' ),
        wp_get_theme()->get( 'Version' ),
        true
    );
}
add_action( 'enqueue_block_editor_assets', 'my_theme_enqueue_block_editor_assets' );
?>

后续步骤

你可以通过参考区块编辑器手册来了解更多关于变体的信息，或者查看主题手册。最后，WordPress.org 的 WordPress 开发者博客上有一篇很棒的博文。