找我們做網站
↑
Wordpress · WordPress 客製與程式碼

WordPress 後台文章列表依狀態換背景色:functions.php 函數

WordPress 客製與程式碼發布 2019.07.23更新 2026.10.02閱讀約 3 分鐘
WordPress 後台文章列表依狀態換背景色:functions.php 函數

重點整理
在子主題 functions.php 加入一段 add_action 函數,為每種文章狀態的 CSS class 指定背景色。完成後後台文章列表會依草稿、待審、已排程等狀態顯示不同顏色,方便快速辨識。

WordPress 客製後台 與網站前端其實沒有關係,而是為了變更 WordPress 預設的功能及樣式,讓管理員能在編輯網站時能以更有效率的方式來操作,而本篇教學要說明的就是以加入 function 函數的方式,來改變 WordPress 文章列表中不同狀態欄位的顏色,為的是讓管理員在編輯文章時能更快速辨認當前文章屬於哪一種狀態,就實際操作面而言相當實用。

使用函數定義文章狀態背景顏色

第一步:下方是改變文章欄位顏色所需要的函數,內容上為對 posts_status_color 這個位置 做 style 的設定,將每一種文章狀態所具有的 class 加入並指定十六進位色碼後,再以 add_action 定義執行位置,就能完成對文章欄位背景色的修改。

第二步:在外觀中點選佈景主題編輯器,選擇子主題模板,開啟 functions.php 檔案,將程式碼貼到結尾處後點選更新檔案,如下圖所示。

WordPress 客製後台
WordPress 客製後台

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

WordPress 客製後台
WordPress 客製後台

加入函數前要準備什麼?

這段程式碼雖然只影響後台,但寫錯一樣可能讓整個網站打不開,加入前請確認:

  • 使用子主題:寫在子主題 functions.php,主題更新才不會被覆蓋。
  • 備份原檔:先複製一份原本的 functions.php。
  • 準備好 FTP 或主機檔案管理員:萬一出錯進不了後台,才能直接修改檔案。
  • 或改用程式碼片段外掛:把程式碼放在片段外掛中,出問題時直接停用該片段即可。

背景色要怎麼挑才好辨識?

背景色的目的是一眼分辨文章狀態,挑選時可以參考:

WordPress 後台文章列表套用狀態背景色後的實際畫面:已排程淡藍、待審閱淡黃、草稿淡灰、私密淡紅,已發佈維持原色
WordPress 後台文章列表套用狀態背景色後的實際畫面:已排程淡藍、待審閱淡黃、草稿淡灰、私密淡紅,已發佈維持原色
  • 用淺色:列表上還有標題、作者、日期等文字,背景太深會看不清楚,建議用接近白色的淡色。
  • 狀態越需要處理,顏色越明顯:例如待審用淡黃色提醒審稿,草稿用淡灰色,已排程用淡藍色。
  • 已發布維持原樣:大多數文章是已發布狀態,不上色才能突顯其他狀態。
  • 色碼可查 CSS 顏色表:用十六進位色碼指定,之後要調整也方便。

常見問題

WordPress 文章列表可以依狀態換背景色嗎?

可以。後台文章列表的每一列都會帶有 status-draft、status-pending、status-future 等狀態 class,在子主題 functions.php 用 add_action 在後台輸出一段 CSS,替這些 class 指定背景色即可。

這段程式碼會影響網站前台嗎?

不會。程式碼掛在後台載入時執行,輸出的 CSS 只作用在 WordPress 後台的文章列表,訪客看到的網站前台完全不受影響。

可以用在頁面或 WooCommerce 商品列表嗎?

可以。頁面與商品列表同樣使用 WordPress 的列表表格,每一列也有狀態 class;只要 CSS 選擇器沒有限定文章類型,頁面與商品的草稿、待審等狀態也會一起套用顏色。

結語

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。