WordPress如何發布和管理文章? (三種不同編輯器)

文章最後更新於2025-10-11

WordPress是一個CMS系統,其中最重要的功能就是發佈內容。我們這篇文章主要介紹如何在WordPress中發布和管理文章,適合剛接觸WordPress的新手用戶。

本文同時示範塊編輯器(WordPress預設的編輯器、常說的Gutenberg編輯器、古騰堡編輯器都是它)、經典編輯器(Classic Editor)與Elementor三種不同的發布文章的方式。你用哪個編輯器就可以跳到對應的章節閱讀。

區塊級編輯器

WordPress 5.0之後的版本都會給我們預設安裝區塊級編輯器。在區塊級編輯器裡面可以快速加入各種元素,比如說段落、標題、列表、引用、程式碼區塊、圖片、表格等等。下圖是一個整體介面的介紹。

我們接下來繼續一步一步分解如果豐富文章內容並做好發布前的一些準備。

1.點選最左邊的WordPress Logo可以讓我們回到文章清單頁面。

2.點選「+」號能夠出來下方可以用的區塊級元素,如下圖。然後我們將想要的區塊級元素拖曳到中間的灰色區域即可。

3.當然實際操作起來用的比較多的是「段落paragraph」這個區塊級元素。我們可以直接在中間區域輸入文字然後敲“回車”就能夠新建一個“段落”,還是比較方便的。

4. 我們在中間的編輯區域輸入文字,如果這時候我們想插入一個圖片,只需要在新段落點擊左側的「+」號即可新增我們想要的區塊級元素-(Image),即可插入圖片。

5.你可以根據自己的內容來靈活選擇不同的區塊級元素,當我們完成了文章內容後,我們就需要做好一些設定才能夠發布文章。

我用紅框框起來的就是常用的幾個選項:

  1. Save Draft。文章暫時沒有寫好或是你寫文章寫著寫著有其他事了,這時候你就可以點擊這個保存一下草稿,改日再寫。雖然WordPress都有自動儲存的功能,但手動儲存還是必要的。
  2. Publish。文章寫好後點選Publish即可發布文章,非常簡單易懂。
  3. Set featured image。這個就是讓我們設定文章精選圖片的地方。精選圖片你可以理解為就是文章的封面圖或是縮圖,和正文的第一張圖是不一樣的。
  4. Slug。 Slug是永久連結的一部分,也是打造SEO友善URL時最關鍵的部分。我們一般在slug裡面會包含文章的核心關鍵字。如果是中文文章,可以利用拼音當slug、但不建議用中文。
  5. Author。如果你的網站有多位作者,那麼在這裡可以選擇發布作者。
  6. Categories。設定文章的分類,根據文章的主題來選擇對應分類即可。如何設定分類可以看這篇WordPress的分類和標籤教學

經典編輯器(Classic Editor)

經典編輯器(Classic Editor) 是WordPress在啟用古騰堡(Gutenberg)塊編輯器之前的舊版寫作介面,所以如果我們想使用經典編輯器的話需要在插件市場裡面安裝對應的Classic Editor插件才能夠使用。

下圖就是經典編輯器的主要介面。

1、標題。標題設定的內容將顯示為頁面標籤標籤的頂部和搜尋引擎搜尋結果的主標題。標題是Google明確表示的排名因素之一,也是GoogleSEO頁面優化中最重要的一部分。

標題中可以用任意連字符,但是標題中使用的特殊字符只有“-” 和“_” 會生成到Slug裡面去,其他的特殊字符會被自動轉換。

寫出一個高點擊率的標題能夠讓你在眾多競爭對手中脫穎而出。

2、Slug。網域後面的這一段就稱之為Slug:

在Slug中使用對應的關鍵字會對SEO有一定的正面影響,但微乎其微。

但要注意的是,使用Classic Editor的新建文章的時候預設沒有讓你更改Slug的地方。這裡需要點擊Save Draft儲存一下或是點擊Publish發布後才會出現。

或者可以在螢幕選項中調出來,然後拖曳到右側邊欄中,這樣每次Add New Post的時候就可以直接編輯Slug。

Slug如果不進行手動編輯的話,WordPress是會預設把網站標題當作Slug的。

WordPress網站裡面,標題可以使用相同的,但Slug不行。 Slug是唯一標誌,如果標題相同的兩篇文章,另外一篇會以「-2」結尾。有三篇相同的,另外兩篇會以“-2”,“-3”結尾。

推薦閱讀:如何創建SEO友善的URL(附實操範例)

3、文章編輯區域。這是撰寫文章內容的主要區域。你可以在這裡添加文字、連結、圖片、影片和其他媒體類型。

經典編輯器像是Word文件一樣,編輯器上方有工具列(加粗、斜體、對齊、列表、連結、表格等),我們在編輯區域鍵入文字後可以點擊上方的工具列進行對應樣式的設定。

像是比於古騰堡編輯器,經典編輯器的視覺體驗更直覺,純內容寫作會更加的順手。

需要掌握一些基本的快捷鍵,文章寫作會變得更順手:

常用文章編輯快捷鍵

  • Ctrl + c 複製
  • Ctrl + v 貼上
  • Ctrl + a 選出全部
  • Ctrl + x 剪切
  • Ctrl + z 撤銷
  • Ctrl + y 重做
  • Ctrl + b 加粗
  • Ctrl + i 斜體
  • Ctrl + u 底線
  • Ctrl + k 插入鏈接
  • Alt + Shift + c 居中佈局
  • Alt + Shift + u 無序列表
  • Alt + Shift + o有序列表
  • Alt + Shift + m 插入圖片
  • Alt + Shift + 1 Heading 1
  • Alt + Shift + 2 Heading 2
  • Alt + Shift + 3 Heading 3
  • Alt + Shift + 4 Heading 4
  • Alt + Shift + 5 Heading 5
  • Alt + Shift + 6 Heading 6

4、Featured Image精選圖片。設定文章封面圖的區域,跟塊編輯器的功能是一樣的,這裡就不多說了。

這些就是在發布文章中最常見的會涉及到的功能和字段,更多字段可以查看官方文檔

Elementor編輯器

Elementor是一個視覺化頁面編輯器,跟Block Editor類似,能夠以拖曳元件的方式來進行頁面的建置。但在功能、響應式設計、元件模組等各方面都比Block Editor強大。 Elementor需要在插件市場中安裝。

使用Elementor製作文章詳情頁模板

我們如果想要充分發揮Elementor的功能來編輯和管理文章,是需要用到Elementor Pro這個付費版本的「模板」功能的。

點選Add New,新增「Single Post」範本。

用這個模板能夠控制單篇文章頁面的整體版式,結合「展示條件」這個功能可以將這個模板套用到特定的分類下。

比如說A分類的文章我用A排版,B分類的文章我用另外一個B排版。這一點是其他兩種編輯器所無法比擬的。

點擊「Create Template」之後,Elementor會帶我們進入到一個空白的頁面,在這裡我們可以選擇使用Elementor自帶的模板。

但如果你不滿意Elementor自帶的模板,那麼你也可以自己來搭建想要的文章詳情頁模板,只需要拖動組件進行頁面佈局即可。如何使用Elementor進行頁面佈局可以看我這篇Elementor容器佈局教程

但跟製作頁面所不一樣,我們使用Elementor來建立模板會有一些特殊的小部件,像是我們要建造的Single Post模板,會多出這些小工具:

這些小部件的作用就跟他們的命名一眼顯而易見。

因為是文章詳情頁模板,也就是說應用了這個模板的所有文章詳情頁(或某一類文章)都會統一使同一套版式:標題區、作者資訊、發佈時間、特色圖、目錄、正文、分享按鈕、相關文章、評論區等

Post Title和Post Content這兩個小部件是必要的,其他可以依自己的需求來搭配。

在Single Post模板中,Post Content小工具僅用於渲染文章正文。我們下面會詳細說如何編輯文章。

我們使用Elementor容器將文章詳情頁佈局設定好以後,要選擇「展示條件」。

這個「展示條件」就是讓我們設定我們的範本在網站中的什麼地方展示,如果特別要求,直接設定為「All Singular」即可,即應用到所有文章詳情頁中。

然後點選「Publish」即可發布文章詳情頁範本。

至此,文章的詳情範本就設定好了。

使用Elementor編輯文章

接下來我們就需要編輯單篇文章的內容並發佈了。

我們在上面說到在Single Post模板中,Post Content小工具僅用於渲染文章正文。

如果你想為某一篇文章添加更複雜的版式與互動(如特殊佈局、動畫、表單、影片畫廊等),有兩種方式:

1)在該文章裡用塊編輯器/經典編輯器排版,模板透過Post Content正常顯示,例如:

我在經典編輯器裡面編輯的內容就會直接顯示在Post Content區域。

2)直接用Elementor開啟這篇文章,在文章正文裡拖曳文字、標題、圖片、影片等小部件,實現更複雜的視覺效果。模板負責全站統一的'外殼',每篇文章的具體內容則在文章編輯界面裡完成。

我們進入到對應的文章頁面,點選Edit with Elementor

即可進入以下的Elementor視覺化編輯介面。

兩種方式的差別嘛就是使用Elementor來編輯單篇文章的話能夠實現更加複雜的動態效果。

而且我們能夠單獨設定PC端和行動端的樣式,是個人非常推薦的一款視覺化編輯器。

返回頂端
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors