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

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

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

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

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

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

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

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

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

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

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

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

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

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

使用案例（Wei，Bright Mode）

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

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

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

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

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

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

Brian告訴WPTavern：“他最喜歡的主題是封面塊在單頁上的使用方式。它將特色圖片拉入封面塊，并提供自定義塊樣式，用于陰影和全高選項?！矣X得這真正展現(xiàn)了現(xiàn)代WordPress的可能性?！?/p>

更多詳情，請訪問其演示網(wǎng)站和Brian的Bright Mode主題的完整評論。

使用塊編輯器設計復雜的布局

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

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

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

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

添加對TT2 Gopher塊的增強功能

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

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

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

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

如果您熟悉塊編輯器，請在站點編輯器中使用封面塊設計您的標題區(qū)塊，然后將封面標題代碼轉(zhuǎn)換為模式。但是，如果您不熟悉FSE編輯器，那么最簡單的方法是從文章中的patterns目錄復制模式，進行必要的修改，然后將其轉(zhuǎn)換為模式。

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

單篇文章封面標題模式

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

或者，這也可以首先在一個文章或頁面中完成，然后將標記復制并粘貼到模式文件中。

步驟2：接下來，要將上述標記轉(zhuǎn)換為模式，我們首先應該復制其代碼標記并粘貼到代碼編輯器中的新/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/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：對于此演示，我使用了photos目錄中的此圖像作為填充背景圖像，并應用了Midnight雙色調(diào)顏色。為了動態(tài)使用文章特色圖片，我們應該通過替換上述填充圖像鏈接在dimRatio:50之前添加"useFeaturedImage":true，以便第10行看起來如下所示：

<code></code>

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

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

存檔封面標題

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

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

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

因為我們想在作者塊中顯示簡短的作者簡介，所以應該在用戶個人資料頁面中添加一份傳記聲明，否則前端將顯示空白空間。

以下是我們將用作模式的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/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>

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

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

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

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

有關更多詳細信息和用例，請參閱Justin Tadlock的全面自定義說明。

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

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

帶有封面塊的作者模板

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

<code></code>

以下是author.html和category.html模板的封面標題截圖：

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

帶有封面塊的單篇文章

要在單篇文章中顯示封面塊，我們必須在標題區(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>

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

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

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

就是這樣！

有用資源

特色圖片封面塊

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

博客文章

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

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

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

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

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

感謝您的閱讀，請在下方分享您的評論和想法！

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