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

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

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

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

這一切都可以通過塊編輯器來完成。

為了實踐我所講的內容,我花了幾個小時,直接從模塊編輯器重新創建了該主題的首頁演示。 無需代碼。 我將介紹一些棘手的內容。 但是,構建起來並不難,如果主題支持塊編輯器,它本來可以變得更容易。

計劃是複製安裝了Music Artist主題的自定義頁面。 但是,該主題缺乏障礙支持意味著某些事情從根本上被打破了。 相反,我激活了一個具有設計相似性的主題,例如字體和顏色。 因為我已經知道 Ariele Lite與塊編輯器一起工作,看看我是否可以用它構建。 它被證明是堅實的基礎。

以下是原始音樂藝術家主題首頁(第一個)和通過 阿里爾精簡版 主題(第二個):

間距,顏色,版式和其他元素明顯不同。 其中大部分歸因於主題設計師的風格選擇。 通過類似的插件獲得了更多的時間和修改 編輯器加,我可以對此進行足夠的調整以獲得更接近的副本。 但是,我的目標是儘可能地靠近核心WordPress。 從技術上講,我已經安裝了最新版本的Gutenberg插件,因此WordPress中可能還沒有一些項目。

在此實驗中,我使用了:

  • WordPress 5.7 Beta
  • 古騰堡10.1 Beta
  • Ariele Lite 1.0.8
  • 編輯器加2.6

我只需要Editor Plus可以在Group塊上進行一些邊距調整。 我本來可以保留它,但是我想縮小頁面上各節之間的間距,以使娛樂更加緊密。 將來,我們將在WordPress中看到更多的間距控制項,因此我認為這是一個公平的權衡。

此實驗旨在向主題作者展示他們可以使用圖塊系統構建自定義設計。 放棄老式的主題選項對開發人員而言意味著更少的代碼工作量,從而使他們可以將更多精力放在樣式上。 最終用戶還可以從更大的靈活性中受益,例如添加自定義元素或刪除他們不想要的部件。 這甚至不包括各個塊級別的樣式選項。

第二個目的是向用戶顯示他們可以不用代碼即可創建其中一些主頁。 塊編輯器和全面的,可塊就緒的主題可以使您走得更遠。

重新創建音樂藝術家主頁

從Ariele Lite的基礎開始,意味著設計是盒裝的。 但是,主題具有自定義的「空白畫布」頁面模板,可讓用戶設計整個頁面。

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

以下是我如何完成首頁各部分的總體概述。 在關注與布局相關的概念時,我將跳過諸如添加顏色和更改字體大小之類的部分。

英雄區

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

WordPress的Cover塊仍然是我最喜歡的塊之一。 它使用戶無需太多工作即可創建英雄部分。 我從原始演示中獲取了背景圖像並將其插入。我邁出了這一旅程的第一步。

然後,我添加了一個Heading塊,對其大小進行了一些調整。 我緊隨其後的是「 Spacer and Social Icons」塊。

我立即遇到了兩個障礙。 首先是WordPress不包含iTunes社交圖標。 為此,我無法在Gutenberg存儲庫中找到一個未解決的問題。 也許這不是經常需要的功能。 第二個問題是,「社交圖標」塊不會輸出社交網路標籤,因此我無法複製設計的那部分。

唱片科

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

有幾種方法可以處理此部分。 假設列出的相冊是自定義帖子類型,則理想情況下,這些相冊來自的任何插件都應具有用於輸出它們的自定義塊。 如果這些是博客帖子或即將到來的「查詢」塊,則用戶還可以使用「最新帖子」塊。

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

媒體和文字科

用圖塊編輯器4重建音樂藝術家WordPress主題主頁用圖塊編輯器重建音樂藝術家WordPress主題主頁

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

相反,我使用了Columns塊。 在左列中,我放置了YouTube視頻URL。 在右側,我添加了「標題」,「段落」和「按鈕」塊。

視頻部分

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

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

最新帖子部分

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

這是我最煩惱的布局部分。 WordPress提供了Latest Posts塊,可以在網格中設置。 但是,Ariele Lite無法正確處理列。

所以,我有點作弊。

我切換到一個基於塊的主題,該主題支持即將推出的「完整站點編輯」功能。 然後,我放入了Query塊,以更好地控制帖子的列。 之後,我切換回Ariele Lite主題。

原始設計可以使用當前的Latest Posts塊完成,因此這不是塊編輯器問題。

頁腳側邊欄部分

用圖塊編輯器7重新創建音樂藝術家wordpress主題主頁。用圖塊編輯器重新創建音樂藝術家WordPress主題主頁

從技術上講,頁腳側邊欄超出了首頁設計的範圍。 它是整個網站中主題頁腳的一部分。 但是,由於已經投入使用,因此我決定添加它。

本部分需要「列」塊。 從那時起,只需要為每列添加一個Heading塊即可。 我添加了一個Paragraph,Calendar和Gallery塊來重新創建三個「 widgets」。

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

像這樣:

像載入中…

來源

相關文章