定制古騰堡積木指南

已發表: 2022-11-08

前言
什麼是自定義古騰堡積木?
何時使用自定義古騰堡塊
使用自定義 Gutenberg 塊的替代方法
- 塊模式或可重複使用的塊
- 代碼塊
如何創建自定義古騰堡塊
- 自己編碼
- 使用插件
無論您在建造什麼,我們都可以提供幫助

如果你遲到了 WordPress 派對,塊.

WordPress 不斷發展和改進 Gutenberg 體驗,這導致許多開發人員詢問他們是否應該創建自定義 Gutenberg Blocks。

在這篇文章中,我們將了解自定義塊的工作原理、何時使用它們、構建網站的替代選項以及如何構建 Gutenberg 塊。

什麼是自定義古騰堡積木?

塊是在 WordPress 中構建頁面和帖子的基本單元。 WordPress 在 2018 年引入了具有 Gutenberg 編輯體驗的塊。WordPress 包含許多默認內容類型塊,包括帖子標題、圖像和畫廊。 此外,插件還會為您的編輯體驗添加自己的塊。 例如,一些最新的 WooCommerce 版本引入了新塊,以便更輕鬆地將產品和電子商務功能添加到 WordPress 中的任何頁面或帖子。

創建自定義 Gutenberg 塊使您可以在任何頁面上使用該塊或在您的網站上發布。 例如,您可以創建一個提取並顯示客戶推薦的塊。

24/7 WordPress 支持

來自真正的 WordPress 專家

學到更多

如果你一直不願意完全接受積木,那你就錯過了。 所有最新的 WordPress 功能都專注於改善塊編輯器的體驗。 您需要使用塊來利用許多最近和即將推出的 WordPress 功能

下載我們關於開始使用完整站點編輯的電子書,以了解有關如何使用塊來構建和編輯整個站點的更多信息。

何時使用自定義古騰堡塊

當現有的塊選項不符合您的需求並且您無法通過插件或主題找到可行的替代方案時,您可以創建自定義 Gutenberg 塊。

創建自定義 Gutenberg 塊通常不是適合初學者的項目。 編寫自己的自定義 Gutenberg 塊的兩個最常見原因是在開發插件或創建自己的主題時。

構建塊不是大多數人為單個網站承擔的項目,除非它是具有專門開發人員或開發團隊的企業級項目。 我們正在分享一些替代方法,如果您只需要一個站點的自定義塊,它們可能會更好。

使用自定義 Gutenberg 塊的替代方法

在完成所有確定自定義塊的工作之前,請考慮這些替代方案之一是否適合您。

塊模式或可重用塊

如果您不需要引入動態內容並且真的只是想要一個塊來複製佈局,請改用新的塊模式功能或可重用塊。 此選項對初學者友好,只需很少甚至無需編寫代碼即可完成。

模式就像一個迷你模板,您可以在網站的任何地方使用。 您可以將其插入頁面,然後進行編輯。 可重用的塊以類似的方式工作。 最大的區別在於在頁面或帖子上使用它們後如何處理它們。

模式是一個起點。 一旦它出現在頁面上,您所做的任何修改都是該頁面獨有的。 如果您稍後更改模式,它不會更改它已在使用的位置。

可重複使用的塊保持相互鏈接。 如果您更新塊,更改將應用於您使用該塊的每個地方。

代碼塊

使用代碼塊在頁面上插入自定義代碼。 主題和插件開發人員創建自定義塊以跨多個站點使用。 如果您在單個站點上工作,則可以通過添加自定義代碼片段在更短的時間內完成相同的目標。 這兩種選擇都需要相同水平的技術專長。

可能值得考慮構建自己的自定義塊的一種情況是,如果您是想要將網站移交給客戶的開發人員。 客戶端可能能夠使用 Gutenberg 編輯器使用您的自定義塊,但在嘗試編輯您的代碼時會完全迷失。

如何創建自定義古騰堡塊

您有兩個選項可用於創建自定義 Gutenberg 塊。 您可以自己編寫代碼或使用塊創建插件。 這兩個選項都需要一些編碼。 在嘗試之前,您需要復習一下 Web 開發基礎知識。

自己編碼

構建自定義塊需要開發經驗。 如果您想堅持使用所見即所得的編輯器,並且在您不小心單擊顯示代碼選項時心跳加速,那麼這不適合您。

創建自定義塊需要 HTML、CSS、JavaScript 和 React 的中級知識。

首先設置您的開發環境和工具。 你需要一個 WordPress 環境、Node、NPM 和一個代碼編輯器。 之後,按照本教程從官方 WordPress 塊編輯器手冊創建您的第一個塊

使用插件

如果您熟悉 HTML、CSS 和 JavaScript,但還沒有準備好從頭開始編寫所有代碼,請考慮使用插件方法。 當您需要在單個網站上使用自定義塊時,使用插件創建自定義塊是一個不錯的選擇。

Genesis Custom Blocks 插件是最流行的用於創建自定義塊的插件。 您將使用熟悉的 WordPress 界面創建塊字段。 設置字段後,您需要提供 HTML、CSS、JavaScript 和 PHP 模板以使塊工作。

即使它更容易,它仍然需要一些編碼。 不同之處在於,您無需設置本地開發環境即可通過 WordPress 管理員完成所有操作。 該插件還可以更輕鬆地測試和預覽塊,以確保其正常工作。

無論您在建造什麼,我們都可以提供幫助

無論您如何構建您的網站,使用自定義塊,或者如果您仍然使用經典編輯器,您都需要一個可靠的主機。 Pressable 很自豪能夠成為 WordPress 最適合從個體企業家到高級開發人員團隊的每個人的地方。

Pressable 提供易於使用的界面、頂級的安全性和極快的速度。 使用 Pressable 的託管,您的網站將易於更新,並且易於客戶查找和使用。

立即註冊並開始構建您的網站或了解有關轉移現有網站的更多信息。 我們很樂意幫助您遷移您的網站!

網絡性能

加載時間很重要! 你知道你的網站有多快嗎?

學到更多