如何使用WordPress編輯器

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

什麼是WordPress編輯器?

從技術上講,您可以選擇三種WordPress編輯器。隨著WordPress 5.0的發布,編輯器從當時的默認設置更改為 TinyMCE 到今天的塊編輯器。在這種變化中, 古騰堡編輯器插件 在成為WordPress核心之前,發布了它作為Beta版測試塊編輯器新功能的橋樑。

從5.0開始,「塊編輯器」在WP中是默認設置,但您可以選擇使用所需的三個。您可以安裝 經典編輯器插件 保持TinyMCE的舊 古騰堡插件 在編輯器中保留最新功能(儘管可能會不穩定),或者可以保留默認的塊編輯器。

考慮到使用默認編輯器以外的任何步驟都將涉及額外的步驟(以及古騰堡插件固有的不穩定性和不斷變化的性質),在本文中,我們將只關注默認的塊編輯器。但是,您應該注意,Gutenberg的基本原理相同,Classic Editor插件中包含的TinyMCE與任何給定的富文本編輯器或文字處理軟體都具有基本的功能對等-更不用說我們討論的任何特定於WP的功能結束,通常只在美學上有所不同,而在功能上卻不一樣。

綜上所述,讓我們學習如何使用WordPress編輯器。

WordPress編輯器的基礎

每當您創建頁面或帖子(或自定義帖子類型)時,都將使用「塊編輯器」。您將獲得打開它的教程模式,並通過閱讀其中提供的4張幻燈片來學習基礎知識。關閉它,您可以看到基本編輯器。

如何使用wordpress編輯器如何使用WordPress編輯器

基本的WordPress區塊編輯器包含5個元素。各種插件可以添加更多功能,但是這些插件提供了您日復一日使用的基本功能。

如何使用wordpress編輯器1如何使用WordPress編輯器

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

下面,我們將引導您詳細了解這些領域以及如何使用它們來創建最佳內容。

什麼是方塊?

您已經看到我們已經在這篇文章中提到了Blocks,但是它們到底是什麼?塊是頁面或帖子的單個可定製元素。它可以是單個段落,列表,圖像或畫廊。您可以根據需要隨意移動和調整這些塊,分別進行自定義,並以一種所見即所得的編輯器無法做到的方式,對內容進行精細控制。 (如果您是 迪維 用戶,您已經熟悉該概念,因為我們的模塊以相同的方式工作。)

如何使用wordpress編輯器2如何使用WordPress編輯器

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

如何創建一組塊

一組塊是您設置為充當單個塊的塊的集合。您可以移動它們並對其進行樣式設置,就好像它們是一個單元一樣,但是「組」由多個元素組成。

如何使用wordpress編輯器3如何使用WordPress編輯器

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

如果需要取消分組,只需單擊三點下拉按鈕,然後選擇取消分組。

如何使用wordpress編輯器4如何使用WordPress編輯器

這些塊現在將再次充當個人。

什麼是可重用塊?

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

如何使用wordpress編輯器5如何使用WordPress編輯器

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

標題欄

如何使用wordpress編輯器6如何使用WordPress編輯器

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

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

塊/內容區

如何使用wordpress編輯器7如何使用WordPress編輯器

從根本上講,您可以考慮將內容區域鍵入。如果需要,您可以開始打字,寫出整篇文章,甚至根本不用考慮塊。在所有主要方面,這都取代了TinyMCE的簡單WYSIWYG區域,這是WordPress編輯器以來的最大變化。

但是,使用「塊編輯器」,您可以做更多的事情。每次您單擊「輸入」或「返回」時,都將添加一個新的段落塊。要添加其他類型的塊(任何類型),請單擊圓圈中的+,您將獲得每個可用塊的下拉列表。請確保滾動,因為它們也設置在不同的類別中。如果知道所需的塊,也可以搜索特定的塊。

如何使用wordpress編輯器8如何使用WordPress編輯器

您可以添加YouTube視頻塊,圖像,圖庫,音頻播放器,列表,報價等等。它們每個都有自己的設置和樣式選項。另外,您使用的塊越多,WordPress編輯器就會將其識別為常用塊,並將其列出在「最常用」下,這樣您就不再需要滾動或搜索它。可重複使用的塊和塊組也可以顯示在「最常用」下。

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

如何使用wordpress編輯器9如何使用WordPress編輯器

但是,這些選項和設置與我們上面提到的屏幕右上角的「塊選項」選項卡不同,我們將在下面的下一部分中進行討論。

文檔大綱,字數統計和其他信息

在頁面頂部的工具欄中,您有一個圓圈。單擊它,將為您提供文檔組成的完整摘要。

如何使用wordpress編輯器10如何使用WordPress編輯器

只要您使用了標題欄,除字數,段落編號和塊數之外,您還將看到「文檔大綱」。如果沒有標題欄,則該部分將不存在。您可以單擊「文檔大綱」的任何元素,直接將其帶到該塊。在較長的文檔中,此功能非常重要。

如果單擊該標題旁邊的嵌套列表圖標,那麼也會看到該帖子中所有塊的有序列表,而不僅僅是大綱的標題。

如何使用wordpress編輯器11如何使用WordPress編輯器

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

阻止選項選項卡

在WordPress編輯器的右上角,您會看到一個標籤為Block的標籤。只要您選擇了一個塊,便會獲得針對該塊類型的上下文選項集。但是,您所做的任何更改將僅影響您選擇的單個塊。

如何使用wordpress編輯器12如何使用WordPress編輯器

例如,您可以在此選項卡中更改圖像的縮略圖大小,為段落添加彩色背景以創建警報,或調整標題中的字體大小。如果打開了「塊」選項卡,則選項將更改為所選的特定塊。如果突出顯示了「段落框」,則會看到此內容。

如何使用wordpress編輯器13如何使用WordPress編輯器

選擇一個圖像塊會將塊選項卡更改為此。

如何使用wordpress編輯器14如何使用WordPress編輯器

每個塊將具有您可以在其中調整的特定選項,這些選項僅適用於該類型的塊(並且僅在該特定塊中呈現)。但是,每個塊在選項卡中都有一個「高級」部分,可讓您將CSS類應用於該塊。然後,您可以使用外部樣式表和代碼對樣式進行樣式調整。

文件選項標籤

「塊選項」選項卡左側是「文檔選項」選項卡。如果您過去曾經使用過WordPress,那麼您會很熟悉這些。在這裡,您將能夠調整帖子的類別,標籤,添加特色圖片,調整固定鏈接標籤,添加主題/ SEO使用摘錄以及啟用或禁用評論。

如何使用wordpress編輯器15如何使用WordPress編輯器

這些部分中的每個部分與TinyMCE所見即所得編輯器中的位置和內容幾乎相同。它們適用於整個帖子或頁面,而不適用於單個塊或整個網站。此外,如上圖所示, WP火箭 選項框。一些插件會將框應用於此區域,但是它們始終直接與文檔本身有關,而與內容或塊無關。

其他帖子元框

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

如何使用wordpress編輯器16如何使用WordPress編輯器

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

WordPress編輯器選項下拉菜單

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

如何使用wordpress編輯器17如何使用WordPress編輯器

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

但是,一些最常用的選項位於最頂端。特別是頂部工具欄,全屏模式和可視/代碼編輯器模式的切換。

頂部工具欄切換意味著,如上所述,不是將選定塊的選項顯示為該塊左上角附近的上下文菜單,而是將其置於屏幕頂部的固定區域中。

如何使用wordpress編輯器18如何使用WordPress編輯器

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

如何使用wordpress編輯器19如何使用WordPress編輯器

可視/代碼編輯器切換的功能與TinyMCE編輯器中的切換完全相同。到目前為止,本文中的示例均使用Visual Editor。也就是說,您在撰寫文章時會看到其視覺效果。您將獲得要按下的按鈕,上下文菜單以及更改設置的實時呈現。但是,代碼編輯器就是這樣-代碼。您將有一個簡單的文本框,在其中可以用純文本和HTML編寫。

如何使用wordpress編輯器20如何使用WordPress編輯器如何使用wordpress編輯器21如何使用WordPress編輯器

通常這樣做是為了排除編輯器問題或微調單個區域或塊。或者粘貼在外部編輯器中編寫的內容,這些內容無法在多個塊中正確設置格式。

塊編輯器使用特定的HTML標記來告訴WordPress呈現哪種類型的塊,因此請確保保留任何看起來像 完整。否則,事情會變得很混亂。

全球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
  • 刪除多個選定的塊-刪除或退格
  • 添加新段落後更改塊類型– /

文字捷徑

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

總結

在過去的十年中,WordPress編輯器已經走了很長一段路,目前的塊編輯器絕對強大,足以帶領我們完成下一個。藉助對頁面上每個元素的精細控制,您可以比以前更快,更輕鬆,更有效地創建內容。但是,如果當前的塊編輯器不適合您,則 經典編輯器 插件存在,如果您是最先進的, 古騰堡插件 與WordPress核心中的默認編輯器相比,發布的版本要少一些。因此,無論您以哪種方式創建,WordPress都能滿足您的要求。

想獲得有關WordPress編輯器的任何提示和技巧?讓我們在評論中知道!

資源

相關文章