如果我们浏览 WordPress主题目录，大多数主题展示封面图片。 这是大众需求的功能。 封面趋势是真实的，即使在 块主题目录 截图也是如此。
让我们考虑以下示例 二十二十 （经典主题），其中包括 封面模板 可用于在单个帖子和页面中显示，其中帖子的特色图像显示在顶部，横跨浏览器屏幕，下面是帖子标题和其他所需的元数据。 封面模板允许创建从显示内容的传统限制中脱颖而出的内容。
创建封面模板目前需要编写 PHP 代码，如在 二十二十默认主题的封面模板. 如果我们看 template-parts/content-cover.php 文件，它包含 码 用于显示内容时 cover-template 用来。
因此，如果您对 PHP 没有深入的了解，就不可能创建自定义的封面。 对于许多普通的 WordPress 用户来说，唯一的选择就是使用插件，例如 Custom Post Type UI 如中所述 这个短片.
覆盖块主题中的部分
自 WordPress的5.8，主题作者可以使用顶级英雄部分创建自定义模板（如单个帖子、作者、类别等） 块编辑器 封面块并以最少或没有代码捆绑到他们的主题中。
在深入探讨如何在块主题模板中创建顶部大封面部分之前，让我们简要看看这两个块主题 二十二 和 挖鼻孔 由 Rich Tabor 撰写（完整评论 此处).
在幕后，二十二十二实现了一个大标题 添加存储为模式的隐藏图像 ，在 header-dark-large 部分。 而在 Wabi 主题中，单个帖子中的大标题背景颜色是使用 强调背景颜色和 50 像素高度的间隔块 （行：5-9）。 强调色由 assets/js/accent-colors.js 文件中。
许多其他人选择通过使用创建顶盖部分 盖块，它允许用户更改背景颜色并从媒体库添加静态图像或从媒体设备上传 - 无需编写任何代码。 通过这种方法，来自 发布特色图片块 如果您想将帖子特色图像作为单个帖子中的背景图像，则必须手动将其添加到每个帖子中。
带有动态帖子特色图片的封面块
WordPress 6.0 提供了另一个酷 特色图片封面块 功能，允许使用任何帖子或页面的特色图像作为封面块中的背景图像。
在下面的 短片, Automattic 工程师讨论添加特色图像以覆盖块，并举例说明 古细菌 主题：
包括帖子特色图像块的图像块可以使用进一步定制 duotone 上色 theme.json 正如这篇短文中所讨论的 连接点 YouTube 视频（Automattic 的 Anne McCarthy）。
用例示例（Wei, 明亮模式）
如果我们浏览 块主题目录，我们看到它们中的大多数都包含大的封面标题部分。 如果我们深入研究他们的模板文件，他们会使用具有静态图像背景的封面块。
一些最近开发的主题正在使用带有动态帖子特色图像背景的封面块（例如，Archeo、Wei、Frost、Bright Mode 等）。 新功能的简要概述可在 这个简短的 GitHub 视频.
结合动态强调色的特点 挖鼻孔 以封面和后期特色图像块为主题，Rich Tabor 在他的新作品中进一步扩展了他的创造力 卫 主题（提供完整评论 此处) 以显示来自单个帖子的动态封面图像。
在他的魏公告帖中， 丰富的泰伯写道：“幕后， single.html 模板使用了一个利用帖子特色图片的封面块。 然后通过分配给帖子的配色方案应用双色调。 这样，几乎任何图像都会看起来不错”。
如果您想深入了解 Wei 主题的标题封面块并学习如何创建自己的，这里有一个 短片 止 弗兰克·克莱恩 （WP Development Courses）逐步解释它是如何创建的。
类似于魏主题， 布莱恩加德纳 在他最近的作品中还使用了带有帖子特色图像块的封面块 明亮模式 主题以显示出色的内容 鲜艳的色彩.
布赖恩告诉 WPTavern：“他最喜欢的主题是 Cover Block 的使用方式 单页. 它将特色图像拉入 Cover 块，并为阴影和全高选项提供自定义块样式。 […] 我觉得这似乎真的展示了现代 WordPress 的可能性。”
有关更多详细信息，这里是它的 演示网站 和 全面回顾 Brian 的 Bright Mode 主题.
使用块编辑器设计复杂的布局
最近，WordPress 推出了一个新的块编辑器，设计 登陆首页 的网络 下载页面. 这个通告 引起了不同的反应 来自其读者，包括来自 马特·穆伦维格 (Automattic) 评论了设计和发布这样一个“简单页面”的 33 天。 你可以找到 额外的幕后讨论在这里.
作为回应，Pootlepress 的 Jamie Marsland 创建了 这个YouTube视频 他在近 20 分钟内复制了几乎完全相同的主页。
评论Marsland视频， WP Travern 的 Sarah Gooding 写道：“他是块编辑器的高级用户。 他可以快速移动行、列和组，根据需要调整填充和边距，并为每个部分分配相应的设计颜色。 在这一点上，这不是大多数普通 WordPress 用户可以做的事情。”
尽管块编辑器已经走过了漫长的道路，但对于大多数主题开发人员和普通用户来说，使用它来创建和设计复杂的布局仍然存在越来越多的痛点。
为 TT2 Gopher 块添加增强功能
在本节中，我将向您介绍如何向 TT2 Gopher Blocks 主题 我在上一篇文章中提到过。 受我之前描述的主题的封面块的启发，我想在主题中添加三个封面模板（作者、类别和单封面）。
在浏览网站时，我们注意到两种类型的封面标题。 最常见的标题是与站点标题（站点标题和顶部导航）混合到封面块中的封面部分（例如，二十二十，二十二十二，Wei，Wabi，Frost，Bright Mode等）。 我们还发现标题封面部分没有与网站标题混合并位于下方，例如这个 BBC未来 网站。 对于 TT2 Gopher 块主题，我选择了后者。
创建封面页眉图案
首先，让我们使用封面块为作者、单身和其他（类别、标签）模板创建封面标题模式。 然后我们将它们转换成模式（如前所述 以前在这里) 并将相应的标题封面模式调用到模板中。
如果您熟悉使用块编辑器，请使用站点编辑器中的封面块设计您的标题部分，然后将封面标题代码转换为模式。 但是，如果您不熟悉 FSE 编辑器，那么最简单的方法是从 模式目录 在帖子中，进行必要的修改并将其转换为模式。
在我 以前的 CSS 技巧文章，我详细讨论了创建和使用块模式。 以下是我用于创建单个帖子封面标题模式的工作流程的简要概述：
单个帖子封面标题模式
：使用 FSE 界面，让我们创建一个新的空白文件并开始构建块结构，如左侧面板所示。
或者，这可以先在帖子或页面中完成，然后稍后将标记复制并粘贴到模式文件中。
：接下来，要将上述标记转换为模式，首先我们应该将其代码标记复制并粘贴到新的 /patterns/header-single-cover.php 在我们的代码编辑器中。 我们还应该添加所需的模式文件标题标记（例如，标题、slug、类别、插入器等）。
这是整个代码 /patterns/header-single-cover.php 文件：
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
：对于这个演示，我使用了 这张照片来自照片目录 作为填充背景图像，并应用 午夜 双色调颜色。 要动态使用帖子特色图片，我们应该添加 "useFeaturedImage":true 通过替换上面的填充图像链接在封面块中 "dimRatio":50 这样第 10 行应该如下所示：
或者，也可以通过单击更改填充图像 更换 并选择 使用特色图片 选项：
现在，标题封面模式应该在模式插入器面板中可见，以便在模板、帖子和页面中的任何位置使用。
存档封面标题
这篇文章我准备写一个女生。我的灵感来自 这个 WP Tavern 帖子 以及创建作者模板标题的分步演练，我想创建一个类似的封面标题并添加到 TT2 Gopher 主题。
首先，让我们为 author.html 模板也是如此，遵循上述工作流程。 在这种情况下，我通过添加块在一个新的空白页面中创建它（如下面的列表视图所示）：
在封面的背景中，我使用了与单个帖子标题封面相同的图像。
因为我们想在作者块上显示一个简短的作者传记，所以还应该在用户个人资料页面添加一个传记语句，否则会在前端显示一个空白区域。
以下是标记代码 header-author-cover，我们将在下一步中使用模式：
Published by:
将标记转换为 header-author-cover 模式，我们应该添加所需的模式文件头标记，如前所述。 通过编辑 header-author-cover.php 模式，我们可以为标签、分类和其他自定义模板创建类似的标题封面。
header-category-cover.php 我的模式 category.html 模板在 GitHub 上可用.
使用标题封面块创建模板
WordPress的6.0 和最近 古腾堡13.7 将模板创建功能扩展到块编辑器中，从而使许多 WordPress 用户无需深入了解编码即可创建自定义模板。
有关更详细的信息和用例，这里是 Justin Tadlock 的全面定制说明.
块编辑器 允许创建各种类型的模板，包括封面模板。 让我们简要概述一下如何组合 盖块 和 发布特色图片块 有了新的模板 UI，即使没有或没有编码技能，也可以轻松创建各种类型的封面自定义模板。
Gutenberg 13.7 使创建模板变得更加容易。 如何创建块模板 带代码 和 在网站编辑器中 在 主题手册 和 我以前的文章.
带封面的作者模板
顶部（标题部分）标记 author.html 模板如下所示（第 6 行）：
...
...
...
... 这是封面标题的屏幕截图 author.html 和 category.html 模板：
带盖块的单柱
要在我们的单个帖子中显示封面块，我们必须调用 header-cover-single pattern 在标题部分下方（第 3 行）：
....
....
....这是一个屏幕截图，显示了带有标题封面部分的单个帖子的前端视图：
整个 single-cover.html 模板在 GitHub 上可用.
您可以找到有关创建 英雄标题帖子部分 和 使用发布特色图片背景封面块 on WP Tavern 和 全站编辑 网站。
你有它！
有用资源
特色图片封面块
食谱
即使块主题，一般来说，是 受到 WordPress 社区成员的强烈反对， 在我看来， 他们是 WordPress 的未来， 也。 有了块主题，业余主题作者，没有深厚的编码技能和 PHP 和 JavaScript 语言的掌握，现在可以创建具有复杂布局的主题，如本文所述，结合英雄封面部分 模式 和 风格变化.
作为古腾堡的早期用户，我对新的主题工具如 创建块主题 插件和其他允许主题作者直接从块编辑器 UI 实现以下内容而无需编写任何代码的工具：
- （ⅰ） 创建信息图
- (ii) 覆盖主题文件并导出
- (iii) 生成空白或子主题，以及
- (iv) 修改并保存当前主题的风格变化
此外，Gutenberg 插件的最新版本允许启用 流体排版 和 布局对齐 和其他风格控制仅使用 theme.json 没有 JavaScript 和一行 CSS 规则的文件。
感谢您阅读并在下面分享您的评论和想法！
