撰寫及編輯

WordPress 編輯器:使用區塊

WordPress 編輯器是用來在網站上建立頁面和文章的工具。使用方法如下!

目錄

WordPress 區塊編輯器
WordPress 區塊編輯器

你可以使用 WordPress 區塊編輯器建立多媒體頁面和文章,並輕鬆掌控版面配置。在區塊編輯器中,文章和頁面中的每個元素,都有自己的區塊;你只需專心創作網站內容就好,無須擔心如何對齊和整理文字、引文及圖片。

移動、編輯和自訂個別區塊時,編輯器會以網站實際上的外觀來顯示視覺化元素,無需像過去一樣,在按下「發佈」按鈕之前,得先利用預覽功能重複確認內容,因此能節省你的時間。

如果你的編輯器看起來與本指南所述不同,請查看不同編輯器的實用資訊

區塊

WordPress 區塊編輯器最大的改變,就是將過去的單一文件,改變成為若干個明確、能輕易調整結構的獨立元素的組合。

區塊編輯器可讓你輕鬆建立頁面和文章;你可以快速新增多種不同用途的區塊,例如自訂媒體和視覺化元素;無須像過去一樣使用短代碼、自訂 HTML 程式碼和嵌入元件。


新增區塊

有多種區塊類型可供你選用。這些不同功能的區塊,係依照其類型與最近使用狀況來整理排列;你可以編輯或移動個別區塊,不會影響其他區塊。個別區塊會有其各自的格式設定與功能選項,使用起來非常靈活,調整版面也變得輕而易舉。

新增區塊
新增區塊

你可以透過多種方式來新增區塊,並且選擇所需的區塊類型。

  1. 按一下任何空白區塊旁邊的黑色 + 圖示。
  2. 按一下編輯器左上角的藍色 + 圖示。
  3. 在所選區塊中點擊 Enter/Return 鍵即可在下方建立新區塊。
  4. 按一下現有區塊頂端中間的黑色 + 圖示,即可在上方新增區塊。
  5. 按一下所選區塊上方的三個點,並選擇在目前區塊的上方或下方新增區塊。

預設的區塊類型是「段落」。段落通常用於輸入一般文字;你可以使用 + 按鈕選擇其他區塊類型,也可以輸入斜線和區塊名稱來搜尋想要使用的區塊類型,例如 /image 可以快速找到「圖片」區塊; /heading 可以快速切換到「標題」區塊。

新增區塊的快速鍵
新增區塊的快速鍵

查看最常用的區塊

如果你會重複使用很多相同的區塊,可以設定將最常用的區塊顯示於區塊庫最上方,以方便取用:

最常用的區塊類別
最常用的區塊類別

若要啟用最常用的區塊類別,請依照以下步驟操作:

  1. 按一下編輯器畫面右上角的垂直三點圖示。
  2. 選擇「選項」
  3. 勾選「在區塊庫中啟用最常用的區塊類別」旁的方塊:
啟用最常用的區塊選項
啟用最常用的區塊選項

移動區塊

將游標移到工具列左側,按住區塊工具列出現的控點即可拖放區塊。你也可以使用向上鍵、向下鍵將區塊朝所需方向移動。

移動區塊
移動區塊

設定區塊

每個區塊都有其各自的設定。如要進行區塊設定,請按一下區塊內部區域,區塊的頂端就會出現工具列;編輯器右邊的側邊欄也會顯示本區塊的其他設定選項。

各種區塊工具列的範例

段落區塊工具列
段落區塊工具列
圖片區塊工具列
圖片區塊工具列
清單區塊工具列
清單區塊工具列

區塊設定 – 工具列

按一下區塊工具列右側的三個點,可開啟大部分區塊都有的其他選項。

  1. 「隱藏區塊設定」會關閉設定選單。
  2. 「複製」會在同一頁面上新增一個含有相同內容的新區塊。
  3. 「在前面/後面插入」會在目前的區塊前面或後面新增區塊。
  4. 「以 HTML 編輯」會將區塊切換為 HTML 版本,讓你可以直接編輯 HTML。以 HTML 編輯時,此選項會變更為「以視覺化方式編輯」。
  5. 「新增至可重複使用的區塊」可讓你新增一個可在其他頁面使用的區塊,讓你保留區塊的內容和樣式。進一步了解
  6. 「移除區塊」會從頁面/文章中刪除區塊。
其他區塊工具列選項
其他區塊工具列選項

以 HTML 方式編輯時,並非所有程式碼均可運作。如果你的程式碼格式正確且沒有錯誤,請確認你使用的 HTML 標籤名列於可使用的 HTML 標籤清單中,而且並非屬於如 JavaScript 等禁止使用的程式碼

區塊設定 – 側邊欄

編輯器右側的區塊設定,會依你目前使用的區塊,顯示不同的選項。

在右側的螢幕截圖中,使用中的區塊是「段落」,所以這裡的選項包括變更字型大小、選用字型和背景色彩等;也有建立頁面跳轉或新增 CSS 類別的進階選項。

如果沒有在編輯器右側看到「區塊」設定,請在「發佈/更新」按鈕旁邊按一下 ⚙️ 設定圖示(齒輪形狀),以展開側邊欄選單。

頁面設定 - 側邊欄
頁面設定 – 側邊欄
區塊設定 - 側邊欄
側邊欄中的「區塊設定」包含編輯中區塊適用的其他選項。

變更區塊類型

想變更區塊類型,該如何操作?沒問題!個別區塊可以轉換成其他相似或相關的區塊類型;例如段落區塊可變更為標題、清單或引文區塊。

變更區塊類型
變更區塊類型

區塊導覽

有些區塊是以巢狀結構存在於其他區塊(稱為「上層」區塊)內,因此你需要簡單的方法來選擇上層區塊。若要選擇上層區塊,請將滑鼠指標移到區塊工具列最左側的圖示上,如下方螢幕截圖所示:

上層區塊選取器

如果你的內容欄區塊內含一些文字,而你需要選擇整個內容欄區塊,又或者你的按鈕區塊內有多個按鈕,而你需要選擇整個按鈕區塊,上層區塊選取器就很實用。

或者,你也可以使用區塊導覽

區塊導覽是一份下拉式清單,內容列出你在頁面或文章中插入的所有區塊,讓你能夠輕鬆查看頁面結構,並選擇要處理的現有區塊。


若要存取區塊導覽工具,請按一下三條線的小項目符號清單圖示,位於編輯器左上角內容結構(資訊圖示)後方。

區塊導覽可特別用於選取不好找的區塊,例如內容欄區塊內的單一內容欄或群組區塊中的某一區塊:

使用區塊導覽工具,即可直接跳到頁面上的任何區塊加以編輯。
使用區塊導覽工具,即可直接跳到頁面上的任何區塊加以編輯。

移除區塊

如要移除區塊,請選取區塊並按一下上方工具列中的三個點。你會在設定中看到移除區塊的選項。

移除區塊
移除區塊

文件設定

區塊編輯器右側有「文件設定」選單,你可以用來新增標籤類別、選擇特色圖片、查看並變更文章的狀態等等,這些選項皆可套用到整個頁面或文章中。

在「文件設定」中,按一下每個標題旁的向下箭頭,即可編輯這些特定選項。

WordPress 編輯器 - 文件設定
文件設定

如果區塊編輯器右側未出現「文件設定」,請按一下右上角的齒輪設定圖示 ⚙️ 來開啟「文件設定」。 

WordPress 編輯器 - 設定

區塊圖樣

區塊圖樣是一組可插入文章和頁面的預先定義區塊。例如:能夠插入三張並排圖片的區塊圖樣。若要插入區塊圖樣:

  1. 按一下 + 圖示新增一個新的區塊。
  2. 按一下「圖樣」分頁。
  3. 按一下要插入的圖樣,該圖樣就會插入文件中游標所在位置。

如需更多資訊,請參閱我們的區塊圖樣指南


更多選項

按下「設定」圖示右側的三個點,即可依照個人喜好來自訂編輯界面。

檢視

編輯內容時,選擇區塊工具列出現的位置。

編輯器

預設編輯器是視覺化編輯器;切換到程式碼編輯器,即可以 HTML 程式碼檢視整個頁面。

以 HTML 方式編輯時,並非所有程式碼均可運作。如果你的程式碼格式正確且沒有錯誤,請確認你使用的 HTML 標籤名列於可使用的 HTML 標籤清單中,而且並非屬於如 JavaScript 等禁止使用的程式碼

工具

管理現有可重複使用的區塊、複製所有內容並貼至另一個頁面,或查詢鍵盤快速鍵的使用方法。

選項

選擇顯示在側邊欄中的文件設定。

更多選項

常見問題

如何在 WordPress 編輯器中編輯 HTML?

如果要建立自己的 HTML 程式碼,可以新增自訂 HTML 區塊

此處提供在 WordPress 編輯器中編輯 HTML 程式碼的其他選項。

以 HTML 方式編輯時,並非所有程式碼均可運作。如果你的程式碼格式正確且沒有錯誤,請確認你使用的 HTML 標籤名列於可使用的 HTML 標籤清單中,而且並非 JavaScript 等禁止使用的程式碼

我現有的內容看起來是什麼樣子?

如果你已從傳統編輯器切換到區塊編輯器,目前內容外觀應與之前相同。如果你在新版編輯器中編輯現有的文章或頁面,所有內容都會放置於「傳統區塊」中,與先前版本的編輯器處理方式一樣。如需深入了解如何轉換為區塊編輯器,請參閱此處。

為什麼編輯器中的內容與網站實際呈現不同?

你可能會發現編輯器中的內容與網站實際呈現有些許不同,主要是因為佈景主題顯示不同視覺化元素的方式有所差異。部分佈景主題會包含樣式,讓編輯器的內容與網站前端更相似,其他佈景主題則不然。例如,如果你的佈景主題包含側邊欄,你不會在編輯器中看到側邊欄,因為這可能會影響網站前端的內容寬度。

為什麼我其中一個網站可以使用某些設定,另一個網站卻無法使用?

如果你的網站擁有 WordPress.com 商用版方案,你可以透過外掛程式將自訂區塊新增到你的編輯器中。如果另一個網站沒有這個外掛程式,便無法使用這些設定。

你的佈景主題需要支援某些區塊設定 (「寬」或「全寬」)。雖然不同網站上會顯示相同的區塊,但可套用到這些區塊的特定設定,可能會因為你啟用的不同佈景主題而有些許差異。

我仍可使用舊版編輯器嗎?
我仍可以使用短代碼嗎?

可以。編輯器含有短代碼區塊,與之前的短代碼使用方式相同。未來將會有更多短代碼成為獨立區塊。

這個編輯器是否容易使用?

我們的目標是盡可能讓 WordPress 編輯器與之前的編輯器同樣容易使用,讓所有人都能使用此編輯器。WordPress 無障礙編碼標準中說明「WordPress 推出的所有新版或更新版程式碼須符合 WCAG 2.0 指南的 AA 等級。」。此編輯器也不例外。如果你遇到使用上的問題,請與我們聯絡

我是否需要在新版編輯器中使用特定佈景主題?

不需要。新版區塊編輯器可搭配所有佈景主題使用。不過,只有部分佈景主題支援特定版面配置功能 (例如「寬」和「全寬」內容)。

哪裡可查閱鍵盤快速鍵的完整清單?

你可以在 WordPress 手冊中取得完整鍵盤快速鍵。

如何查看字數統計和拼字檢查?

若要查看頁面或文章字數,請在畫面左上方按一下資訊圖示 (英文字母 i 包在一個圓圈裡)。此選項只會顯示於桌上型電腦上,行動裝置不會顯示。

現在所有新式瀏覽器預設皆內建拼字檢查功能,所以我們沒有額外提供拼字與文法檢查。你可以使用瀏覽器內建的拼字檢查功能,修正文章中的拼字錯誤。

本指南是否實用?歡迎針對本指南提供意見回饋。

Not quite what you're looking for?

取得說明