如何使用 WordPress 編輯器

作為 CMS 的 WordPress 具有一組令人難以置信的強大功能。 插件和小部件將人們吸引到平台上，但一旦進入，真正的力量來自 WordPress 編輯器本身。 無論您對平台的目標是什麼，您都將主要使用帖子/頁面編輯器。 因此，我們想向您展示如何最大程度地使用 WordPress 編輯器，以便您的內容大放異彩，您的網站蓬勃發展。

訂閱我們的 YouTube 頻道

什麼是 WordPress 編輯器？

從技術上講，您可以選擇三種 WordPress 編輯器。 隨著 WordPress 5.0 的發布，編輯器從當時默認的 TinyMCE 更改為我們今天擁有的塊編輯器。 在這一變化中，Gutenberg 編輯器插件被發布，作為在進入 WordPress Core 之前對 Block Editor 的新功能進行 Beta 測試的橋樑。

雖然塊編輯器在 WP 5.0 中是默認的，但您可以選擇使用您想要的三個中的任何一個。 您可以安裝 Classic Editor 插件以保留舊的 TinyMCE，安裝 Gutenberg 插件以保留編輯器中的最新功能（儘管可能不穩定），或者您可以保留默認的塊編輯器。

鑑於使用默認編輯器以外的任何東西都涉及額外的步驟（以及 Gutenberg 插件固有的不穩定性和不斷變化的性質），我們將在這篇文章中只關注默認的塊編輯器。 但是，您應該注意，基本原理與 Gutenberg 相同，並且 Classic Editor 插件中包含的 TinyMCE 具有與任何給定的富文本編輯器或文字處理軟件相同的基本功能——更不用說我們討論的任何 WP 特定功能了結束，通常僅在美學上有所不同，而不是功能。

說了這麼多，讓我們學習如何使用 WordPress 編輯器。

WordPress 編輯器的基礎知識

無論何時創建頁面或帖子（或自定義帖子類型），您都將使用塊編輯器。 您會看到一個打開它的教程模式，您可以通過它提供的 4 張幻燈片來學習基礎知識。 關閉它，你可以看到基本的編輯器。

基本的 WordPress 塊編輯器由 5 個元素組成。 各種插件可以添加更多內容，但這些提供了您日復一日使用的基本功能。

1. 標題欄 - 您在此處輸入的任何內容都將顯示為帖子/頁面的主要 H1 標籤。
2. 塊/內容區域- 這是您將添加構成帖子或頁面內容的各種塊的區域。
3. 添加塊按鈕– 任何時候在圓圈中看到+ ，您都可以單擊它以添加新塊。 將出現一個下拉列表，您可以從中選擇要插入的類型。 它們的功能完全相同，因此無論您單擊塊右側、塊下方或屏幕角落中的一個，您都會獲得相同的選項。
4. 文檔選項選項卡– 在此選項卡下，您可以找到類別、標籤、固定鏈接、評論開/關切換等所有內容。 插件可能會在此處添加選項，但它們始終適用於整個頁面或帖子本身。
5. 塊選項選項卡- 此選項卡處理您突出顯示的任何塊的選項。 如果單擊段落塊，則可以單獨編輯該塊的選項。 沒有其他塊，也沒有文件本身改變。

下面，我們將帶您了解這些領域的具體細節，以及如何使用它們來創建盡可能最好的內容。

什麼是塊？

您已經看到我們在這篇文章中提到了 Blocks，但它們到底是什麼？ 塊是頁面或帖子的單個可自定義元素。 它可以是單個段落、列表、圖像或圖庫。 這些塊可以隨意移動和調整，單獨定制，並以所見即所得編輯器根本無法實現的方式讓您對內容進行精細控制。 （如果您是 Divi 用戶，您已經熟悉這個概念，因為我們的模塊以相同的方式工作。）

正如您在上面看到的，頁面的每個元素都包含在自己的塊中。 您可以在 WordPress 支持文檔中查看 WordPress 塊的完整列表。

如何創建一組塊

A Group of Blocks 是您設置為用作單個塊的塊的集合。 您可以移動它們並設置它們的樣式，就好像它們是一個單獨的單元一樣，但 Group 由多個元素組成。

創建組很容易。 您只需單擊一個塊，然後按住 Shift 或 CTRL 並單擊另一個。 如果要將帖子中的所有塊分組，可以按 CTRL/CMD – A 全選。 然後當您看到左上角的圖標變為由小塊組成的正方形時，您可以單擊它並選擇Transform to Group 。

如果您需要取消組合它們，只需單擊三點下拉按鈕並選擇取消組合。

這些塊現在將再次作為個體發揮作用。

什麼是可重用塊？

您可以從設置菜單將任何塊從一次性塊轉換為可重用塊。 可重用塊不是模板，而是站點的全局塊。 您創建一個塊或一組塊，然後單擊添加到可重用塊。

對該可重用塊所做的任何更改或編輯隨後會反映在整個站點中，更改塊的每個實例，而不僅僅是您編輯的實例。 我們有可重用塊的完整指南，您可以查看有關該主題的更多信息。

標題欄

如上所示的標題塊是您的帖子或頁面的主要 H1 標籤。 它還會為帖子生成永久鏈接 slug，但是一旦您至少保存了一次帖子，就可以對其進行編輯。 這也將是.post-title和.entry-title等 CSS 選擇器的來源。 （但是，您的 SEO 插件允許您設置在搜索引擎中顯示的內容。）

這是 WordPress 編輯器中無法刪除或重新定位的一個塊。 您必須使用 CSS 或外部頁面構建器設置來調整更多。

塊/內容區域

從根本上說，您可以將內容區域視為您鍵入的位置。 如果你願意，你可以開始打字，寫出整篇文章，甚至根本不需要考慮塊。 在所有主要方面，這取代了 TinyMCE 的簡單 WYSIWYG 區域，並且是 WordPress 編輯器的最大變化，因為……嗯……永遠。

但是，使用塊編輯器，您可以做的遠不止這些。 每次點擊“輸入”或“返回”時，您都會添加一個新的段落塊。 要添加不同類型的塊（任何類型），請單擊圓圈中的+ ，您將獲得每個可用塊的下拉列表。 一定要滾動，因為它們也設置在不同的類別中。 如果您知道自己想要什麼類型，也可以搜索特定塊。

您可以添加 YouTube 視頻塊、圖像、畫廊、音頻播放器、列表、引用等等。 他們每個人都有自己的設置和样式選項。 此外，您使用塊的次數越多，WordPress 編輯器就會將其識別為常用塊並將其列在最常用的下，這樣您就不必再滾動或搜索它了。 可重用塊和塊組也可以出現在最常用下。

如果您查看本節中的圖像，則(1)指向選擇每個塊時為每個塊獲得的重新排序按鈕（只需單擊它即可選擇）。 (2)指向下拉菜單，可讓您刪除塊以及將其內容編輯為 HTML、克隆它或在其周圍添加新塊。

但是，這些選項和設置不同於我們上面提到的屏幕右上角的“阻止選項”選項卡，並在下面的下一節中討論。

文檔大綱、字數和其他信息

在頁面的頂部工具欄中，您有一個圓圈中的i 。 單擊它，您將看到文檔組成的完整概要。

只要您使用了標題塊，除了字數、段落數和塊數之外，您還會出現文檔大綱。 如果您沒有標題塊，則該部分將不存在。 您可以單擊“文檔大綱”的任何元素以直接轉到該塊。 此功能在較長的文檔中非常寶貴。

如果您單擊旁邊的嵌套列表圖標，您還會看到帖子中所有塊的有序列表，而不僅僅是大綱的標題。

同樣，您可以單擊列表中的任何內容直接導航到並選擇該塊。

塊選項選項卡

在 WordPress 編輯器的右上角，您將看到一個名為Block的選項卡。 只要您選擇了一個塊，您就會獲得該塊類型的一組上下文選項。 但是，您所做的任何更改只會影響您選擇的單個塊。

例如，您可以在此選項卡中更改圖像的縮略圖大小、為段落添加顏色背景以創建警報或調整標題中的字體大小。 如果您打開了“塊”選項卡，選項將更改為您選擇的特定塊。 如果您突出顯示了段落塊，您將看到這一點。

選擇圖像塊會將“塊”選項卡更改為此。

每個塊都有特定的選項，您可以在其中調整這些選項，這些選項僅適用於該類型的塊（並且只會在該特定塊中呈現）。 但是，每個塊在選項卡中都有一個高級部分，可讓您將 CSS 類應用於該塊。 然後，您可以使用外部樣式表和代碼按照您認為合適的方式設置它們的樣式。

文檔選項選項卡

塊選項選項卡的左側是文檔選項選項卡。 如果您過去使用過 WordPress，這些對您來說會很熟悉。 在這裡，您將能夠調整帖子的類別、標籤、添加特色圖片、調整永久鏈接、添加主題/搜索引擎優化使用的摘錄，以及啟用或禁用評論。

這些部分中的每一個都與它們在 TinyMCE WYSIWYG 編輯器中的位置和內容幾乎相同。 它們適用於整個帖子或頁面，而不適用於單個塊或整個站點。 此外，如您在上圖中所見，還有一個 WP Rocket Options 框。 一些插件會將框應用到這個區域，但它們總是直接與文檔本身有關，而不是內容或塊。

額外的 Post Metaboxes

帖子的元框是插件將為內容本身添加新選項和功能的地方。 它們出現在內容區域的最末端，塊下方。

本節中出現的內容（如果有）將取決於您安裝的插件（或可能使用該區域的任何主題功能）。 SEO 插件充分利用了這一領域，以及其他任何可以讓您以某種方式與頁面內容而不是文檔詳細信息進行交互的內容。

WordPress 編輯器選項下拉菜單

如果您單擊屏幕右上角的三點下拉圖標，則會出現一個大的垂直下拉菜單。 您可以在此處調整許多設置，所有這些設置都適用於編輯器本身，而不是文檔、塊或內容。

在大多數情況下，它們是相當簡單的選項，例如管理您的可重用塊或提供鍵盤快捷鍵列表或重新打開我們在開頭提到的歡迎指南。

然而，一些最常用的選項接近頂部。 特別是Top Toolbar 、 Fullscreen Mode和Visual/Code Editor模式的切換。

頂部工具欄切換意味著，正如我們上面提到的，所選塊的選項不會顯示為塊左上角附近的上下文菜單，而是位於屏幕頂部的固定區域。

全屏模式可打開或關閉 WordPress 管理儀表板。 如果您禁用全屏模式，您將看到左側邊欄，其中包括典型的儀表板選項，例如帖子、頁面、外觀、設置、工具等。

可視化/代碼編輯器切換的工作方式與 TinyMCE 編輯器完全相同。 到目前為止，本文中的示例都是使用可視化編輯器的。 也就是說，您在撰寫帖子時會看到帖子的視覺表示。 當您更改設置時，您可以獲得要按下的按鈕、上下文菜單和實時渲染設置。 然而，代碼編輯器就是這樣——代碼。 您將擁有一個簡單的文本框，您可以在其中使用純文本和 HTML 進行書寫。

這樣做通常是為了解決編輯器的問題或微調單個區域或塊。 或者可能粘貼在外部編輯器中編寫的內容，該編輯器不會在多個塊中正確格式化。

塊編輯器使用特定的 HTML 標籤來告訴 WordPress 要呈現什麼樣的塊，因此請確保保持任何看起來像<!– wp:paragraph –> 的代碼完整無缺。 否則，事情會變得非常混亂。

全局 WordPress 塊編輯器快捷方式

塊編輯器也帶有自己的一組漂亮的快捷方式。 它們與 TinyMCE 並不完全相同，但它們同樣有用且同樣重要。 從經驗上講，將最有用的內容記入內存將為您節省大量時間和麻煩。 您可以按Shift+Alt+H以在 WordPress 編輯器本身中顯示以下快捷方式列表。

文檔快捷方式

• 在可視化編輯器和代碼編輯器之間切換 – Ctrl+Shift+Alt+M
• 打開塊導航菜單 – Shift+Alt+O
• 顯示或隱藏設置側邊欄 – Ctrl+Shift+，
• 導航到編輯器的下一部分 – Ctrl+`或Shift+Alt+N
• 導航到編輯器的上一部分 – Ctrl+Shift+`或Shift+Alt+P
• 轉到最近的工具欄 – Alt+F10
• 保存更改 – Ctrl+S
• 撤消上次更改 – Ctrl+Z
• 重做上次撤消 – Ctrl+Shift+Z

選擇快捷鍵

• 鍵入時選擇所有文本。 再次按下選擇所有塊 – Ctrl+A
• 清除選擇 – ESC

塊快捷方式

• 複製選定的塊 – Ctrl+Shift+D
• 刪除選定的塊 – Shift+Alt+Z
• 在所選塊之前插入一個新塊 – Ctrl+Alt+T
• 在所選塊之後插入一個新塊 – Ctrl+Alt+Y
• 刪除多個選定的塊 - del或退格
• 添加新段落後更改塊類型 - /

文本快捷方式

• 使所選文本加粗 – Ctrl+B
• 將所選文本設為斜體 – Ctrl+I
• 將所選文本轉換為鏈接 – Ctrl+K
• 刪除鏈接 – Ctrl+Shift+K
• 給所選文本加下劃線 – Ctrl+U

包起來

WordPress 編輯器在過去十年中取得了長足的進步，當前的塊編輯器絕對強大到足以讓我們完成下一個。 憑藉精細控制頁面上每個元素的能力，您可以比以前更快、更輕鬆、更高效地創建內容。 但是，如果當前的塊編輯器不適合您，則存在經典編輯器插件，如果您想走在最前沿，Gutenberg 插件會比 WordPress 核心中的默認編輯器提前幾個版本。 因此，無論您喜歡哪種創建方式，WordPress 都能滿足您的需求。

您有任何關於 WordPress 編輯器的提示和技巧要分享嗎？ 讓我們在評論中知道！