介绍

采用以区块为先的思维进行设计。在本课中，我们将探讨 WordPress 区块主题的区块组合。学完本课后，你将理解如何以区块为先的思维进行设计，为你的网站创建模块化且可复用的组件。

模块化

在 WordPress 区块主题的世界中，我们需要将思维从传统的页面布局转向更模块化的方法。以区块为先的设计意味着将你的网站分解成更小、可复用的组件，这些组件可以混合搭配以创建多样化的布局。把区块想象成乐高积木。就像你可以用简单的乐高积木搭建复杂的结构一样，你也可以使用基础区块创建复杂的网站设计。这种方法不仅简化了你的设计流程，还增强了整个网站的一致性。

区块

区块让你无需编写一行代码就能创建复杂的设计。区块连接到一个名为 theme.json 的文件，该文件设置了默认样式。如果你在站点编辑器中并选择全局样式，你可以使用可视化控件调整这些默认设置，从而在保持设计一致性的同时维持灵活性。区块还遵循开放网络标准，让你可以在不同平台之间携带它们。此外，区块的结构化特性也使它们与 AI 工具兼容。这为自动化设计建议开启了可能性。

可复用组件

接下来，让我们看看一些你可能创建为模式或可复用组件的典型设计。区块模式或可复用组件是一组区块，你可以将其插入到你的网站中，并用你自己的内容进行自定义。让我们看几个例子。第一，特色项目。这可以是产品亮点、关键博客文章或定价表。设计一次，然后在你的整个网站中使用它。第二是新闻通讯注册。创建一个视觉吸引人的新闻通讯注册表单，可以轻松放置在不同页面上。第三是客户评价。设计一个用于客户引言的区块，可以单独使用或分组使用，或者最后，创建引人注目的行动号召。

区块组合原则

接下来，让我们看看应用区块组合原则，这将帮助你为你的 WordPress 区块主题创建一个连贯且灵活的设计系统。从小处着手，从你的样式书中的基本元素开始。从文本、图像和按钮等基础元素开始。这些构成了你设计系统的基础。然后开始构建。将这些基本元素组合成更复杂的区块。在这个例子中，我正在创建一个媒体和文本模式，然后我会将其保存为不同步模式，然后设计布局。同时，记得考虑响应式设计。设计你的区块，使其在所有屏幕尺寸上都能良好运行。让我们看一个列区块的例子，它允许在移动设备上堆叠。在移动设备上堆叠指的是像图像、文本块或按钮这样的内容元素在移动设备上查看时如何垂直重新排列。然后，你可以预览以检查你的设计在平板和移动设备上的效果。让我们看看这个模式的结构，了解我们使用了哪些区块来构建它。顶部是组区块，即我们的容器区块，然后是列区块。在左列中，我们有一个段落区块、一个标题区块、另一个段落区块，然后是按钮区块或行动号召，而在右列中，我们添加了一个图像区块。

结论

总之，当你采用以区块为先的思维时，你不仅仅是在设计页面，而是在创建一个灵活的组件系统。记住，关键是要以模块化的方式思考，并使用区块和模式为可复用性进行设计。

介绍

在本课中，我们将学习如何将样式手册作为设计指南来使用。课程目标是理解样式手册的目的和功能，并能够浏览和利用样式手册来预览和优化设计选择。

样式手册

要查看样式手册，请前往外观，点击编辑器，然后进入样式。在左侧，我们将看到样式变体和调色板，然后当你点击眼睛图标时，你将能够查看样式手册。WordPress 样式手册是一个强大的工具，它弥合了传统设计实践与 WordPress 基于块的编辑系统之间的差距。你可以把它想象成你的数字风格指南，展示你网站的不同块或组件将如何呈现以及相互交互。

要打开样式，请点击铅笔图标，现在我们将在左侧看到样式手册，在右侧看到全局样式设置。样式手册与 WordPress 的全局样式功能紧密相连，我们将在未来的课程中深入探讨。这些被称为样式部分。目前，重要的是要理解样式手册是预览你在全局样式中做出的设计决策的一种不同方式。当你更新全局样式时，你可以直接在样式手册中查看更改，从而专注于特定块；或者你也可以直接在站点编辑器中查看你在全局样式中做出的更改，从而在模板或页面中看到这些更改。因此，在下一个示例中，我们可以更改网站的背景颜色，并查看它在主页上的显示效果。所以，如果你的网站内容不多，样式手册会很有帮助。例如，即使你还没有包含画廊的文章，你也可以对画廊进行样式设置。

样式手册的组织方式

样式手册分为几个选项卡：首先是文本，在这里你可以预览标题、段落、列表和其他文本元素。然后我们进入媒体，在这里你可以看到图像和其他媒体将如何显示。第三是设计，查看按钮、列和其他布局元素。接下来是小工具，例如日历、最新文章甚至社交图标。最后是主题，包括站点徽标、站点标题、查询循环和特色图像等块。

实际示例

在设计时，你可以使用样式手册来可视化不同元素上的设计选择，确保设计系统的一致性，尝试不同的样式变体，并识别需要改进的区域。那么，让我们来看一些实际示例，了解如何将样式手册用作风格指南并测试你的设计选择。

首先，当你选择样式手册时，你可以测试和预览主题附带的样式变体。或者你可以开始添加自己的样式。所以，我将前往样式手册，选择排版，然后你可以安装或上传自定义字体。我已经添加了两种自定义字体：Frauncis 和 Rubik。现在我们可以更新字体了。所以，我将把文本字体改为 Frauncis，更新行高，然后将标题字体改为 Rubik。然后我们可以立即在样式手册中看到更改，当你保存时，你会看到这些更改是全局性的。接下来，你可以进一步自定义 H1 到 H6 标题。在这个示例中，我将更改所有标题的大小。对于 H3 和 H4，我还会将外观改为浅色。当你更新这些更改时，你可以在左侧的样式手册中预览。当然，你可以对所有单独的块执行此操作。

然后，我将选择媒体，并将图像块的圆角半径更改为 10 像素，这也会应用于画廊块。接下来，我们可以探索颜色。所以，我将前往颜色，点击调色板，然后你会注意到你可以添加自己的自定义调色板。我将添加一些颜色。第一种是深绿色。当我的其他颜色就位后，我将返回元素，更新背景颜色、文本颜色、按钮块的颜色以及标题颜色。然后我们可以预览更改，并进一步自定义块，例如，根据我们的设计需求设置按钮块的样式。在整个过程中，你会不断参考样式手册，以确保所有元素和谐地协同工作。

结论

总之，样式手册是你的视觉指南。用它来实验、优化和完善你的设计。

简介

欢迎来到为设计师准备的 WordPress 快速展示。WordPress 是创意自由的理想平台。无论您是经验丰富的设计师还是刚刚起步，WordPress 都能为您提供将想法变为现实的工具。

WordPress 工具

凭借其强大的块编辑器、丰富的模式库和站点编辑器功能，WordPress 让您无需编写任何代码即可设计出精美的网站。站点编辑器允许您使用块来设计网站的每个方面，从页眉到页脚。全局样式帮助您在整个站点中定义一致的设计。设置颜色、布局和字体，以确保统一的视觉效果。您可以轻松地从 Google Fonts 或任何其他字体库上传网络字体。直观的样式手册让您控制单个块的外观，包括标题和按钮等交互元素。从自定义布局到复杂的排版和动态媒体，您可以创建展示独特风格和愿景的网站。使用可重复的区块或模式，轻松地将设计元素应用到网站的不同区域。

插件和块

通过插件扩展网站的功能。例如，您可以使用插件向网站添加表单、高级图库甚至滑块。您还可以使用网格块创建像这样的独特设计。或者选择一种优先考虑直观且可访问用户体验的简洁现代设计。封面块还允许显示带有叠加文本的图像。它通常用于页眉、横幅或分区分隔线，让您添加媒体和内容的组合，并具有可自定义的样式。查询循环块支持强大的内容分段，为新闻网站、杂志和内容密集型块提供复杂的布局。

结论

WordPress 允许您在制作创新设计和表达创意技能时利用各种块。开始使用这个为超过 40% 的网站提供支持的开源平台进行设计。

一旦您的主题在 WordPress.org 主题目录上线，您可能需要不时更新它。这可能是为了修复漏洞、添加新功能或进行常规改进。

在 WordPress.org 上更新主题有两种方法：上传新的 zip 文件或使用 Subversion (SVN)。

让我们来看看这两种方法。

上传新的 zip 文件

更新主题最直接的方法是将新的 zip 文件上传到 WordPress.org 主题目录。

一旦您对主题文件进行了任何更改，就需要更新 style.css 文件中的版本号。

/*
 * Theme Name: Twenty Twenty-Four
 * Version: 1.2
 */

这很重要，因为它会告诉 WordPress 有新版本的主题可用。

然后，使用您首次提交时所用的方法，为您的主题目录创建一个新的 zip 文件。

最后，浏览到 https://wordpress.org/themes/upload/，并按照相同的流程上传 zip 文件。

使用 Subversion (SVN)

另一种替代 zip 上传的方法是使用 Subversion（也称为 SVN）来更新您的主题。

Subversion 是一种类似于 Git 的版本控制系统，允许您管理代码的更改。

当 WordPress 插件仓库首次创建时，使用 Subversion 允许开发者管理插件和主题的更新。

这主要是因为当时 Git 和 GitHub 还不存在，而 Subversion 是开源开发者使用的默认版本控制软件。

因此，在几年后 WordPress 主题目录推出时，使用相同的系统是合理的。

要使用 Subversion 更新主题，您需要在本地机器上安装 Subversion，然后使用它将更改提交到 WordPress.org 主题目录。

使用 Subversion 的好处之一是，它允许您跟踪主题随时间的变化，并在需要时轻松回滚到以前的版本。

您可以在主题目录中您的主题页面上，在“浏览代码”下找到 Subversion 仓库 URL。

例如，Twenty Twenty-Four 主题的 URL 是：

https://themes.svn.wordpress.org/twentytwentyfour/

macOS 和 Linux

对于 macOS 用户，您可以使用 Homebrew 安装 Subversion。

如果您还没有安装 Homebrew，需要先安装它。

安装 Homebrew 后，在终端中运行以下命令来安装 Subversion：

brew install subversion

Linux 用户可以使用包管理器安装 Subversion。例如，在 Ubuntu 上，您可以运行：

sudo apt install subversion

安装 Subversion 后，您可以使用它从 WordPress.org 检出主题仓库。

在终端中，导航到您要存储主题文件的目录，并运行 svn co（或 checkout）命令：

svn co https://themes.svn.wordpress.org/twentytwentyfour/

这会将主题文件从 Subversion 仓库下载到您的本地机器。

下一步是创建最新版本主题的副本，以生成更新版本。

首先，导航到您的主题目录

cd twentytwentyfour

然后，使用 svn cp（或 copy）命令创建最新版本主题的副本：

svn cp 1.1 1.2

现在，您可以在新目录中对主题文件进行更改。

确保更新 style.css 文件中的版本号以匹配新版本，并更新 readme.txt 中的更新日志。

准备好提交新版本的主题后，您可以运行 svn commit 命令：

svn commit -m "Fix typo on readme.txt"

在提交过程中，系统会要求您输入用户名和密码。这与您登录 WordPress.org 主题目录时使用的用户名和密码相同。

Windows

对于 Windows 用户，您可以下载并安装 TortoiseSVN，它提供了管理 Subversion 仓库的图形界面。

TortoiseSVN 与 Windows 资源管理器集成，因此您可以右键单击文件夹内部，选择 TortoiseSVN -> 检出 选项，将主题文件下载到本地机器。

建议为您的主题文件创建一个专门的文件夹，并将仓库检出到该文件夹中。

它会要求您提供 Subversion 仓库的 URL，您可以在主题目录中的主题页面上找到它。

检出完成后，您可以通过创建新文件夹并复制文件，或复制粘贴现有文件夹并重命名，来创建主题的新版本。

现在，您可以在新目录中对主题文件进行更改。

确保更新 style.css 文件中的版本号以匹配新版本，并更新 readme.txt 中的更新日志。

当你准备好提交主题的新版本时，可以在主文件夹内右键点击，然后选择 TortoiseSVN -> 提交 选项。

这会打开一个对话框，你可以在其中输入提交信息，选择所有要提交的文件，然后点击“确定”来提交更改。

与 macOS 和 Linux 系统一样，在提交过程中系统会要求你输入用户名和密码。这与登录 WordPress.org 主题目录时使用的用户名和密码相同。

成功提交之后

成功提交后，你会收到一封来自 WordPress.org 的电子邮件，确认你的主题新版本已上传。

在 WordPress.org 目录中显示可能需要一些时间，但更新后的版本通常会在几小时内可用。

在向公众发布主题之前，您应该对其进行全面测试，确保其按预期工作。

我们来看看发布主题前需要做的一些事情，包括：

• 在本地开发环境中测试主题。
• 使用主题测试数据确保主题能处理各种内容。
• 用于调试和测试的有用插件。
• 可访问性和性能测试工具。

在本地开发环境中测试主题

学习 WordPress 开发者路径中的所有课程都推荐使用本地开发环境。

不过，也可以使用在线服务器开发块主题，尤其是在使用 Create Block Theme 时。

因此，在本地开发环境中测试主题也是一个好主意。

这样做的好处之一是，您可以启用 WordPress 调试选项，查看主题是否产生任何错误或警告。

如果您还没有本地开发环境，请查看“本地开发环境”课程以了解一些选项。

使用主题测试数据

测试主题的一部分包括确保它能处理各种内容。默认情况下，新的 WordPress 安装只有一个示例页面、文章和评论。

您无需手动创建不同类型的内容，而是可以下载并安装 WordPress 项目的主题测试数据。

这些测试数据包含一组文章、页面和其他内容，可用于测试您的主题。

要安装主题单元测试数据，请按照以下步骤操作：

1. 从 GitHub 仓库下载主题单元测试数据文件，点击下载原始文件按钮，并将文件保存到计算机硬盘。
2. 在 WordPress 管理后台中，转到工具 > 导入。
3. 在 WordPress 部分下，点击立即安装。这将安装 WordPress XML 导入器。
4. 安装完成后，点击运行导入器链接。
5. 点击选择文件按钮，选择之前下载的主题单元测试数据文件。
6. 点击上传文件并导入按钮。
7. 将内容分配给现有用户，或创建一个新用户来分配，并确保勾选下载并导入文件附件复选框。然后点击提交按钮。

导入完成后，您应该会在网站上看到各种内容，包括文章、页面和其他内容类型。

然后，您可以使用这些内容测试主题，确保其正确显示。

用于调试和测试的有用插件

有几个社区插件可以在主题开发过程中帮助您测试和调试主题。

在主题开发过程中，有几个插件可以帮助您发现和修复问题，包括：

• Query Monitor
• Debug Bar
• Log Deprecated Notices

当您准备分发主题时，Theme Check 插件会根据 WordPress 主题审查指南评估您的主题代码。

遵循这些指南是将主题提交到 WordPress 主题目录的要求。

即使您不打算通过主题目录分发主题，这仍然是测试主题结构和代码的良好基线。

跨浏览器测试

为了有效进行块主题的跨浏览器兼容性测试，您需要在所有主流浏览器上测试主题，包括 Firefox、Chrome、Safari 和 Edge。

您还可以使用第三方工具，如 BrowserStack 或 BitBar，在不同浏览器和设备上测试主题。

此外，大多数现代浏览器都提供开发者工具，允许您检查渲染页面的所有内容，包括 JavaScript 错误、网络使用情况和主题性能。

使用浏览器开发者工具还可以启用响应式设计模式，让您在不同设备和屏幕尺寸上测试主题。

可访问性和性能测试工具

确保主题的可访问性是负责任的主题开发的关键方面。

您应努力确保主题符合 WordPress 可访问性指南。这包括键盘导航、屏幕阅读器兼容性以及正确使用 ARIA 角色等方面。

如果您还没有了解过，请查看“主题可访问性”模块，了解更多关于使主题可访问的重要性、常见可访问性问题以及如何避免它们的信息。

您还应该测试主题，确保它没有加载不必要的资源，并且针对性能进行了优化。

要测试这一点，你可以使用 Google Lighthouse 等工具，它可以通过 Chrome 开发者工具、命令行或作为 Node 模块运行。

你也可以将主题安装到真实网站上，并使用 PageSpeed Insights 或 GTmetrix 等工具来测试主题的性能。请确保不仅测试首页，还要测试页面和文章等其他模板。

延伸阅读

有关测试主题的更多信息，包括本课程中提到的所有技巧和工具，请查阅主题开发者手册中“高级主题”下的“测试”页面。

完成主题开发后，你需要将其准备好提交到 WordPress.org 主题仓库。

在本课中，你将学习如何准备主题提交，包括如何测试主题、检查并遵循主题审查指南，以及为主题准备文档。

测试你的主题

在将主题提交到 WordPress.org 主题目录之前，你应该彻底测试它，确保其按预期工作。

这包括测试是否存在任何错误或警告、如何处理不同类型的内容，以及在可访问性和性能方面的表现。

高级主题开发模块中的“测试你的主题”课程详细涵盖了所有这些方面，请务必复习该课程。

针对 WordPress 的下一个版本测试你的主题也很有帮助，以确保其保持兼容性。

为此，你可以安装 WordPress Beta Tester 插件，该插件允许你将网站切换到 WordPress 的最新测试版或候选发布版。

一旦你确信已彻底测试了主题，就可以进入下一步。

主题审查指南

WordPress 主题审查指南是一套要求，在将主题提交到 WordPress.org 主题目录时需要遵守。

这些指南涵盖了广泛的主题，包括：

1. 许可与版权
2. 隐私
3. 可访问性
4. 代码要求
5. 功能与特性
6. 插件
7. 命名、拼写和商标
8. 语言与国际化
9. 文件要求
10. 经典主题要求
11. 块主题要求
12. 主题设置页面和引导
13. 升级销售、信用、链接和垃圾信息
14. 主题作者和主题上传限制

你的下一步是审查主题审查指南中的每一项，并确保你的主题满足所有要求。

如果你已经使用“测试你的主题”课程中提到的工具彻底测试了主题，那么你应该已经解决了主题审查指南涵盖的许多问题。

不过，仍然建议你逐一检查所有项目，并在提交前确认每项都符合要求。

在提交过程中，如果主题根据这些指南包含 3 个或更多不同的问题，可能会被关闭并标记为未批准。

修复问题后可以重新提交主题，但这会延迟流程。

准备文档

准备主题提交的最后一步是创建文档，详细说明主题的功能、自定义选项以及任何独特方面。

主题需要提供最终用户文档，说明任何设计限制或特殊的安装/设置说明。

根据文档的详细程度，将决定你在何处添加这些信息。

虽然你可以将这些信息添加到主题的 readme.txt 文件中，但通常更容易的做法是在专门的主题主页上提供这些信息。

许多主题开发者会在其网站上创建一个页面，提供关于主题的详细信息，包括安装说明、自定义选项以及任何其他相关信息。

然后，他们会使用 style.css 文件中的主题 Theme URI 字段链接到该页面。

此链接将显示在 WordPress.org 主题目录中的主题页面以及 WordPress 管理后台中，用户可以点击它访问主题文档。

结论

一旦你测试了主题、对照主题审查指南进行了检查并准备了文档，你就可以将主题提交到 WordPress.org 主题目录了。

当你将主题提交到 WordPress.org 主题目录时，需要包含一组必需的主题文件。

让我们来看看这些文件是什么以及它们为何重要。

区块主题

在关于主题结构的课程中，你了解到一个有效的区块主题仅需要两个必需文件：style.css 和 index.html 文件。

然而，当你将主题提交到 WordPress.org 主题目录时，还需要额外的文件。

你还需要包含一个 theme.json 文件和一个 readme.txt 文件。

此外，你还需要一个截图文件。

让我们更详细地了解这些文件。

theme.json

theme.json 文件用于定义主题的全局样式和设置。

通常，在主题开发过程中你会创建这个文件，除非你没有特定的全局样式或设置。

即使是“创建区块主题”功能也会为你生成一个 theme.json 文件，其中包含一些默认的全局样式和设置。

如果你没有 theme.json 文件，可以使用此模板在主题根目录中创建一个。

{
    "version": 2,
    "settings": {},
    "styles": {}
}

readme.txt

readme.txt 文件最初是插件必需的，现在插件和主题都使用它来提供更多相关信息。

对于主题而言，readme.txt 中的信息会显示在 WordPress.org 主题目录的主题页面上。

该文件应包含主题的相关信息，例如主题名称、描述、版本号、作者以及其他详细信息。

WordPress 的 readme 文件标准包含了你在 readme.txt 文件中可以使用的信息类型详情。

还有一个 readme 验证器，你可以用它来检查 readme.txt 文件的格式是否正确。

截图

截图文件用于在 WordPress.org 主题目录以及 WordPress 管理区域的主题目录页面中显示主题的预览。

该文件应为 PNG 或 JPG 格式的图片，尺寸不应超过 1200 x 900 像素。

如果你使用“创建区块主题”功能来创建主题，系统会自动生成一个默认的截图文件，但最好将其替换为展示你主题特色的自定义截图。

经典主题

如果你提交的是经典主题，所需的文件略有不同。

正如“经典主题简介”课程中所述，经典主题在 WordPress 网站中运行所需的唯一文件是 style.css 和 index.php 文件。

然而，当将经典主题提交到 WordPress.org 主题目录时，你还需要包含一个 comments.php 文件。

在经典主题中，这个文件包含评论模板，用于在允许评论的地方显示。

与区块主题一样，你还需要包含 readme.txt 文件和截图文件。

延伸阅读

有关必需主题文件的更多信息，你可以参考 WordPress 主题开发者手册中“主题结构”章节的“必需文件”和“可选文件”部分。