這篇文章最後更新日期：2024 年 4 月 1 日
作者： Mack Chan
大部分的 WordPress 站長並非工程師或程序員背景出身，並不能太輕鬆修改 外掛 或 佈景主題 的程式碼，當遇上要「移除」網頁裡的「某一個物件或元素」，就會顯得束手無策和感到無奈。
所以我們這次介紹不懂程式的新手都可以移除「任何物件」的方法，而且非常簡單和快速就能做到，學習曲線非常低，但又可以在往後重複使用。
本次教學的 CSS 範例以知名的 Astra 佈景主題 為例，不同主題的 CSS 命名略有不同，但大部分都是參考 WordPress 官方手冊推薦的命名原則，理論上大部分是相同的。
兩篇重要的 CSS 新手教學 | 前期準備
這篇教學需要你懂得 在 WordPress 插入自訂 CSS (附加的 CSS) 和 尋找 CSS Class Name (名稱) 和 Id Selector (選擇器)。如果你不是太清楚這些步驟，建議優先花數分鐘快速重溫以下兩篇簡短教學，我們就不再重複贅述。如果你已懂得這些技巧，可以直接略過。
如何在 WordPress 新增自訂 CSS (附加的 CSS)
當 WordPress 的佈景主題 和外掛在外觀設定上無法滿足我們的需求，站長們可能希望透過自行調整 CSS 語法來達到自己理想的視覺效果，這個時候應該怎麼辦？WordPress 有提供內建的「自訂 CSS 語法」的設定，但前題是站長應該要對 CSS 和 HTML 語法有基礎的認知和實作能力，才適合自行調整這個部分，因為如果操作不當，可能引起網站無法正常運作，是個具有一定風險的操作。
※ 快速進入自訂 CSS 的捷徑：
1. 請前往 [上方黑色管理列] → [自訂] → [附加的 CSS]
2. 請前往 [網站後台] → [外觀] → [自訂] → [附加的 CSS]
如何找出網頁裡的 CSS Class Name (名稱) 和 Id Selector (選擇器)？
Chrome DevTools 提供一系列協助網站站長研究網站的工具，這內建在 Google Chrome 瀏覽這篇教學是網站架設的基本功之一，協助「初學者」有效和快速查詢得到網頁的 CSS Class Name (名稱) 和 Id Selector (選擇器)。
這是一個非常重要的「起手式」，在往後很多教學都要求新手懂得查詢到網頁裡的 CSS 名稱，不然我們無法指定一些 [新的 CSS 屬性] 給它們。這篇教學約 5 分鐘就可以學會，我們會以市場佔有率最高的 Chrome DevTools (開發人員工具) 作為學習工具，讓新手快速進入學習的狀態。
請確保已經懂得上方兩篇教學才繼續閣讀，避免卡關
CSS 的知識是一個累積的過程，底子打不好，就無法研究更進階的領域，新手要知道「基礎知識」是建立網站的基石，不要害怕學習 CSS 語法。
為什麼要隱藏網頁的物件？2 種常見方法
在 CSS 領域裡，有兩種語法常常用於「隱藏」網頁的元素，它們之間有很多共同點，微妙的差異。分別是 display:none 和 visibility:hidden，大家可以參考上方的比較表格，當然一般新手可能不想太深究兩者的差異。事實上，在真實的應用超過 90% 只需要使用 display:none 即可。
在網頁空間移除物件之後，如果使用 display:none 的話，後續的元素會自動填補空間，反之後者會仍然佔用空間，這是 visibility:hidden 刪除後最大的差異。
另外一個使用 visibility:hidden 較佳的提議是關於 SEO，因為會保留程式碼，例如你隱藏了 H1 標題，但這個 H1 仍然發揮作用，只是人類肉眼看不到。
例子一：隱藏 WordPress 網站文章的精選圖片
部分 WordPress 佈景主題會出現「重複精選圖片」的問題，或作者不希望出現圖片在上方。
步驟一：
打開任意一篇文章或頁面，點擊目標的精選圖片。
步驟二：
那個 img. xxxxxxxxx 就是精選圖片的 CSS 名稱。
例子二：隱藏 WordPress 網站文章的文章標題
比較罕見是希望隱藏「文章標題」，不過有些新手想隱藏「作者」、「日期」或「摘要」之類，操作方法是相同的。
步驟一：
打開任意一篇文章或頁面，點擊目標的 H1 標題。
步驟二：
那個 h1.entry-title 就是文章標題的 CSS 名稱。
例子三：隱藏 WordPress 網站資訊欄 / 側邊欄物件
現代網站設計裡的資訊欄 (Sidebar) 並非必須品，事實上你也可以在 WordPress 小工具 裡調整，不過如果是局部的小工具內容希望隱藏參考下方步驟。
步驟一：
打開任意一篇文章或頁面，需要有啟用資訊欄 (Sidebar)，點擊目標的小工具。
步驟二：
那個 aside xxxxxxxxx 就是小工具的 CSS 名稱。
例子四：隱藏 WooCommerce 的「加入購物車」
如果架站目標題建立「形錄網站」而非「電子商務 / 網店」，那由於不是在線購買產品或服務，那個「加到購物車」就不需要存在。
步驟一：
打開產品目錄或單篇產品頁面，點擊目標的「加到購物車」圖示或按鈕。
步驟二：
那個 button. xxxxxxxxx 就是「加到購物車」的 CSS 名稱。
例子五：隱藏 WordPress 網站的留言區
WordPress 其實預設就允許關閉留言區域，在 [網站後台] 裡可找到相關的設定。這例子想告知人們在使用 display:none 之前，不妨多思考是否可以不依賴這個方式，達到相同的目標。
步驟一：
點擊目標的留言區域元素，記得是整個區塊。
步驟二：
那個 div.comments-area 就是「留言區域元素」的 CSS 名稱。
進入附加的 CSS 區域
※ 快速進入自訂 CSS 的捷徑：
1. 請前往 [上方黑色管理列] → [自訂] → [附加的 CSS]
2. 請前往 [網站後台] → [外觀] → [自訂] → [附加的 CSS]
區域一：
正常應該是「空白」的，如果你從來插入過任何 CSS 語法。
區域二：
我們以這個標題作例子，它的 CSS 名稱是 h1.entry-title。
將「隱藏」語法填入
由於我們已經得知標題的 CSS 名稱是 h1.entry-title，所以我們加上 display: none 就完成工作，加入之後，區域 2 的標題已經「消失不見」，代表我們成功隱藏了標題，是否很簡單？
h1.entry-title {
display: none;
}
CSS 裡的 !important 是什麼？
!important 算是 CSS 裡的最後手段，如果你指定的屬性沒有反應，代表優先權過低，這時在尾部加上 !important 就能把優先權提到最高，但濫用這方法絕對不是良好的規劃，應該放在最後手段之上裡比較合適。
常見問題 FAQ
WordPress 自訂 CSS (附加的 CSS) 的位置在那裡？
快速進入自訂 CSS 的捷徑：
1. 請前往 [上方黑色管理列] → [自訂] → [附加的 CSS]
2. 請前往 [網站後台] → [外觀] → [自訂] → [附加的 CSS]
為什麼要隱藏網頁的物件？2 種常見方法
在 CSS 領域裡，有兩種語法常常用於「隱藏」網頁的元素，它們之間有很多共同點，微妙的差異。分別是 display:none 和 visibility:hidden，大家可以參考上方的比較表格，當然一般新手可能不想太深究兩者的差異。事實上，在真實的應用超過 90% 只需要使用 display:none 即可。
在網頁空間移除物件之後，如果使用 display:none 的話，後續的元素會自動填補空間，反之後者會仍然佔用空間，這是 visibility:hidden 刪除後最大的差異。
另外一個使用 visibility:hidden 較佳的提議是關於 SEO，因為會保留程式碼，例如你隱藏了 H1 標題，但這個 H1 仍然發揮作用，只是人類肉眼看不到。
參考資料和引用文獻：
- WordPress Support：Styling and hiding elements
- Elegant Themes Blog：How to Hide Elements with CSS on Your Website
- W3Schools：Display: none;
- W3Schools：CSS The !important Rule
- ID 选择器 – CSS（层叠样式表） | MDN
- 維基百科：什麼是 CSS (階層式樣式表)？
- 網站迷谷：區塊編輯器
- 網站迷谷：傳統編輯器
- 網站迷谷：WordPress 小工具
- Ke2B 刻刻網業：為什麼不應該把 display: none; CSS 語法當萬解？
我們提供市場上最新的網站架設
新聞、教學和相關知識，我們不會向用戶
發送垃圾和推廣內容，而你可以隨時「取消訂閱」。
WordPress 學員人數
12,000+ 人 (持續增加之中)
