
重點整理
WordPress 的「頁面」用來放關於我們、服務介紹、聯絡我們這類固定內容,和依時間排序的「文章」不同。從後台「頁面 → 新增頁面」就能建立;用「上層」把頁面分成上下層,用「順序」數字決定排列先後(數字小的排前面)。現在的 WordPress 預設用區塊編輯器,下面的舊版畫面欄位名稱相同,只是位置改到右側設定欄。
架一個公司網站,第一步通常是先把「公司簡介、產品介紹、合作夥伴、聯絡我們」這幾個頁面建好,再放進選單。如果頁面沒有分類分層,訪客要花很多時間才找得到想看的內容。這篇延續 WordPress 教學 基礎介紹二(媒體),教你在 WordPress 後台管理全部頁面、新增頁面,並用「上層」和「順序」把頁面整理成清楚的層級。
頁面和文章有什麼不同?
兩者都在後台編輯,操作也很像,但用途不一樣:
| 項目 | 頁面 | 文章 |
|---|---|---|
| 適合放的內容 | 關於我們、服務項目、聯絡資訊等不常變動的內容 | 最新消息、部落格、教學等持續更新的內容 |
| 排序方式 | 可設定上下層與順序 | 依發佈日期排列 |
| 分類與標籤 | 預設沒有 | 有分類與標籤 |
| 出現位置 | 通常放在主選單或頁尾 | 出現在文章列表、分類彙整頁、RSS |
簡單判斷:內容會「一直累積」就用文章,內容是「網站的固定區塊」就用頁面。文章的操作方式可以參考基礎介紹一(文章)。
步驟一:從控制台進入「全部頁面」
在 WordPress 控制台左側選單點「頁面」,底下有「全部頁面」和「新增頁面」兩個項目。先點「全部頁面」看看網站目前有哪些頁面。
1-1.png.webp)
全部頁面的列表和文章列表的介面幾乎一樣:上方可以依日期篩選、用「批次操作」一次把多個頁面移至回收桶或編輯,每一列滑鼠移過去會出現「編輯、快速編輯、移至回收桶、檢視」等連結。
2.png.webp)
做形象官網或商業網站時,建議先把要建立的頁面在這裡一次列出來(可以先存成草稿),比較不會漏掉。
步驟二:新增頁面並輸入內容
點左側選單「頁面 → 新增頁面」。
3.png.webp)
進入編輯畫面後,先在最上方輸入頁面標題,再編輯內容。下面這張是舊版「傳統編輯器」的畫面;現在的 WordPress 預設是區塊編輯器,標題欄同樣在最上方,內容則是一個一個區塊(段落、圖片、按鈕等),點畫面左上角的「+」就能插入圖片或影片,操作方式和「媒體」一樣。
4.png.webp)
頁面的內容通常和主題緊密相關。例如「關於公司」頁面,圖片多半是品牌標誌或團隊照片,影片是公司介紹,文字是創立宗旨與服務項目。
步驟三:認識頁面的設定欄位
舊版編輯器把設定放在畫面右側的「發佈」「頁面屬性」「精選圖片」三個區塊;區塊編輯器則集中在右側設定欄的「頁面」分頁裡。名稱和功能大致相同:
5.png.webp)
- 上層:指定這個頁面屬於哪一個頁面底下,用來建立上下層。
- 範本(舊版叫「模板」):選擇這個頁面要套用主題提供的哪一種版型,例如全寬、無側邊欄。可選的範本依主題而定。
- 順序:用數字決定頁面排列的先後。
- 精選圖片:有些主題會把它當成頁首大圖或社群分享縮圖,用不到可以不設定。
找不到「順序」時,可以回到「全部頁面」,在頁面上點「快速編輯」,裡面一定有「上層」「順序」「範本」三個欄位,不用進編輯畫面就能修改。
步驟四:用「上層」把頁面分成上下層
假設要做一個「派對服裝」的分類:底下分「男裝」「女裝」,男裝裡有「西裝」,女裝裡有「連身裙」「洋裝」。做法是先建好上層頁面,再在子頁面的「上層」選單選擇它。
1. 先新增「派對服裝」頁面,上層維持「無上層」,發佈。
7.png.webp)
2. 新增「男裝」頁面,在上層的下拉選單選擇「派對服裝」。
8.png.webp)
9.png.webp)
3. 用同樣方式新增「女裝」,上層同樣選「派對服裝」。設定上層後,固定網址也會跟著變成「派對服裝/女裝」這樣的階層結構。
10.png.webp)
4. 新增「西裝」,上層選「男裝」;新增「連身裙」和「洋裝」,上層選「女裝」。下拉選單裡子頁面會縮排顯示,方便辨認層級。
11.png.webp)
12.png.webp)
13.png.webp)
5. 把這些頁面加進選單後,前台的下拉選單就會呈現「派對服裝 → 男裝/女裝 → 西裝/連身裙/洋裝」的層級。
14.png.webp)
15.png.webp)
要注意:設定上層只會改變頁面的層級和網址,不會自動把頁面放進主選單。傳統主題要到「外觀 → 選單」把頁面加進去,區塊主題則在「外觀 → 編輯器」的導覽區塊裡調整,操作可以參考 WordPress 教學 基礎介紹五(外觀)。
步驟五:用「順序」調整頁面排列
同一層的頁面預設依標題排序。「順序」欄位填數字,數字越小排越前面。例如把「洋裝」設為 0、「連身裙」設為 1,洋裝就會排在連身裙前面。
16.png.webp)
17.png)
反過來把洋裝改成 1、連身裙改成 0,順序就會對調。
18.png)
「順序」影響的是頁面列表、「頁面清單」區塊或小工具這類自動列出頁面的地方。自訂選單的排列要在選單或導覽設定裡用拖曳調整,兩者是分開的。
步驟六:用 WordPress 內建編輯器或頁面編輯器排版
頁面的版面可以用 WordPress 內建的區塊編輯器完成,也可以用主題或外掛提供的頁面編輯器(Page Builder)。下圖示範的網站使用 Avada 主題,編輯頁面時可以切換到它內建的 Fusion Builder;常見的還有 Elementor、Bricks 等。
6.png.webp)
19.png.webp)
兩者的差別:
- 區塊編輯器:WordPress 內建、不用另外安裝,現在已經能做欄位、群組、封面圖等版面,搭配區塊主題還能編輯整個網站的頁首頁尾。適合想要網站輕量、好維護的情況。
- 頁面編輯器外掛或主題編輯器:提供更多現成元件和動態效果(輪播、視差捲動、淡入淡出等),視覺上自由度較高,但會多一層外掛相依,換主題或停用時版面可能跑掉。
常見問題
WordPress 的頁面可以加分類嗎?
預設不行,頁面沒有分類與標籤,要分組就用「上層」建立上下層。如果真的需要替頁面加分類,可以另外安裝外掛,或改用文章搭配分類來做。
為什麼設定了上層,選單上卻沒有出現子頁面?
因為上層只決定頁面的層級和網址,不會自動更新選單。請到「外觀 → 選單」(傳統主題)或「外觀 → 編輯器」的導覽(區塊主題)把子頁面加進去,並拖曳到上層頁面底下。
頁面的「順序」欄位找不到怎麼辦?
回到「頁面 → 全部頁面」,在該頁面點「快速編輯」,就能直接修改順序、上層與範本。不同 WordPress 版本的編輯畫面欄位位置可能略有不同,但快速編輯一直都有這三個欄位。
結語
頁面是網站的骨架:先列出要做的頁面,用「上層」整理層級、用「順序」排好先後,再放進選單,訪客就能很直覺地找到內容。版面排版先用 WordPress 內建的區塊編輯器練習,需要更多視覺效果時再考慮頁面編輯器。下一篇基礎介紹會說明網站的另一個重要功能「迴響」。
