如何使用动态文章特色图片定制 WordPress 块主题封面模板

Avatar of Ganesh Dahal
Ganesh Dahal 于

DigitalOcean 提供适合您旅程各个阶段的云产品。 立即开始使用 200 美元的免费信用额度！

如果我们浏览 WordPress 主题目录，大多数主题都展示了封面图片。 这是一个非常受欢迎的功能。 封面页趋势在 块主题目录 的屏幕截图中也得到了体现。

让我们考虑以下来自 Twenty Twenty（经典主题）的示例，它包含一个 封面模板，可用于在单个帖子和页面中显示内容，其中帖子的特色图片显示在顶部，跨越浏览器屏幕，帖子标题和其他所需元数据显示在下方。 封面模板允许创建与传统内容显示方式不同的内容。

显示 Twenty Twenty 封面模板的单个帖子的屏幕截图.

创建封面模板目前需要编写 PHP 代码，如 Twenty Twenty 默认主题的封面模板 中捕获的那样。 如果我们查看 template-parts/content-cover.php 文件，它包含使用 cover-template 时显示内容的 代码。

因此，如果您不具备深入的 PHP 知识，就无法创建自定义封面页。 对于许多普通 WordPress 用户来说，唯一的选择是使用 Custom Post Type UI 之类的插件，如 这段简短视频 中所述。

块主题中的封面部分

自从 WordPress 5.8 以来，主题作者可以使用 块编辑器 创建自定义模板（如单个帖子、作者、类别等），并在其主题中包含一个带顶部英雄部分的 块编辑器 封面块，使用最少或根本不使用代码。

在深入了解如何在块主题模板中创建顶部大型封面部分之前，让我们简要了解一下两个块主题，Twenty Twenty-Two 和 Rich Tabor 的 Wabi（完整评论 在此）。

显示 Twenty Twenty-Two（左）和 Wabi（右）主题的封面页缩略图的屏幕截图。

在幕后，Twenty Twenty-Two 通过 在 header-dark-large 部分中添加一个隐藏的图像，该图像存储为模式 来实现大型页眉。 而在 Wabi 主题中，单个帖子中的大型页眉背景颜色是用 强调背景颜色和 50px 高度的间隔块（第 5-9 行）实现的。 强调颜色由 assets/js/accent-colors.js 文件管理。

许多其他人选择使用 封面块 来创建顶部封面部分，这允许用户更改背景颜色并从媒体库中添加静态图像或从媒体设备上传图像，而无需编写任何代码。 使用这种方法，如果要将文章的特色图片作为单个文章中的背景图片，则必须手动将来自 文章特色图片块 的图片添加到每个单个文章中。

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

WordPress 6.0 推出了另一个很酷的 特色图片封面块 功能，该功能允许将任何帖子或页面的特色图片用作封面块中的背景图片。

在下面的 简短视频 中，Automattic 工程师讨论了将特色图片添加到封面块中，并以 Archeo 主题为例。

包含文章特色图片块的图片块可以使用 双色调 颜色在 theme.json 中进一步定制，如这段简短的 Connecting The Dots YouTube 视频（Automattic 的 Anne McCarthy）中所述。

用例示例（Wei，亮模式）

如果我们浏览 块主题目录 中的缩略图，我们会发现大多数缩略图都包含大型封面页眉部分。 如果我们深入研究它们的模板文件，我们会发现它们使用了带有静态图片背景的封面块。

一些最近开发的主题正在使用带有动态文章特色图片背景的封面块（例如 Archeo、Wei、Frost、亮模式等）。 这段简短的 GitHub 视频 提供了该新功能的简要概述。

显示 Wei（左）和亮模式（右）主题的封面页缩略图的屏幕截图。

Rich Tabor 将 Wabi 主题的动态强调颜色功能与封面块和文章特色图片块相结合，在他的新 Wei 主题（完整评论可在 此处 获得）中进一步发挥了他的创意，以从单个帖子中显示动态封面图片。

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

如果您想深入研究 Wei 主题的页眉封面块并了解如何创建自己的封面块，这里有一个来自 Fränk Klein（WP 开发课程）的 简短视频，其中他逐步解释了如何创建封面块。

与 Wei 主题类似，Brian Gardner 在他最近的 亮模式 主题中也使用了带有文章特色图片块的封面块，以 鲜艳的色彩 显示突出的内容。

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

有关更多详细信息，请查看其 演示站点 和 Brian 的亮模式主题的完整评论。

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

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

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

评论 Marsland 的视频，WP Travern 的 Sarah Gooding 写道：“他是块编辑器中所谓的超级用户。 他可以快速地将行、列和组四处移动，根据需要调整填充和边距，并为每个部分分配相应的设计颜色。 对于大多数普通 WordPress 用户来说，这还做不到”。

虽然块编辑器已经走了很长的路，但对于大多数主题开发者和普通用户来说，使用块编辑器创建和设计复杂布局仍然存在一些痛点。

在 TT2 Gopher 块中添加增强功能

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

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

创建封面标题样式

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

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

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

单篇文章封面标题样式

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

WordPress UI 的屏幕截图，其中显示了完整的站点编辑器。一个区块正在被组装，其中包含了文章日期、类别和文章标题。

或者，也可以先在文章或页面中完成此操作，然后将标记复制粘贴到样式文件中，稍后使用。

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

以下是 /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
     */
?>
    <!-- wp:cover {"url":"https://pd.w.org/2022/08/15062ed5f5707b5c5.85694718-2048x1536.jpg","id":100,"dimRatio":0,"overlayColor":"foreground","focalPoint":{"x":"0.40","y":"0.37"},"minHeight":50,"minHeightUnit":"vh","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]},"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->
    <div class="wp-block-cover alignfull is-light" style="margin-top:0px;margin-bottom:0px;min-height:50vh"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-100" alt="" src="https://pd.w.org/2022/08/15062ed5f5707b5c5.85694718-2048x1536.jpg" style="object-position:40% 37%" data-object-fit="cover" data-object-position="40% 37%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"spacing":{"blockGap":"10px"}},"textColor":"base","layout":{"wideSize":"800px"}} -->
    <div class="wp-block-group has-base-color has-text-color has-link-color"><!-- wp:group {"style":{"spacing":{"blockGap":"10px"}},"textColor":"primary","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"},"fontSize":"small"} -->
    <div class="wp-block-group has-primary-color has-text-color has-small-font-size"><!-- wp:post-date {"textColor":"foreground"} /-->
    
    <!-- wp:paragraph -->
    <p>|</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:post-terms {"term":"category","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}}}} /--></div>
    <!-- /wp:group -->
    
    <!-- wp:post-title {"textAlign":"center","level":1,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"textColor":"foreground","fontSize":"max-60"} /--></div>
    <!-- /wp:group --></div></div>
    <!-- /wp:cover -->

步骤 3：在这个演示中，我使用了图片目录中的这张图片 作为填充背景图片，并应用了 Midnight 双色调颜色。要动态使用文章特色图片，我们应该在封面区块中添加 "useFeaturedImage":true ，方法是将上面的填充图片链接替换掉，在 "dimRatio":50 之前，这样第 10 行看起来应该像下面这样

<!-- wp:cover {"useFeaturedImage":true,"dimRatio":0,"overlayColor":"foreground","focalPoint":{"x":"0.40","y":"0.37"},"minHeight":50,"minHeightUnit":"vh","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]},"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->

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

WordPress UI 的屏幕截图，其中显示了“替换”和“使用特色图片”的选项。

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

存档封面标题

受到这篇文章 的启发，以及创建作者模板标题的逐步讲解，我想创建一个类似的封面标题并添加到 TT2 Gopher 主题中。

首先，让我们为 author.html 模板创建存档封面标题样式，方法与上述工作流程相同。在这种情况下，我将在一个新的空白页面中创建它，方法是添加区块（如下面的列表视图所示）

WordPress UI 的屏幕截图，其中显示了使用单篇文章封面标题的作者页面。

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

因为我们希望在作者区块上显示简短的作者简介，所以在用户资料页面上也应该添加一个个人简介语句，否则前端将显示一个空白区域。

以下是我们将要使用的 header-author-cover 样式的标记代码，将在下一步中使用。

    <!-- wp:cover {"url":"https://pd.w.org/2022/03/8256241eff74ef542.61868565.jpeg","id":226,"dimRatio":10,"focalPoint":{"x":"0.50","y":"0.75"},"minHeight":200,"minHeightUnit":"px","isDark":false,"align":"full","style":{"color":{"duotone":["#000000","#00a5ff"]}}} -->
    <div class="wp-block-cover alignfull is-light" style="min-height:200px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-226" alt="" src="https://pd.w.org/2022/03/8256241eff74ef542.61868565.jpeg" style="object-position:50% 75%" data-object-fit="cover" data-object-position="50% 75%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"inherit":true}} -->
    <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem","right":"2rem","bottom":"1rem","left":"2rem"}}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
    <div class="wp-block-group" style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem"><!-- wp:avatar {"size":70,"isLink":true,"align":"right","style":{"border":{"radius":"9999px"}}} /-->
    
    <!-- wp:group -->
    <div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"6px"}},"layout":{"type":"flex"},"fontSize":"large"} -->
    <div class="wp-block-group has-large-font-size"><!-- wp:paragraph {"textColor":"foreground","fontSize":"large"} -->
    <p class="has-foreground-color has-text-color has-large-font-size">Published by:</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:post-author-name {"isLink":true,"style":{"typography":{"fontStyle":"large","fontWeight":"600"},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"textColor":"foreground"} /--></div>
    <!-- /wp:group -->
    
    <!-- wp:post-author-biography {"textColor":"foreground","fontSize":"small"} /-->
    
    <!-- wp:separator {"backgroundColor":"foreground"} -->
    <hr class="wp-block-separator has-text-color has-foreground-color has-alpha-channel-opacity has-foreground-background-color has-background"/>
    <!-- /wp:separator --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group --></div></div>
    <!-- /wp:cover -->

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

我的 category.html 模板的 header-category-cover.php 样式在 GitHub 上提供.

使用封面区块创建模板

WordPress 6.0 和最近的 Gutenberg 13.7 将模板创建功能扩展到区块编辑器中，使许多没有深入代码知识的 WordPress 用户能够创建定制的模板。

有关更详细的信息和用例，请查看Justin Tadlock 关于深度定制的详细说明.

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

WordPress UI 的屏幕截图，其中显示了 TT2 Gopher 区块提供的可用模板 - 单篇文章、页面、索引、主页、404、空白和存档。

Gutenberg 13.7 使创建模板变得更加容易。如何在代码中 和站点编辑器中 创建区块模板，在 主题手册 和我之前的那篇文章中都有描述。

带封面区块的作者模板

下面显示了 author.html 模板的顶部（标题部分）标记（第 6 行）

    <!-- wp:template-part {"slug":"header-small-dark","theme":"TT2-GOPHER-V2","tagName":"header"} /-->
    
    <!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"0","bottom":"0px"},"padding":{"bottom":"80px"},"blockGap":"0px"}},"className":"site-content"} -->
    <main class="wp-block-group site-content" style="margin-top:0;margin-bottom:0px;padding-bottom:80px">
    
        <!-- wp:pattern {"slug":"tt2gopher/header-author-cover"} /-->
    
    ...
    ...
    ...
    <!-- /wp:group -->
    ...

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

作者页面标题（左）的屏幕截图，其中显示了作者姓名、头像和个人简介。以及类别页面标题（右）的屏幕截图。

这两个模板的完整代码在 GitHub 上提供.

带封面区块的单篇文章

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

    <!-- wp:template-part {"slug":"header-small-dark","tagName":"header"} /-->
    
     <!-- wp:pattern {"slug":"tt2gopher/header-cover-single"} /-->
    
    <!-- wp:spacer {"height":32} -->
    <div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer -->
    ....
    ....
    ....

以下是一个屏幕截图，显示了带封面标题部分的单篇文章的前端视图

TT2 Gopher 区块单篇文章的屏幕截图，其中显示了封面标题部分样式。

完整的 single-cover.html 模板在 GitHub 上提供.

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

就是这样！

有用的资源

博客文章

尽管区块主题总体上遭到了 WordPress 社区成员的很多反对，但我认为它们是 WordPress 的未来。使用区块主题，业余主题作者无需深入的代码技能和对 PHP 和 JavaScript 语言的掌握，现在就可以创建具有复杂布局的主题，这些主题具有本文中描述的英雄封面部分，并与样式 和样式变体相结合。

作为一名早期的 Gutenberg 用户，我对 创建区块主题 插件和其他允许主题作者直接从区块编辑器 UI 实现以下功能而无需编写任何代码感到非常兴奋

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

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

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

悄悄话！ 创建 DigitalOcean 帐户并获得 $200 免费信用额度 用于基于云的托管和服务。

评论

  1. Manu k
    评论永久链接#

    块模板被定义为一个块项目的列表。这些块可以具有预定义的属性、占位符内容，并且可以是静态的或动态的。块模板允许为编辑器会话指定一个默认的初始状态。

    回复

发表评论

Your email address will not be published. Required fields are marked *

© 2024 . All rights reserved.