如何使用新的基於塊的 WordPress 小部件編輯器

已發表: 2021-09-17

在 WordPress 5.8(2021 年 7 月發布)中,WordPress 對 WordPress 小部件編輯器進行了重大更改,將其從長期存在的系統切換到新的基於塊的小部件方法。

在 WordPress 小部件編輯器中使用自定義編輯器之前,您現在將使用塊來控制站點小部件區域中的內容 - 與您在創建帖子或頁面時使用的塊相同。

在本文中,我們將向您介紹新的基於塊的 WordPress 小部件編輯器,並向您展示它的工作原理。 然後,我們將介紹七個最有用的小部件,並向您展示如何充分利用它們。 讓我們潛入水中!

基於塊的 WordPress 小部件編輯器的工作原理

首先,讓我們回顧一下如何訪問和使用小部件編輯器。

#WordPress 改變了#widgets 的工作方式 - 查看您的網站需要哪些小部件以及如何使用
點擊推文

如何訪問小部件編輯器

您有兩個選項可以訪問 WordPress 小部件編輯器。

首先,您可以進入外觀→小部件打開完整的小部件編輯器界面:

向您展示 WordPress 小部件編輯器的主屏幕。

其次,您還可以通過轉到外觀→自定義→小部件來從 WordPress 定制器訪問小部件編輯器:

在主題定制器中使用 WordPress 小部件編輯器後小部件的顯示方式。

使用定制器很好,因為它可以讓您實時預覽小部件在網站前端的外觀。 但是,缺點是實際編輯器的空間較小。

出於這個原因,您可能需要轉到外觀 → 小部件進行繁重的小部件編輯,然後切換到定制器進行最後的潤色。

如何使用 WordPress 小部件編輯器

無論您是在專用的 WordPress 小部件區域還是 WordPress 定制器中工作,編輯小部件的基本過程都是相同的。

然而,對於我們的屏幕截圖,我們將使用專用的 WordPress 小部件區域(外觀 → 小部件)。

借助新的塊小部件系統,WordPress 小部件現在使用與您創建帖子和頁面相同的塊編輯器。 如果您不熟悉它的工作原理,可以查看我們的 WordPress 塊編輯器指南。

要添加新塊/小部件,您可以單擊左上角的加號圖標或您正在編輯的小部件區域內的加號圖標:

如何向小部件編輯器添加新塊

在下一節中,我們將介紹一些您可以添加的最有用的塊小部件

要添加文本,您可以添加段落或標題塊,然後單擊並鍵入。

要編輯塊小部件的完整設置,您只需單擊它。 然後,您可以在側邊欄中編輯其設置(就像常規塊編輯器一樣):

如何編輯塊小部件的設置

要在不同的小部件區域之間移動小部件,您可以單擊“曲線”圖標並使用下拉菜單選擇要將其移動到的小部件區域:

如何在不同的小部件區域之間移動塊

如果要編輯不同的小部件區域,只需單擊箭頭將其展開。 例如,在上面的屏幕截圖中,您可以單擊Shop Sidebar小部件區域來編輯該小部件區域內的塊。

總體而言,新的 WordPress 小部件編輯器中的所有功能與塊編輯器幾乎相同,這很好,因為它為編輯 WordPress 網站創造了一致的體驗,並讓您可以訪問對小部件區域的更多控制。

最有用的 WordPress 塊小部件

現在您知道如何使用新的基於塊的 WordPress 小部件編輯器,讓我們看看七個最有用的 WordPress 塊小部件。

但是,請記住,這些不是您唯一的選擇,您可能還想熟悉其他功能。

1. 檔案

檔案小部件按月和年組織您過去的帖子:

存檔小部件的示例。

此導航幫助可以幫助您的受眾快速訪問較舊的內容。 如果您正在尋找一種簡單的方法來為未來的用戶組織所有這些新的博客文章創意,那麼這可能是這項工作的最佳小部件。

我們強烈建議您打開顯示為下拉設置。 這有助於在不限制其實用性的情況下最大限度地減少存檔小部件佔用的空間。 如果您有一個包含大量帖子的舊網站,您應該特別考慮這樣做。

最後,您可能需要考慮激活顯示帖子計數設置。 如果您過去沒有堅持一致的發佈時間表,這可以幫助將用戶引導到您更有效率的月份。

2. 最新評論

顧名思義,此小部件顯示您網站上的最新評論。 它還會顯示評論與哪個帖子相關,因此您不必擔心丟失任何上下文:

顯示最新評論的小部件。

我們認為“最新評論”小部件的最佳部分是它如何有效地展示活動網站。 通過激活顯示日期選項,您可以進一步了解這一點。

如果用戶看到其他人正在與您的帖子互動,他們可能會被鼓勵這樣做。 此外,那些被推薦的人可能會欣賞這種認可。 如果您的觀眾使用獨特的個人資料圖片,這種個性化的感覺會特別強烈。

儘管有所有這些潛在的積極因素,您還是應該注意此小部件的顯示設置。 即使是最快的 WordPress 主題,太多的評論也會減慢速度。 因此,我們建議您限制一次顯示的評論數量。

3. 最新帖子

最新帖子塊可以幫助您的受眾保持在循環中,無論他們在您網站的哪個位置。 這是因為添加此小部件將生成您最近的內容列表:

最近帖子小部件的演示。

因此,這是一種快速訪問您最近工作的簡單方法。 因此,用戶不必返回您的主頁或主博客來獲取新內容——他們可以直接訪問引起他們注意的帖子。

最重要的是,這個小部件是高度可定制的。 例如,您可以選擇包含詳細信息,例如帖子摘錄或作者姓名。 如果您的網站嚴重依賴視覺效果,您還可以選擇顯示特色圖片。

如果您只想顯示部分內容,您還可以過濾掉來自特定類別和/或作者的帖子。

4. 社會偶像

為您的用戶提供在社交媒體上與您聯繫的機會有助於擴大您的影響力。 這就是社交圖標小部件的用武之地:

正在運行的社交媒體圖標小部件的示例。

此功能可幫助您提供指向 Facebook 等流行社交媒體網站的鏈接。 您還可以添加不太常見的,例如亞馬遜。 如果您參與了他們的會員計劃,這可以幫助您進行更多銷售。

如果您對在風格上使用 WordPress 小部件編輯器感到滿意,您可能還需要考慮調整圖標調色板。 您可能不想偏離可識別的設計太遠,但即使是細微的變化也可能有助於這些圖標更好地適應您網站的主題。

5.標籤雲

您的 WordPress 網站可能有某種標記系統。 標籤云通過在一個組中顯示您的所有標籤來將此功能放在首位和中心位置:

標籤雲,這是了解如何編輯小部件的重要塊。

此外,每個標籤的大小取決於使用它的帖子數量。 您可以通過打開顯示帖子計數設置來更清楚地說明這一點。 通過直觀地傳達這些信息,您可以幫助您的用戶直觀地探索您博客上最受歡迎的主題。

然而,一些網站有一個明確的標籤系統供搜索引擎使用。 這可能會導致一長串標籤,即使是標籤雲也無法組織。 如果這聽起來像您,請考慮使用此小部件來顯示類別。 您將獲得相同的導航優勢,而無需創建大量文本。

6.導航菜單

導航菜單小部件是另一個簡單但功能強大的塊。 此功能會在您放置的任何位置顯示您選擇的導航菜單:

知道如何編輯像導航菜單這樣簡單的小部件也是必不可少的。

導航是您網站用戶體驗的關鍵部分。 您可能已經在標題中顯示了主導航菜單,但導航菜單小部件為您提供了在任何小部件區域顯示不同菜單的選項。

例如,您可以為頁腳鍊接創建一個單獨的菜單,並使用此小部件在頁腳中自動顯示這些鏈接。

7. 搜索

搜索小部件使用戶能夠搜索您的網站以查找內容。 這可能看起來很簡單,但是知道如何編輯像這個一樣簡單的小部件很重要:

一個如何編輯簡單小部件的示例,例如搜索小部件。

與導航菜單小部件類似,我們認為搜索小部件放置在顯眼位置時效果最佳。 這樣,用戶可以輕鬆瀏覽您的網站並找到他們查詢的答案。

然而,默認的 100% 寬度可能不適用於您網站的設計。 幸運的是,您不需要完全放棄此功能。 相反,您可以在“顯示設置”選項菜單下自定義確切的百分比寬度。

設置此小部件後,您可能還需要考慮添加自動完成搜索功能。 這個小小的改變幾乎可以為任何網站增添一絲專業性。

如何禁用塊小部件並使用較舊的 WordPress 小部件

與舊的 WordPress 小部件系統相比,新的基於塊的 WordPress 小部件編輯器為您提供了更多的靈活性。 但是,如果您希望繼續使用舊的小部件系統,您可以選擇。

就像經典編輯器插件允許您禁用塊編輯器一樣,官方經典小部件插件允許您禁用基於塊的小部件並繼續使用舊的 WordPress 小部件編輯器。

無需配置任何設置 - 一旦您激活插件,您的站點將恢復使用舊版小部件系統。

轉到頂部

開始使用 WordPress 小部件編輯器

運行一個網站通常需要相當多的策略。 因此,僅知道如何使用 WordPress 小部件編輯器可能還不夠——了解如何有效地使用它也很重要。 幸運的是,您只需單擊幾下即可充分利用最有用的功能。

查看新的#WordPress 小部件編輯器可以做什麼(加上每個#website 需要的小部件)
點擊推文

在本文中,我們向您展示了新的基於塊的小部件編輯器的工作原理,然後我們帶您了解了七個最實用的小部件。 我們解釋了它們的基本用途,並介紹了一些優化它們對您網站的貢獻的巧妙方法。

如果您希望能夠在網站的更多部分使用您的小部件,您還可以查看我們關於如何創建自定義 WordPress 側邊欄的指南。

您對如何更有效地編輯小部件有任何疑問嗎? 在下面的評論部分讓我們知道!

免費指南

加快速度的 5 個基本技巧
您的 WordPress 網站

將加載時間縮短 50-80%
只需遵循簡單的提示。

下載免費指南