
重點整理
在子主題 functions.php 加入一段 add_action 函數,為每種文章狀態的 CSS class 指定背景色。完成後後台文章列表會依草稿、待審、已排程等狀態顯示不同顏色,方便快速辨識。
WordPress 客製後台 與網站前端其實沒有關係,而是為了變更 WordPress 預設的功能及樣式,讓管理員能在編輯網站時能以更有效率的方式來操作,而本篇教學要說明的就是以加入 function 函數的方式,來改變 WordPress 文章列表中不同狀態欄位的顏色,為的是讓管理員在編輯文章時能更快速辨認當前文章屬於哪一種狀態,就實際操作面而言相當實用。
使用函數定義文章狀態背景顏色
第一步:下方是改變文章欄位顏色所需要的函數,內容上為對 posts_status_color 這個位置 做 style 的設定,將每一種文章狀態所具有的 class 加入並指定十六進位色碼後,再以 add_action 定義執行位置,就能完成對文章欄位背景色的修改。
第二步:在外觀中點選佈景主題編輯器,選擇子主題模板,開啟 functions.php 檔案,將程式碼貼到結尾處後點選更新檔案,如下圖所示。

第三步:完成後回到文章項目中,可以看到不同的文章狀態會顯示不同的背景顏色,想要篩選文章時會更加方便。

加入函數前要準備什麼?
這段程式碼雖然只影響後台,但寫錯一樣可能讓整個網站打不開,加入前請確認:
- 使用子主題:寫在子主題 functions.php,主題更新才不會被覆蓋。
- 備份原檔:先複製一份原本的 functions.php。
- 準備好 FTP 或主機檔案管理員:萬一出錯進不了後台,才能直接修改檔案。
- 或改用程式碼片段外掛:把程式碼放在片段外掛中,出問題時直接停用該片段即可。
背景色要怎麼挑才好辨識?
背景色的目的是一眼分辨文章狀態,挑選時可以參考:

- 用淺色:列表上還有標題、作者、日期等文字,背景太深會看不清楚,建議用接近白色的淡色。
- 狀態越需要處理,顏色越明顯:例如待審用淡黃色提醒審稿,草稿用淡灰色,已排程用淡藍色。
- 已發布維持原樣:大多數文章是已發布狀態,不上色才能突顯其他狀態。
- 色碼可查 CSS 顏色表:用十六進位色碼指定,之後要調整也方便。
常見問題
WordPress 文章列表可以依狀態換背景色嗎?
可以。後台文章列表的每一列都會帶有 status-draft、status-pending、status-future 等狀態 class,在子主題 functions.php 用 add_action 在後台輸出一段 CSS,替這些 class 指定背景色即可。
這段程式碼會影響網站前台嗎?
不會。程式碼掛在後台載入時執行,輸出的 CSS 只作用在 WordPress 後台的文章列表,訪客看到的網站前台完全不受影響。
可以用在頁面或 WooCommerce 商品列表嗎?
可以。頁面與商品列表同樣使用 WordPress 的列表表格,每一列也有狀態 class;只要 CSS 選擇器沒有限定文章類型,頁面與商品的草稿、待審等狀態也會一起套用顏色。
