如何使用動態帖子功能圖像自定義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/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雙色調顏色。為了動態使用文章特色圖片，我們應該通過替換上述填充圖像鏈接在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/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>

要將標記轉換為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/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>

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

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中文網其他相關文章！