如何使用动态帖子功能图像自定义WordPress块主题封面模板

WordPress主题中的动态封面模板：利用特色图片块增强用户体验

许多WordPress主题都采用封面图片作为特色，这是一种广受欢迎的功能。这种趋势在块主题目录的截图中也很明显。

以Twenty Twenty主题为例，它包含一个封面模板，可在单篇文章和页面中使用。文章的特色图片会显示在顶部，横跨整个浏览器屏幕，下方是文章标题和其他元数据。封面模板允许创建与传统内容显示方式不同的内容。

目前，创建封面模板需要编写PHP代码，例如Twenty Twenty默认主题的封面模板。在template-parts/content-cover.php文件中，包含了使用封面模板时显示内容的代码。

对于不精通PHP的普通WordPress用户来说，唯一的选择是使用像Custom Post Type UI这样的插件，如视频所示。

块主题中的封面区块

从WordPress 5.8开始，主题作者可以使用块编辑器的封面块创建一个自定义模板（如单篇文章、作者、分类等），并将其包含在主题中，而无需编写或只需少量代码。

在深入探讨如何在块主题模板中创建大型封面区块之前，让我们简要了解一下Twenty Twenty-Two和Wabi by Rich Tabor这两个块主题。

Twenty Twenty-Two通过在header-dark-large部分添加一个作为模式存储的隐藏图像来实现大型标题。而在Wabi主题中，单篇文章的大标题背景颜色是通过强调背景颜色和一个50px高度的间隔块实现的。强调颜色由assets/js/accent-colors.js文件管理。

许多其他主题选择使用封面块来创建顶部封面区块，这允许用户更改背景颜色并添加静态图像，而无需编写任何代码。通过这种方法，如果希望将文章的特色图片作为单篇文章的背景图片，则必须手动将图片添加到每个单篇文章中。

带有动态文章特色图片的封面块

WordPress 6.0提供了一个很酷的特色图片封面块功能，允许使用任何文章或页面的特色图片作为封面块的背景图片。

在下面的短视频中，Automattic的工程师们讨论了如何将特色图片添加到封面块中，并以Archeo主题为例进行了演示：

包含文章特色图片的图片块可以使用theme.json中的双色调颜色进行进一步自定义。

使用案例（Wei，Bright Mode）

在块主题目录中浏览缩略图图像时，我们会看到大多数图像都包含大型封面标题区块。如果深入研究它们的模板文件，就会发现它们使用了带有静态图像背景的封面块。

一些最近开发的主题使用带有动态文章特色图片背景的封面块（例如，Archeo、Wei、Frost、Bright Mode等）。关于此新功能的简要概述可在GitHub视频中找到。

Rich Tabor结合了Wabi主题的动态强调颜色功能以及封面和文章特色图片块，在他的新Wei主题中进一步扩展了他的创意，以显示来自单篇文章的动态封面图片。

在他的Wei公告文章中，Rich Tabor写道：“在幕后，single.html模板使用的是一个封面块，它利用了文章的特色图片。然后，通过分配给文章的颜色方案应用双色调。这样，几乎任何图像看起来都会很好。”

如果您想更深入地了解Wei主题的标题封面块，并学习如何创建您自己的封面块，这里有一个来自Fränk Klein（WP Development Courses）的短视频，逐步解释了它的创建过程。

与Wei主题类似，Brian Gardner也在他最近的Bright Mode主题中使用了带有文章特色图片块的封面块，以显示引人注目的内容和鲜艳的色彩。

Brian告诉WPTavern：“他最喜欢的主题是封面块在单页上的使用方式。它将特色图片拉入封面块，并提供自定义块样式，用于阴影和全高选项。……我觉得这真正展现了现代WordPress的可能性。”

更多详情，请访问其演示网站和Brian的Bright Mode主题的完整评论。

使用块编辑器设计复杂的布局

最近，WordPress发布了一个新的块编辑器，用于设计登录主页和下载页面。这一公告引起了读者的各种反应，包括Automattic的Matt Mullenweg，他评论了设计和发布这样一个“简单的页面”所花费的33天时间。您可以在此处找到其他幕后讨论。

作为回应，Pootlepress的Jamie Marsland创建了这个YouTube视频，他在近20分钟内重现了一个几乎相同的首页。

WP Travern的Sarah Gooding评论Marsland的视频写道：“他可以说是块编辑器的资深用户。他可以快速地调整行、列和组，根据需要调整填充和边距，并为每个区块分配相应的设计颜色。目前，大多数普通WordPress用户无法做到这一点。”

尽管块编辑器已经取得了长足的进步，但对于大多数主题开发者和普通用户来说，使用它创建和设计复杂的布局仍然存在一些难题。

添加对TT2 Gopher块的增强功能

在本节中，我将引导您了解如何为我在上一篇文章中提到的TT2 Gopher Blocks主题添加增强功能。受前面描述的主题中的封面块的启发，我想为该主题添加三个封面模板（作者、分类和单页封面）。

在浏览网站时，我们会注意到两种类型的封面标题。最常见的标题是封面区块与网站标题（网站标题和顶部导航）融合到封面块中（例如，Twenty Twenty、Twenty Twenty-Two、Wei、Wabi、Frost、Bright Mode等）。我们还会发现标题封面区块没有与网站标题融合，而是位于其正下方，例如BBC Future网站。对于TT2 Gopher Blocks主题，我选择了后者。

创建封面标题模式

首先，让我们使用封面块为作者、单篇文章和其他（分类、标签）模板创建封面标题模式。然后，我们将它们转换为模式，并将相应的标题封面模式调用到模板中。

如果您熟悉块编辑器，请在站点编辑器中使用封面块设计您的标题区块，然后将封面标题代码转换为模式。但是，如果您不熟悉FSE编辑器，那么最简单的方法是从文章中的patterns目录复制模式，进行必要的修改，然后将其转换为模式。

在我的上一篇CSS-Tricks文章中，我详细讨论了创建和使用块模式。以下是创建单篇文章封面标题模式的工作流程概述：

单篇文章封面标题模式

步骤1：使用FSE界面，让我们创建一个新的空白文件，并开始构建左侧面板所示的块结构。

或者，这也可以首先在一个文章或页面中完成，然后将标记复制并粘贴到模式文件中。

步骤2：接下来，要将上述标记转换为模式，我们首先应该复制其代码标记并粘贴到代码编辑器中的新/patterns/header-single-cover.php文件中。我们还应该添加所需的模式文件标题标记（例如，标题、slug、类别、插入器等）。

以下是/patterns/header-single-cover.php文件的完整代码：

<?php /**
     * Title: Header cover single
     * Slug: tt2gopher/header-cover-single
     * Categories: tt2gopher-header
     * Block Types: core/template-part/header
     * inserter: yes
     */
?>
<div style="margin-top:0px;margin-bottom:0px;min-height:50vh">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="" data-object-fit="cover" data-object-position="40% 37%"   style="max-width:90%">
    <div>
        <div>
            <div>


                <p>|</p>


            </div>


        </div>
    </div>
</div>

步骤3：对于此演示，我使用了photos目录中的此图像作为填充背景图像，并应用了Midnight双色调颜色。为了动态使用文章特色图片，我们应该通过替换上述填充图像链接在dimRatio:50之前添加"useFeaturedImage":true，以便第10行看起来如下所示：

<code></code>

或者，也可以通过单击替换并选择使用特色图片选项来更改填充图像：

现在，标题封面模式应该在模式插入器面板中可见，可以在模板、文章和页面中的任何位置使用。

存档封面标题

受这篇WP Tavern文章和创建作者模板标题的分步演练的启发，我想创建一个类似的封面标题并添加到TT2 Gopher主题中。

首先，让我们为author.html模板创建存档封面标题模式，遵循上述工作流程。在这种情况下，我通过添加块（如下面的列表视图所示）在一个新的空白页面中创建它：

在封面的背景中，我使用了单篇文章标题封面中使用的相同图像。

因为我们想在作者块中显示简短的作者简介，所以应该在用户个人资料页面中添加一份传记声明，否则前端将显示空白空间。

以下是我们将用作模式的header-author-cover的标记代码：

<?php /**
     * Title: Header cover single
     * Slug: tt2gopher/header-cover-single
     * Categories: tt2gopher-header
     * Block Types: core/template-part/header
     * inserter: yes
     */
?>
<div style="margin-top:0px;margin-bottom:0px;min-height:50vh">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="" data-object-fit="cover" data-object-position="40% 37%"   style="max-width:90%">
    <div>
        <div>
            <div>


                <p>|</p>


            </div>


        </div>
    </div>
</div>

要将标记转换为header-author-cover模式，我们应该添加前面描述的必需模式文件标题标记。通过编辑header-author-cover.php模式，我们可以为标签、分类法和其他自定义模板创建类似的封面标题。

header-category-cover.php模式在我的category.html模板中可在GitHub上找到。

使用封面块创建模板

WordPress 6.0和最近的Gutenberg 13.7将模板创建功能扩展到了块编辑器中，因此即使没有深入的编码知识，许多WordPress用户现在也可以创建他们自定义的模板。

有关更多详细信息和用例，请参阅Justin Tadlock的全面自定义说明。

块编辑器允许创建各种类型的模板，包括封面模板。让我们简要概述一下如何将封面块和文章特色图片块与新的模板UI结合起来，即使没有或只有少量编码技能，也可以轻松创建各种类型的封面自定义模板。

使用Gutenberg 13.7，创建模板变得容易得多。如何在代码中和站点编辑器中创建块模板，在主题手册和我的上一篇文章中都有描述。

带有封面块的作者模板

author.html模板的顶部（标题区块）标记如下所示（第6行）：

<code></code>

以下是author.html和category.html模板的封面标题截图：

这两个模板的完整代码可在GitHub上找到。

带有封面块的单篇文章

要在单篇文章中显示封面块，我们必须在标题区块下方调用header-cover-single模式（第3行）：

<code><div style="min-height:200px">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159750414.jpeg?x-oss-process=image/resize,p_40" class="lazy" alt="" data-object-fit="cover" data-object-position="50% 75%"   style="max-width:90%">
    <div>
        <div>
            <div style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem">


                <div>
                    <div>
                        <p>Published by:</p>


                    </div>



                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>
</code>

这是一个屏幕截图，显示了带有标题封面区块的单篇文章的前端视图：

single-cover.html模板的完整代码可在GitHub上找到。

您可以在WP Tavern和Full Site Editing网站上找到有关创建英雄标题文章区块和使用文章特色图片背景封面块的更多分步演练教程。

就是这样！

有用资源

特色图片封面块

• 文章特色图片块（WordPress支持）
• 使用文章特色图片与封面块YouTube（Dave on WP）
• 封面块分步教程（WordPress支持）
• 特色封面块和将数据绑定到通用WordPress块的未来（WP Tavern）
• 使用WordPress Gutenberg自定义单篇文章布局（Pootlepress）
• 使封面块动态化并添加特色图片绑定 #39658 (GitHub)

博客文章

• 特色封面块和将数据绑定到通用WordPress块的未来（WPTavern）
• 留下印象：如何使用块构建文章英雄标题（WPTavern）
• 核心编辑器改进：使用更多模板选项进行更深入的自定义（Make WordPress Core）

尽管总的来说，块主题受到了WordPress社区成员的大量抵制，但我认为它们也是WordPress的未来。使用块主题，即使没有深入的编码技能和对PHP和JavaScript语言的掌握，业余主题作者现在也可以使用本文中描述的与模式和样式变体相结合的英雄封面区块创建具有复杂布局的主题。

作为一名早期的Gutenberg用户，我对新的主题工具（如create block theme插件等）感到非常兴奋，这些工具允许主题作者直接从块编辑器UI中实现以下功能，而无需编写任何代码：

• (i) 创建
• (ii) 覆盖主题文件并导出
• (iii) 生成空白主题或子主题，以及
• (iv) 修改和保存当前主题的样式变体

此外，最近版本的Gutenberg插件允许仅使用theme.json文件（无需JavaScript和一行CSS规则）启用流畅的排版和布局对齐以及其他样式控制。

感谢您的阅读，请在下方分享您的评论和想法！

以上是如何使用动态帖子功能图像自定义WordPress块主题封面模板的详细内容。更多信息请关注PHP中文网其他相关文章！