使用塊編輯器重新創建音樂藝術家 WordPress 主題主頁

我每週最喜歡的活動之一是仔細閱讀最新的主題以登陸 WordPress 主題目錄。 通常，有一些有趣的設計概念。 然而，很多時候，我很失望地得知許多主頁設計依賴於主題選項而不是塊編輯器。

雖然編輯器有幾個設計限制，但主題作者有大量的探索空間。 它有足夠的能力以更少的代碼工作來完成其中一些自定義主頁設計。

音樂藝術家是最近引起我注意的主題之一。 我喜歡大型英雄區域和主題設計的幾個元素。 安裝後，我意識到主頁佈局是通過主題選項處理的。 但是，主題作者可以完全用塊構建此頁面，並將每個部分甚至整個設計包裝成塊模式。

這一切都可以通過塊編輯器實現。

為了實踐我所宣揚的內容，我花了幾個小時直接從塊編輯器重新創建了主題的主頁演示。 無需代碼。 有一些棘手的部分，我將進入。 但是，如果主題支持塊編輯器，它的構建並不難，並且可以變得更容易。

計劃是複制安裝了音樂藝術家主題的自定義頁面。 然而，主題缺乏區塊支持意味著有些東西從根本上被打破了。 相反，我激活了一個設計相似的主題，例如字體和顏色。 因為我已經知道 Ariele Lite 可以使用塊編輯器，所以看看我是否可以使用它進行構建是有意義的。 事實證明，這是一個堅實的基礎。

以下是原始音樂藝術家主題主頁（第一）和通過 Ariele Lite 主題使用塊的娛樂（第二）的比較：

間距、顏色、排版和其他元素顯然存在差異。 其中大部分歸結為主題設計師的風格選擇。 通過像 Editor Plus 這樣的插件有更多的時間和修改，我可以調整到足以獲得更接近的副本。 然而，我的目標是盡可能地貼近 WordPress 的核心。 從技術上講，我安裝了最新版本的 Gutenberg 插件，因此可能有一些項目尚未登陸 WordPress。

對於這個實驗，我使用了：

• WordPress 5.7 測試版
• 古騰堡 10.1 測試版
• 阿里爾精簡版 1.0.8
• 編輯器加 2.6

我只需要 Editor Plus 對 Group 塊進行一些邊距調整。 我本可以不理會它，但我想減少頁面上部分之間的間距以獲得更緊密的娛樂。 將來，我們會在 WordPress 中看到更多的間距控制，所以我認為這是一個公平的權衡。

該實驗旨在向主題作者展示他們可以使用塊系統構建他們的自定義設計。 放棄老式的主題選項意味著開發人員的代碼工作量要少得多，讓他們可以更多地專注於樣式。 最終用戶還受益於更大的靈活性，例如添加自定義元素或刪除他們不需要的部分。 這甚至不包括單個塊級別的樣式選項。

第二個目的是向用戶展示他們可以在沒有代碼的情況下創建其中一些主頁。 塊編輯器和全面的塊就緒主題可以讓您走得很遠。

重建音樂藝術家主頁

從 Ariele Lite 的底座開始意味著設計是盒裝的。 但是，該主題有一個自定義的“空白畫布”頁面模板，可讓用戶設計整個頁面。

由於塊編輯器的限制，我無法完全重新創建一些元素。 其他部分是來自主題的問題或設計選擇。

以下是我如何完成構建主頁每個部分的總體概述。 我將跳過添加顏色和更改字體大小等部分，同時關注與佈局相關的概念。

英雄區

WordPress 的封面塊仍然是我最喜歡的塊之一。 它允許用戶在沒有太多工作的情況下創建英雄部分。 我從原始演示中抓取了背景圖像並將其放入。我邁出了真正的第一步。

然後，我添加了一個標題塊，稍微調整了它的大小。 我在它後面加上了一個 Spacer 和 Social Icons 塊。

我立刻碰到了兩個障礙。 首先是 WordPress 不包含 iTunes 社交圖標。 我無法在 Gutenberg 存儲庫上找到一個未解決的問題。 也許這不是一個經常被要求的功能。 第二個問題是社交圖標塊不輸出社交網絡標籤，所以我無法複製那部分設計。

唱片部

有幾種方法可以處理此部分。 假設列出的專輯是自定義帖子類型，無論這些專輯來自什麼插件，理想情況下都有一個自定義塊用於輸出它們。 如果這些是博客文章或即將到來的查詢塊，用戶也可以使用最新帖子塊。

為簡單起見，我決定添加一個 Columns 塊並放入三個鏈接的圖像。

媒體和文本部分

我對本節的計劃是使用核心媒體和文本塊。 但是，它僅支持自託管媒體。 我無法嵌入 YouTube 視頻。

相反，我選擇了 Columns 塊。 在左欄中，我刪除了一個 YouTube 視頻 URL。 在右側，我添加了標題、段落和按鈕塊。

視頻部分

這是一個相對簡單的部分來重新創建。 對於佈局，它只需要一個 Heading 塊，然後是一個 Columns 塊。 然後，我從 YouTube 上抓取了幾個視頻鏈接並將 URL 粘貼到編輯器中。

最新帖子部分

這是我最麻煩的佈局部分。 WordPress 提供了可以在網格中設置的最新帖子塊。 但是，Ariele Lite 沒有正確處理這些列。

所以，我作弊了一點。

我切換到支持即將推出的完整站點編輯功能的基於塊的主題。 然後，我加入了一個查詢塊，以更好地控制帖子的列。 之後，我切換回了 Ariel Lite 主題。

原始設計可以使用當前的最新帖子塊完成，因此這不是塊編輯器問題。

頁腳側邊欄部分

從技術上講，頁腳側邊欄超出了主頁設計的範圍。 它是整個網站的主題頁腳的一部分。 但是，我決定添加它，因為我已經開始了。

本節需要 Columns 塊。 從那時起，只需為每一列放入一個標題塊。 我添加了段落、日曆和圖庫塊來重新創建三個“小部件”。

Ariele Lite 的日曆塊設計在淺色背景上效果更好。 這是我忽略的一個小痛點。 從長遠來看，WordPress 應該為缺少它們的塊提供設計控制。