WordPress 塊：深入指南
已發表: 2021-10-02WordPress 塊是 WordPress 拖放式 Gutenberg 網站編輯系統的主要組件。
學習使用積木的最簡單方法是通過動手練習，但了解積木是什麼以及它們可以為您做什麼可以使您的頁面構建更加高效甚至有趣。
無論您是剛開始製作 WordPress 網站還是希望培養一些高級技能，本指南都會教您更多關於什麼是塊、人們使用哪些常用塊、如何使用它們以及可以改進您的網站的其他信息。
了解更多：WordPress 網站設計：如何從頭開始創建 WordPress 網站
什麼是 WordPress 塊？
WordPress 塊是文本、媒體或自定義代碼的謹慎元素，您可以使用 WordPress 的 Gutenberg 編輯系統將它們添加到博客文章或網站頁面。
大多數人專注於將它用於博客，但它適用於許多網站上的大多數其他頁面。
WordPress 塊的存在是為了通過消除手動編碼每個元素的需要來簡化創建對讀者來說看起來不錯的帖子和頁面。相反，您可以拖動和重新排列每個塊以自定義頁面的外觀。
每個塊在功能上都是頁面上的一個自包含元素，因此更改一個塊不會修改其他塊。
這不是市場上唯一的塊類型編輯系統。一些競爭服務，如 Ghost，也有強大的編輯器，可用於創建網站。
然而，Ghost 主要是一個博客平台，它的編輯器專注於這一點，而 WordPress 的編輯器也有助於在您的網站上創建非博客頁面。
這些塊也不同於另一個內容管理系統 Drupal。
Drupal 專注於可以出現在網站多個部分的塊，而 WordPress 專注於頁面的各個部分。
您可以很容易地複制內容，但塊本身沒有鏈接，並且在您編輯時不會全部更改。
了解更多：登陸頁面設計：10 個鼓舞人心的高轉化登陸頁面
古騰堡的歷史
Gutenberg 是 WordPress 的當前編輯器。
它最初於 2018 年推出，從那時起發展成為一個更成熟的系統，能夠為網頁和博客文章提供快速而強大的編輯。
它還沒有完成，因為開發人員希望將它用於完整的站點編輯，但它現在的功能比發佈時要多得多。
古騰堡的存在是因為許多 WordPress 用戶希望擁有一種更簡潔、更簡單的博客方式，而無需編輯代碼以使一切看起來都很好。
在這裡，必須了解 WordPress 吸引了許多臨時用戶，其中很多人幾乎沒有編碼知識。
這與早期的互聯網截然不同，那時除非您擁有相對先進的編碼知識，否則您甚至不會擁有網站。換句話說，WordPress 希望支持休閒市場，在這種市場中，點擊和拖動過程更有意義。
古騰堡的第二個考慮因素是人們寫博客的方式和地點。
一些網站所有者使用文本轉語音系統而不是手動寫出內容，而拖放編輯系統使在智能手機、平板電腦和其他設備上創建網站變得更加容易。
但是，有些人仍然喜歡舊的編輯系統。這並不奇怪，因為它仍然為能夠管理其代碼的用戶提供更多的控制和支持。
Gutenberg 是一個功能強大的編輯器，但出於必要，它限制了用戶可以做的一些事情。沒有什麼比純編碼更靈活了，但 Gutenberg 更快、更容易滿足大多數需求。
了解更多：轉化率優化：完整指南
在經典編輯器和塊編輯器之間切換
WordPress 知道靈活性通常比強迫每個人使用一個系統要好，這就是為什麼您可以在其經典和塊編輯系統之間切換。
在大多數情況下，您需要成為站點管理員才能在編輯視圖之間切換。
但是，一旦您使用正確的帳戶登錄，您就可以在修改每個頁面時通過單擊屏幕頂部的按鈕來更改每個頁面上的編輯器。
這是大多數用戶需要知道的全部內容，但您可以進一步自定義內容。
許多 WordPress 插件允許您使用像 Gutenberg 這樣的拖放界面來構建頁面，但您可能更喜歡這種方式。他們通常也提供古騰堡沒有的編輯選項。
Divi builder、SeedProd 和流行的、易於使用的 Elementor 等插件提供了 Gutenberg 提供的塊之外的編輯系統。
這些插件通常包含調整大小的工具、多部分組件和增強的模板，可進一步減少創建頁面的過程。
外部插件對非博客頁面很有幫助，這是 Gutenberg 經常掉線的地方。它可以做很多這樣的頁面，但目前還沒有與其他系統相同的靈活性。
了解更多：客戶旅程地圖：最佳實踐 + 就緒模板
如何禁用古騰堡
您可以為特定用戶禁用古騰堡嗎？可以完全禁用嗎？
兩者的答案都是肯定的。如果您不想在您的網站上使用古騰堡，有幾種方法可以禁用它。
通過安裝插件禁用古騰堡
第一種方法，對於大多數用戶來說是最好的，是使用經典編輯器插件。這是 WordPress 團隊的官方插件，在網站上有數百萬的活躍安裝。
經典編輯器允許您為每個用戶設置默認編輯器，允許用戶選擇一個編輯器，並附帶一些附加功能以簡化操作。
這在技術上並不是禁用古騰堡，而是隱藏它，但實際結果是一樣的。或者，從另一種意義上說，安裝 Classic Editor 是明智的，因為它可以讓您使用任何您想要的編輯器，這比一直使用一個編輯器要好得多。
基於社區的替代方案使用 Disable Gutenberg 插件，它不如 Classic Editor 流行，但不依賴於官方支持。
這是完全禁用古騰堡或為特定頁面、帖子類型、角色或站點上的主題禁用它的直接而實用的方法。
要安裝任一插件，步驟很簡單：
- 登錄您的 WordPress 界面
- 在左側，選擇“插件”
- 在展開的插件屏幕上，選擇“新建”
- 在頂部的搜索字段中，輸入您想要的插件名稱
- 從結果中選擇您想要的插件，然後單擊“立即安裝”按鈕
- 完成後，點擊“激活插件”
通過編輯functions.php禁用古騰堡
最後，您可以修改站點上的functions.php 文件以直接禁用某些功能。
但是，如果操作不當，這最終可能會破壞您的網站，因此我們不建議臨時用戶使用此方法。安裝上面列出的插件之一既簡單又容易逆轉。
如果您想在沒有插件的情況下禁用 Gutenberg，並且您是 WordPress 代碼的初學者，您可以按照以下步驟操作。此方法為所有用戶禁用它。
- 登錄您的 WordPress 界面（您需要成為管理員）
- 在左側邊欄中找到“外觀”並將鼠標懸停在它上面
- 選擇“主題編輯器”
- 在右側的文件列表中，選擇“functions.php”
- 之前複製您的functions.php文件作為備份，以便在出現問題時可以恢復它
- 當編輯器彈出時，準確複製以下內容並粘貼到文件中： add_filter( 'use_block_editor_for_post', '__return_false' );
- 單擊下面的更新文件按鈕
了解更多：熱圖解釋 + 如何製作網站熱圖
WordPress 塊的常見類型
以下是基本 WordPress 編輯器中最常見的塊類型。
在古騰堡之前，大多數人直接對這些塊進行編碼，或者使用富文本編輯器的文本和圖像格式化工具，並根據需要重新排列代碼以調整頁面上的佈局。
段落
這是大多數人使用最多的塊。顧名思義，它專注於書面內容。
文本編輯器將每個段落轉換為一個塊，因此您可以在編寫它們後移動和重新排列它們。
圖片
圖像嵌入塊包含可以在頁面上移動的單個圖形。
這些帶有各種對齊選項，包括調整圖像大小甚至全寬，超出了主題的通常限制。
段落和圖像塊一起足以創建一個基本的網頁，所以其他一切最終都只是為了迭代和改進這些元素，遵循基本的視覺層次結構原則。
標題
標題塊包含超大文本以將頁面分成多個部分，並使用戶更容易找到內容。編輯器允許您根據需要調整標題大小、格式、超鏈接和其他元素。
WordPress 最多支持 6 個標題級別，包括頁面標題的 h1，但大多數人很少超過 h4。
畫廊
圖庫塊是基本圖像塊的高級版本，可讓您以預定佈局添加多張圖片。
當前編輯器最多支持八列圖像，以及頁面的調整大小、鏈接和其他格式選項。
列表
列出塊創建的編號或項目符號列表。
這本質上只是段落塊的應用，但是將列表分成自己的組件可以更容易地避免意外修改格式。
引用
引用塊是特殊格式的段落塊，有助於指出特別重要的內容。
大多數人使用這些來引用特定人的報價，但您也可以使用它們來提供評論或以其他方式突出重要信息。
聲音的
音頻塊在網站上相對較少，但 WordPress 仍然支持它們。
這些允許您添加任何音頻文件，包括自動播放音頻或循環播放等功能。
請記住，大多數用戶不喜歡自動播放的音頻，除非他們希望發生這種情況，因此請盡量避免讓訪問者感到意外的噪音。
覆蓋
封面塊是一種更高級的格式化元素。此塊可讓您選擇可以覆蓋在頁面上的圖像或視頻，有時還包括文本。
這種媒體可以漂浮在背景中，重複，或者作為一個即時的關注點。
WordPress 支持在疊加層上不透明或完全透明，但建議使用適度的數量以確保您的文本易於閱讀。
文件
文件塊可讓您提供指向網站上文件的直接鏈接，以便訪問者可以下載它們。
您幾乎可以將任何類型的文件上傳到您的站點，但如果您嘗試上傳太大的文件或為您的計劃獲得太多下載，您的託管服務提供商可能會遇到問題。
這是 Web 開發相互關聯的一個很好的例子。
如果您只讓人們下載基本的文本文件，但在添加任何其他文件之前與您的網站主機交談，您可能不會違反限制。他們可以告訴您計劃中允許的內容或根據需要建議替代方案。
視頻
視頻塊讓您可以將多媒體內容添加到您的網站，方法是直接上傳或鏈接其他網站上的內容。
視頻文件往往非常大，因此如果您想在您的網站上擁有這些文件，通常需要一個好的託管計劃。
在外部託管，例如通過 YouTube 和使用 YouTube 嵌入， 容易得多。 Gutenberg 會根據需要自動將一些視頻鏈接轉換為不同類型的塊。
如何使用 WordPress 塊
有多種方法可以在 Gutenberg 編輯器中添加塊。您可以直接從頂部圖標欄添加它們，或者單擊插入器按鈕。
此按鈕看起來像一個帶有加號的圓圈，可讓您單擊要添加的塊類型。
塊出現在頁面上後，您可以通過單擊塊左側的箭頭來上下移動它們。或者，您可以單擊六個點的網格並按住鼠標按鈕，然後將塊拖動到您想要的位置。
要編輯塊，只需單擊它們的空間。這將自動打開塊信息並讓您根據需要調整組件。
您可以使用相同的功能來更改塊的類型。控制面板中的箭頭可用於展開或關閉編輯器的各個部分，而 X 按鈕可讓您關閉塊編輯器並專注於其他內容。
WordPress 塊和小部件之間的區別
塊主要是網頁內容，包括文本和媒體，如圖像和音頻。那麼，什麼是 WordPress 小部件，它與塊有何不同？
相比之下，WordPress 小部件是您可以放置在側邊欄和頁腳等特殊區域的內容。 Gutenberg 編輯器主要避免這些區域，儘管您可以通過添加代碼塊在主要內容中包含類似小部件的內容。
當頁面編輯器打開時，塊界面通常位於屏幕的右側。小部件編輯器可通過外觀 > 定制器區域和管理菜單使用。
小部件通常出現在網站的每個頁面上，因此您無法從可以編輯塊的同一位置編輯它們。
創建可重用的 WordPress 塊模板
WordPress 允許您創建可重複使用的塊模板。
這對於在您的網站上擁有一致的品牌和設計非常有用，而無需每次都重新創建精確的佈局。如果您使用 Vectornator 或 Adobe Illustrator 等軟件來創建高級矢量圖形和佈局，這將特別有用。
創建模板本身很簡單。您需要做的就是選擇塊，單擊出現的工具欄中的三個點，然後單擊添加到可重用塊。
從那裡，您可以將其重命名為易於記憶的名稱，然後重新開始處理頁面。
塊模板可以簡化徽標、圖形設計軟件中製作的自定義按鈕、設計元素以及網站品牌中使用的任何內容。
該模板將允許您輕鬆地將元素添加到您想要的任何位置，而無需在每次要使用它時重做某個品牌元素或佈局。
關於 WordPress 塊的最終想法
雖然 WordPress 塊並不適合所有人，但它們是以直觀、用戶友好的方式創建頁面和排列內容的強大起點。
然而，僅僅閱讀塊並不足以掌握它們的使用。
相反，現在轉到您的 WordPress 網站並開始在一頁上播放。通過進行一些實踐練習，您將能夠掌握它們的使用並開始在您的站點上創建高級佈局。
就像騎自行車一樣，一旦您學習 WordPress 塊就很難忘記它們，並且可以幫助您創建幾乎所有標準的頁面設計。