WordPress文章排版教學 - 區塊編輯器新手基礎介紹

在 WordPress 網站後台的文章分頁按下 [新增文章]，就可以進入文章編輯介面，直接開始創造內容。

但這個介面在做文章排版時有相當多應該留心的操作，比方說段落與標題的使用、行距的調整等等，沒處理好的話搜尋引擎有可能會不太喜歡你，降低你的排名喔！

本篇將介紹這個區塊編輯器的使用方法以及常用區塊，讓你更加輕鬆順利地寫文章，訪客更容易看懂，搜尋引擎也喜歡。而如果你已經很熟悉這些基礎操作，想要提高效率、提高生產力，也可以改看區塊編輯器進階技巧。

YouTube 影音教學

區塊編輯器

各位在 WordPress 寫文章時，看到的這個介面就是所謂的區塊編輯器 (Block Editor)，這是一個相當好用的文章排版工具，文字、圖片、按鈕這些文章中的常見元素都各自佔據一格區塊，而我們要做的事都一樣，把這些區塊放置在正確的位置，創造出一篇好看好懂的文章。

古騰堡編輯器

或許各位在其他教學文章中有聽過古騰堡編輯器，或者 Gutenberg 這個詞，其實他們應該也是在講區塊編輯器沒錯，只不過那是前一代 WordPress 文章編輯器的講法了，現在已經正式更名為區塊編輯器 (Block Editor)，而所謂的 Gutenberg 則退居幕後作為先行測試版使用，一般人碰不太到。

他們的教學也是能看能參考，不過我當然會覺得各位就跟著這邊有跟上時代詞彙的教學做學習，與時俱進肯定是最好的囉！

傳統編輯器

傳統編輯器 (Classic Editor) 則是更久以前的 WordPress 的預設編輯器，沒記錯的話時間是在 2019 之前，介面更單純就是打字放圖片用的，但畢竟現在社群軟體盛行，傳統編輯器已不敷使用，像是如果要嵌入 YouTube 影片就來要改為 HTML 模式來做，這個對多數使用者來說反而是麻煩的。

區塊編輯器介面介紹

雖然 WordPress.com 也有做出這款文章排版工具的教學。但按照我的使用習慣，會把區塊編輯器分為三個部分，這樣更好懂一些，分別是：左上方功能區、右側控制區和中間內容區。

左上方功能區

這裡是寫文章一定會碰到的區域，按 + 號就可以新增各式區塊，旁邊也有很常見的復原按鈕；更右邊的三橫線圖示則是字數統計與整個文章架構檢視按鈕，這個要文章大篇一點之後才會凸顯它好用，一般的教學文我幾乎不會用到。點左上角黑色方格可以回到後台（黑色格子中會顯示網站 LOGO，我的剛好 LOGO 全黑）。

右側控制區

除了有存檔、預覽、發佈文章之外，最重要的是那個發佈旁的展開設定按鈕 (舊版會是齒輪圖示)，這裡控制多數的細項，比方說圖片想要調整大小、文字想要整個換顏色都是在這裡控制；而且文章發佈前也要來齒輪這裡做好整篇文章的全域設定，像是網址、分類、精選圖片等等。

中間內容區

這裡就是你表現的地方了！這裡可以新增各式區塊進來創造內容；而這裡預設是「段落」區塊，所以如果只是想要輸入文字的話，可以很直接的打上，不用到左上方功能區新增。

文章編輯流程

充實內容

一開始可以先大概輸入的標題（最後發佈前再定案即可），然後就可以到下方的內容區開始新增各種區塊，把你的想法整理出來。

新增區塊並進行文章排版設計

新增區塊後如果想要做一些簡單調整，像是移動位置、文字加粗、放連結之類的，區塊旁邊的功能列就可以處理（以下我會簡稱「旁邊功能」），那如果是比較細節的部份，則是要到右側控制區，一樣用文字做舉例的話就是可以改大小、行距。

然後記得定期存檔！

設定文章的全域資訊

內容都處理好後，回到上方把標題確定。接著到右側控制區，點選 [文章] 的分頁，對整篇文章做設定，像是精選圖片是什麼、網址要如何、要分類在哪，這些也是要花一些時間思考的。

發佈

發佈前你是可以按下預覽，先看看訪客實際看到的畫面長怎樣。因為多數情況都會有點跑版，所以也是要小修正一下就是了。確認沒問題之後再按發佈即可公開，訪客就可以看到了！也可以把這篇文章拿到 Google Search Console 提交，加速搜尋引擎的索引速度。

常用區塊介紹

接下來我按照我的使用習慣，介紹我一篇文章中最常用到的區塊們，也建議各位可以新增一篇文章當測試，一邊看教學一邊操作這些區塊看看，最後不要發佈直接刪除就好了。但畢竟我也不是所有區塊都有玩過，所以有部分我會跳過不介紹。

內容區

這裡主要是可以讓你表達想法用的「文字」類區塊。

段落

這是一篇文章中最常用到的區塊，理解成第一段、第二段、第三段、……大概就沒問題了。值得說明的是這個段落區塊不用來這裡新增，主要內容區預設就是了，隨便打幾個字就會自動幫你建立段落區塊，按下 Enter 換行會產生下一個段落區塊，非常方便。

段落可以把部分文字選起來，然後點旁邊的工具去加粗體換顏色，右邊齒輪則是可以整個段落區塊一起調顏色或大小。特別注意的是如果你是希望全部段落區塊的設定都想調整，比方說文字一起縮小、行距都變大之類的，請到佈景主題一次性修改，不要在這裡逐個修改。

標題

可以理解成章節、小節這類元素，負責對接下來的內容做一個重點提示；建立標題結構後，也可以順利使用內容目錄了。一般來說都先從預設的 [標題2] 開始，如果裡面再有一個小節的話，就再插入一個標題區塊，然後點旁邊的功能把它切換成 [標題3]，剩下依此類推。

這個標題也是大家常講的 H 標籤、Heading、標題元素，就是跟 SEO 息息相關的東西，但本篇不會對搜尋引擎最佳化有著墨。

清單

如果有多項目，這是很好用的功能，每個項目的間距會稍微近一些，提醒你這些項目彼此有關聯。旁邊的功能可以指定清單是要用黑點還是用數字。此外也可以讓項目往內縮。

引文 & 重要引述

這兩個區塊功能差不多，就呈現的方式不同，所以放一起講。通常是你想拿厲害的人講過的話來增加力度、或者你覺得自己講出一句不得了的話時可以使用。這個我就很少用了，因為我會盡量希望自己的教學文章盡量平滑一些，不要做很用力的強調行為。

表格

想做個簡易的比較表嗎？比起編輯軟體做圖去插入，直接用這個表格區塊會是比較好的選擇，畢竟雖然搜尋引擎有能力分析圖片內的文字，但直接用文字去顯示肯定是更友好的。基本上這個就做得像 Word 裡面的表格簡化版，該有的功能它有，可以讓你做出標準的呈現，但不會讓你有很華麗的設計。

註腳

寫了一篇需要論述的文章，註腳大概就是必備的了，不過這個區塊的作用是「顯示文章內出現的註腳」，所以我會放在文章最後面。那平時要怎麼打註腳呢？內容區的功能列那裡有個箭頭，點下去後就會有註腳的功能囉~

媒體區

從你的電腦或者網站主機放多媒體進來這篇文章，增加一些色彩或輔助文字用。要記得主要是從電腦或主機搬資料過來，要放 YouTube 影片的話往下找「嵌入內容」區。

圖片

圖片區塊是極度常用的東西，旁邊功能可以讓它置中或靠左右、基本的裁切，如果點 [在圖片上新增文字] 會直接轉換成「封面」區塊；右側控制區的調整選項就很多了，大小、圓角都可以處理。

圖庫

圖庫我也滿常用的，可以多張圖並列，或者放兩個東西在一起比較。但有兩點要特別注意：一是建議用到的圖片尺寸相等，不然有一點點難看；二是用手機看的話還是橫的，會導致變很小張，通常會搭配燈箱 (Lightbox) 外掛使用。

封面

可以把圖片當成背景，然後文字印在上方。坦白說我個人很少用，因為這效果我在自己的教學影片中很常用，所以圖文教學刻意避開。可以參考這個影片的時間點，我覺得拿來這樣做效果挺不錯的！

媒體及文字

一邊放圖、另一邊放文字說明，可以參考關於我的下方自我介紹部分。這個是大家很常看到的排版方式，但這區塊我卻很少用，因為它提供的可調整選項少了一些，所以我都是用下方介紹的「多重欄位」自己設計一個，自訂性非常高。但這個區塊本身很方便，你可以先試試看，如果覺得功能夠用的話那就直接使用即可。

設計區

提供很豐富的版面配置效果，讓你文章有很華麗的排版。

按鈕組

想用按鈕強調連結的時候會使用，會叫「組」是因為它可以橫向一直新增按鈕下去，之後控制區就可以調整這些按鈕們的間距和方向等等。

多重欄位

把同一排區塊中切割成多個小欄，可以放入多種區塊，可以參考關於我的自我介紹部分。點進去單一欄位的區塊，可以到右方控制區去調整要顯示的寬度。我個人滿愛這個的，它的自訂性很高。

群組

可以把多個區塊包在一起，接著控制裡面區塊的間距，如果有一組很常使用的區塊們，複製過去後僅需修改部分內容，可以用這功能。

閱讀全文

在這區塊之上的內容就會變成摘要，我個人是覺得現在很多佈景主題都有做到這功能了，所以多數情況下應該是不會用到，跟著佈景主題預設的走就好。

分頁符號

文章太大篇的時候可以用它去做分頁，只不過我個人喜歡把所有東西塞在一整頁，所以也很少用。

分隔符號

幫文章的內容做出區隔使用，右側控制區可以設定要用線還是點去區隔，也可以調整間距。

空白間隔

希望加大區塊間距的時候使用。但如果你是希望所有標題的距離都加大的話，我會建議先去佈景主題的設定找找看有沒有相關功能，或者學點 CSS 去解決。

小工具區

這區我唯一有用過的就是「短代碼」而已，有些外掛會要求使用這個區塊去輸入才能顯示，所以如果你安裝了某些英文外掛，有提到要使用 Shortcode 多半就是要用這個區塊了。

佈景主題

如果你選擇透過區塊編輯器來製作網站的版面配置，那就會用到這裡的功能。我自己主要還是透過 Bricks 和 Oxygen 去做的，所以這裡不太懂就不介紹了。

嵌入內容

當有想把外部平台的內容放進文章時可以使用，我最常使用的是 「YouTube」 區塊，但基本上也沒什麼可設定的，連結放進去就完事了。

常見問題