WordPress主題中的動(dòng)態(tài)封面模板：利用特色圖片塊增強(qiáng)用戶體驗(yàn)

許多WordPress主題都採用封面圖片作為特色，這是一種廣受歡迎的功能。這種趨勢(shì)在塊主題目錄的截圖中也很明顯。

以Twenty Twenty主題為例，它包含一個(gè)封面模板，可在單篇文章和頁面中使用。文章的特色圖片會(huì)顯示在頂部，橫跨整個(gè)瀏覽器屏幕，下方是文章標(biāo)題和其他元數(shù)據(jù)。封面模板允許創(chuàng)建與傳統(tǒng)內(nèi)容顯示方式不同的內(nèi)容。

目前，創(chuàng)建封面模板需要編寫PHP代碼，例如Twenty Twenty默認(rèn)主題的封面模板。在template-parts/content-cover.php文件中，包含了使用封面模板時(shí)顯示內(nèi)容的代碼。

對(duì)於不精通PHP的普通WordPress用戶來說，唯一的選擇是使用像Custom Post Type UI這樣的插件，如視頻所示。

塊主題中的封面區(qū)塊

從WordPress 5.8開始，主題作者可以使用塊編輯器的封面塊創(chuàng)建一個(gè)自定義模板（如單篇文章、作者、分類等），並將其包含在主題中，而無需編寫或只需少量代碼。

在深入探討如何在塊主題模板中創(chuàng)建大型封面區(qū)塊之前，讓我們簡(jiǎn)要了解一下Twenty Twenty-Two和Wabi by Rich Tabor這兩個(gè)塊主題。

Twenty Twenty-Two通過在header-dark-large部分添加一個(gè)作為模式存儲(chǔ)的隱藏圖像來實(shí)現(xiàn)大型標(biāo)題。而在Wabi主題中，單篇文章的大標(biāo)題背景顏色是通過強(qiáng)調(diào)背景顏色和一個(gè)50px高度的間隔塊實(shí)現(xiàn)的。強(qiáng)調(diào)顏色由assets/js/accent-colors.js文件管理。

許多其他主題選擇使用封面塊來創(chuàng)建頂部封面區(qū)塊，這允許用戶更改背景顏色並添加靜態(tài)圖像，而無需編寫任何代碼。通過這種方法，如果希望將文章的特色圖片作為單篇文章的背景圖片，則必須手動(dòng)將圖片添加到每個(gè)單篇文章中。

帶有動(dòng)態(tài)文章特色圖片的封面塊

WordPress 6.0提供了一個(gè)很酷的特色圖片封面塊功能，允許使用任何文章或頁面的特色圖片作為封面塊的背景圖片。

在下面的短視頻中，Automattic的工程師們討論瞭如何將特色圖片添加到封面塊中，並以Archeo主題為例進(jìn)行了演示：

包含文章特色圖片的圖片塊可以使用theme.json中的雙色調(diào)顏色進(jìn)行進(jìn)一步自定義。

使用案例（Wei，Bright Mode）

在塊主題目錄中瀏覽縮略圖圖像時(shí)，我們會(huì)看到大多數(shù)圖像都包含大型封面標(biāo)題區(qū)塊。如果深入研究它們的模板文件，就會(huì)發(fā)現(xiàn)它們使用了帶有靜態(tài)圖像背景的封面塊。

一些最近開發(fā)的主題使用帶有動(dòng)態(tài)文章特色圖片背景的封面塊（例如，Archeo、Wei、Frost、Bright Mode等）。關(guān)於此新功能的簡(jiǎn)要概述可在GitHub視頻中找到。

Rich Tabor結(jié)合了Wabi主題的動(dòng)態(tài)強(qiáng)調(diào)顏色功能以及封面和文章特色圖片塊，在他的新Wei主題中進(jìn)一步擴(kuò)展了他的創(chuàng)意，以顯示來自單篇文章的動(dòng)態(tài)封面圖片。

在他的Wei公告文章中，Rich Tabor寫道：“在幕後，single.html模板使用的是一個(gè)封面塊，它利用了文章的特色圖片。然後，通過分配給文章的顏色方案應(yīng)用雙色調(diào)。這樣，幾乎任何圖像看起來都會(huì)很好。”

如果您想更深入地了解Wei主題的標(biāo)題封面塊，並學(xué)習(xí)如何創(chuàng)建您自己的封面塊，這裡有一個(gè)來自Fr?nk Klein（WP Development Courses）的短視頻，逐步解釋了它的創(chuàng)建過程。

與Wei主題類似，Brian Gardner也在他最近的Bright Mode主題中使用了帶有文章特色圖片塊的封面塊，以顯示引人注目的內(nèi)容和鮮豔的色彩。

Brian告訴WPTavern：“他最喜歡的主題是封面塊在單頁上的使用方式。它將特色圖片拉入封面塊，並提供自定義塊樣式，用於陰影和全高選項(xiàng)。……我覺得這真正展現(xiàn)了現(xiàn)代WordPress的可能性。”

更多詳情，請(qǐng)?jiān)L問其演示網(wǎng)站和Brian的Bright Mode主題的完整評(píng)論。

使用塊編輯器設(shè)計(jì)複雜的佈局

最近，WordPress發(fā)布了一個(gè)新的塊編輯器，用於設(shè)計(jì)登錄主頁和下載頁面。這一公告引起了讀者的各種反應(yīng)，包括Automattic的Matt Mullenweg，他評(píng)論了設(shè)計(jì)和發(fā)布這樣一個(gè)“簡(jiǎn)單的頁面”所花費(fèi)的33天時(shí)間。您可以在此處找到其他幕後討論。

作為回應(yīng)，Pootlepress的Jamie Marsland創(chuàng)建了這個(gè)YouTube視頻，他在近20分鐘內(nèi)重現(xiàn)了一個(gè)幾乎相同的首頁。

WP Travern的Sarah Gooding評(píng)論Marsland的視頻寫道：“他可以說是塊編輯器的資深用戶。他可以快速地調(diào)整行、列和組，根據(jù)需要調(diào)整填充和邊距，並為每個(gè)區(qū)塊分配相應(yīng)的設(shè)計(jì)顏色。目前，大多數(shù)普通WordPress用戶無法做到這一點(diǎn)?！?/p>

儘管塊編輯器已經(jīng)取得了長(zhǎng)足的進(jìn)步，但對(duì)於大多數(shù)主題開發(fā)者和普通用戶來說，使用它創(chuàng)建和設(shè)計(jì)複雜的佈局仍然存在一些難題。

添加對(duì)TT2 Gopher塊的增強(qiáng)功能

在本節(jié)中，我將引導(dǎo)您了解如何為我在上一篇文章中提到的TT2 Gopher Blocks主題添加增強(qiáng)功能。受前面描述的主題中的封面塊的啟發(fā)，我想為該主題添加三個(gè)封面模板（作者、分類和單頁封面）。

在瀏覽網(wǎng)站時(shí)，我們會(huì)注意到兩種類型的封面標(biāo)題。最常見的標(biāo)題是封面區(qū)塊與網(wǎng)站標(biāo)題（網(wǎng)站標(biāo)題和頂部導(dǎo)航）融合到封面塊中（例如，Twenty Twenty、Twenty Twenty-Two、Wei、Wabi、Frost、Bright Mode等）。我們還會(huì)發(fā)現(xiàn)標(biāo)題封面區(qū)塊沒有與網(wǎng)站標(biāo)題融合，而是位於其正下方，例如BBC Future網(wǎng)站。對(duì)於TT2 Gopher Blocks主題，我選擇了後者。

創(chuàng)建封面標(biāo)題模式

首先，讓我們使用封面塊為作者、單篇文章和其他（分類、標(biāo)籤）模板創(chuàng)建封面標(biāo)題模式。然後，我們將它們轉(zhuǎn)換為模式，並將相應(yīng)的標(biāo)題封面模式調(diào)用到模板中。

如果您熟悉塊編輯器，請(qǐng)?jiān)谡军c(diǎn)編輯器中使用封面塊設(shè)計(jì)您的標(biāo)題區(qū)塊，然後將封面標(biāo)題代碼轉(zhuǎn)換為模式。但是，如果您不熟悉FSE編輯器，那麼最簡(jiǎn)單的方法是從文章中的patterns目錄複製模式，進(jìn)行必要的修改，然後將其轉(zhuǎn)換為模式。

在我的上一篇CSS-Tricks文章中，我詳細(xì)討論了創(chuàng)建和使用塊模式。以下是創(chuàng)建單篇文章封面標(biāo)題模式的工作流程概述：

單篇文章封面標(biāo)題模式

步驟1：使用FSE界面，讓我們創(chuàng)建一個(gè)新的空白文件，並開始構(gòu)建左側(cè)面板所示的塊結(jié)構(gòu)。

或者，這也可以首先在一個(gè)文章或頁面中完成，然後將標(biāo)記複製並粘貼到模式文件中。

步驟2：接下來，要將上述標(biāo)記轉(zhuǎn)換為模式，我們首先應(yīng)該複製其代碼標(biāo)記並粘貼到代碼編輯器中的新/patterns/header-single-cover.php文件中。我們還應(yīng)該添加所需的模式文件標(biāo)題標(biāo)記（例如，標(biāo)題、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/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg" 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：對(duì)於此演示，我使用了photos目錄中的此圖像作為填充背景圖像，並應(yīng)用了Midnight雙色調(diào)顏色。為了動(dòng)態(tài)使用文章特色圖片，我們應(yīng)該通過替換上述填充圖像鏈接在dimRatio:50之前添加"useFeaturedImage":true，以便第10行看起來如下所示：

<code></code>

或者，也可以通過單擊替換並選擇使用特色圖片選項(xiàng)來更改填充圖像：

現(xiàn)在，標(biāo)題封面模式應(yīng)該在模式插入器面板中可見，可以在模板、文章和頁面中的任何位置使用。

存檔封面標(biāo)題

受這篇WP Tavern文章和創(chuàng)建作者模板標(biāo)題的分步演練的啟發(fā)，我想創(chuàng)建一個(gè)類似的封面標(biāo)題並添加到TT2 Gopher主題中。

首先，讓我們?yōu)?code>author.html模板創(chuàng)建存檔封面標(biāo)題模式，遵循上述工作流程。在這種情況下，我通過添加塊（如下面的列表視圖所示）在一個(gè)新的空白頁面中創(chuàng)建它：

在封面的背景中，我使用了單篇文章標(biāo)題封面中使用的相同圖像。

因?yàn)槲覀兿朐谧髡邏K中顯示簡(jiǎn)短的作者簡(jiǎn)介，所以應(yīng)該在用戶個(gè)人資料頁面中添加一份傳記聲明，否則前端將顯示空白空間。

以下是我們將用作模式的header-author-cover的標(biāo)記代碼：

<?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/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg" 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>

要將標(biāo)記轉(zhuǎn)換為header-author-cover模式，我們應(yīng)該添加前面描述的必需模式文件標(biāo)題標(biāo)記。通過編輯header-author-cover.php模式，我們可以為標(biāo)籤、分類法和其他自定義模板創(chuàng)建類似的封面標(biāo)題。

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

使用封面塊創(chuàng)建模板

WordPress 6.0和最近的Gutenberg 13.7將模板創(chuàng)建功能擴(kuò)展到了塊編輯器中，因此即使沒有深入的編碼知識(shí)，許多WordPress用戶現(xiàn)在也可以創(chuàng)建他們自定義的模板。

有關(guān)更多詳細(xì)信息和用例，請(qǐng)參閱Justin Tadlock的全面自定義說明。

塊編輯器允許創(chuàng)建各種類型的模板，包括封面模板。讓我們簡(jiǎn)要概述一下如何將封面塊和文章特色圖片塊與新的模板UI結(jié)合起來，即使沒有或只有少量編碼技能，也可以輕鬆創(chuàng)建各種類型的封面自定義模板。

使用Gutenberg 13.7，創(chuàng)建模板變得容易得多。如何在代碼中和站點(diǎn)編輯器中創(chuàng)建塊模板，在主題手冊(cè)和我的上一篇文章中都有描述。

帶有封面塊的作者模板

author.html模板的頂部（標(biāo)題區(qū)塊）標(biāo)記如下所示（第6行）：

<code></code>

以下是author.html和category.html模板的封面標(biāo)題截圖：

這兩個(gè)模板的完整代碼可在GitHub上找到。

帶有封面塊的單篇文章

要在單篇文章中顯示封面塊，我們必須在標(biāo)題區(qū)塊下方調(diào)用header-cover-single模式（第3行）：

<code><div style="min-height:200px">
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159750414.jpeg" 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>

這是一個(gè)屏幕截圖，顯示了帶有標(biāo)題封面區(qū)塊的單篇文章的前端視圖：

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

您可以在WP Tavern和Full Site Editing網(wǎng)站上找到有關(guān)創(chuàng)建英雄標(biāo)題文章區(qū)塊和使用文章特色圖片背景封面塊的更多分步演練教程。

就是這樣！

有用資源

特色圖片封面塊

• 文章特色圖片塊（WordPress支持）
• 使用文章特色圖片與封面塊YouTube（Dave on WP）
• 封面塊分步教程（WordPress支持）
• 特色封面塊和將數(shù)據(jù)綁定到通用WordPress塊的未來（WP Tavern）
• 使用WordPress Gutenberg自定義單篇文章佈局（Pootlepress）
• 使封面塊動(dòng)態(tài)化並添加特色圖片綁定 #39658 (GitHub)

博客文章

• 特色封面塊和將數(shù)據(jù)綁定到通用WordPress塊的未來（WPTavern）
• 留下印象：如何使用塊構(gòu)建文章英雄標(biāo)題（WPTavern）
• 核心編輯器改進(jìn)：使用更多模板選項(xiàng)進(jìn)行更深入的自定義（Make WordPress Core）

儘管總的來說，塊主題受到了WordPress社區(qū)成員的大量抵制，但我認(rèn)為它們也是WordPress的未來。使用塊主題，即使沒有深入的編碼技能和對(duì)PHP和JavaScript語言的掌握，業(yè)餘主題作者現(xiàn)在也可以使用本文中描述的與模式和樣式變體相結(jié)合的英雄封面區(qū)塊創(chuàng)建具有復(fù)雜佈局的主題。

作為一名早期的Gutenberg用戶，我對(duì)新的主題工具（如create block theme插件等）感到非常興奮，這些工具允許主題作者直接從塊編輯器UI中實(shí)現(xiàn)以下功能，而無需編寫任何代碼：

• (i) 創(chuàng)建
• (ii) 覆蓋主題文件並導(dǎo)出
• (iii) 生成空白主題或子主題，以及
• (iv) 修改和保存當(dāng)前主題的樣式變體

此外，最近版本的Gutenberg插件允許僅使用theme.json文件（無需JavaScript和一行CSS規(guī)則）啟用流暢的排版和佈局對(duì)齊以及其他樣式控制。

感謝您的閱讀，請(qǐng)?jiān)谙路椒窒砟脑u(píng)論和想法！

以上是如何使用動(dòng)態(tài)帖子功能圖像自定義WordPress塊主題封面模板的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！