fbpx
了解 Elementor 編輯器最新優惠

如何隱藏 WordPress 網站裡的物件,例如標題、圖片和段落?

大部分的 WordPress 站長並非工程師或程序員背景出身,並不能太輕鬆修改外掛或佈景主題的程式碼,當遇上要「移除」網頁裡的「某一個物件或元素」,就會顯得束手無策和感到無奈。所以我們這次介紹不懂程式的新手都可以移除「任何物件」的方法,而且非常簡單和快速就能做到,學習曲線非常低,但又可以在往後重複使用。

本次教學的 CSS 範例以知名的 Astra 佈景主題 為例,不同主題的 CSS 命名略有不同,但大部分都是參考 WordPress 官方手冊推薦的命名原則,理論上大部分是相同的。

兩篇重要的 CSS 新手教學 | 前期準備

這篇教學需要你懂得 在 WordPress 插入自訂 CSS (附加的 CSS)尋找 CSS Class Name (名稱) 和 Id Selector (選擇器)。如果你不是太清楚這些步驟,建議優先花數分鐘快速重溫以下兩篇簡短教學,我們就不再重複贅述。如果你已懂得這些技巧,可以直接略過。

如何在 WordPress 新增自訂 CSS (附加的 CSS)

如何在 WordPress 新增自訂 CSS (附加的 CSS)
如何在 WordPress 新增自訂 CSS (附加的 CSS)

當 WordPress 的佈景主題 和外掛在外觀設定上無法滿足我們的需求,站長們可能希望透過自行調整 CSS 語法來達到自己理想的視覺效果,這個時候應該怎麼辦?WordPress 有提供內建的「自訂 CSS 語法」的設定,但前題是站長應該要對 CSS 和 HTML 語法有基礎的認知和實作能力,才適合自行調整這個部分,因為如果操作不當,可能引起網站無法正常運作,是個具有一定風險的操作。

快速進入自訂 CSS 的捷徑:
1. 請前往 [上方黑色管理列] → [自訂] → [附加的 CSS]
2. 請前往 [網站後台] → [外觀] → [自訂] → [附加的 CSS]

如何找出網頁裡的 CSS Class Name (名稱) 和 Id Selector (選擇器)?

如何找出網頁裡的 CSS Class Name (名稱) 和 Id Selector (選擇器)?
如何找出網頁裡的 CSS Class Name (名稱) 和 Id Selector (選擇器)?

Chrome DevTools 提供一系列協助網站站長研究網站的工具,這內建在 Google Chrome 瀏覽這篇教學是網站架設的基本功之一,協助「初學者」有效和快速查詢得到網頁的 CSS Class Name (名稱) 和 Id Selector (選擇器)。這是一個非常重要的「起手式」,在往後很多教學都要求新手懂得查詢到網頁裡的 CSS 名稱,不然我們無法指定一些 [新的 CSS 屬性] 給它們。這篇教學約 5 分鐘就可以學會,我們會以市場佔有率最高的 Chrome DevTools (開發人員工具) 作為學習工具,讓新手快速進入學習的狀態。


請確保已經懂得上方兩篇教學才繼續閣讀,避免卡關

CSS 的知識是一個累積的過程,底子打不好,就無法研究更進階的領域,新手要知道「基礎知識」是建立網站的基石,不要害怕學習 CSS 語法。


為什麼要隱藏網頁的物件?2 種常見方法

為什麼要隱藏網頁的物件?2 種常見方法
為什麼要隱藏網頁的物件?2 種常見方法

在 CSS 領域裡,有兩種語法常常用於「隱藏」網頁的元素,它們之間有很多共同點,微妙的差異。分別是 display:none 和 visibility:hidden,大家可以參考上方的比較表格,當然一般新手可能不想太深究兩者的差異。事實上,在真實的應用超過 90% 只需要使用 display:none 即可。

在網頁空間移除物件之後,如果使用 display:none 的話,後續的元素會自動填補空間,反之後者會仍然佔用空間,這是 visibility:hidden 刪除後最大的差異。

另外一個使用 visibility:hidden 較佳的提議是關於 SEO,因為會保留程式碼,例如你隱藏了 H1 標題,但這個 H1 仍然發揮作用,只是人類肉眼看不到。

例子一:隱藏 WordPress 網站文章的精選圖片

例子一:隱藏 WordPress 網站文章的精選圖片
例子一:隱藏 WordPress 網站文章的精選圖片

部分 WordPress 佈景主題會出現「重複精選圖片」的問題,或作者不希望出現圖片在上方。

步驟一:

打開任意一篇文章或頁面,點擊目標的精選圖片。

步驟二:

那個 img. xxxxxxxxx 就是精選圖片的 CSS 名稱。

例子二:隱藏 WordPress 網站文章的文章標題

例子二:隱藏 WordPress 網站文章的文章標題
例子二:隱藏 WordPress 網站文章的文章標題

比較罕見是希望隱藏「文章標題」,不過有些新手想隱藏「作者」、「日期」或「摘要」之類,操作方法是相同的。

步驟一:

打開任意一篇文章或頁面,點擊目標的 H1 標題。

步驟二:

那個 h1.entry-title 就是文章標題的 CSS 名稱。

例子三:隱藏 WordPress 網站資訊欄 / 側邊欄物件

例子三:隱藏 WordPress 網站資訊欄 / 側邊欄物件
例子三:隱藏 WordPress 網站資訊欄 / 側邊欄物件

現代網站設計裡的資訊欄 (Sidebar) 並非必須品,事實上你也可以在 WordPress 小工具 裡調整,不過如果是局部的小工具內容希望隱藏參考下方步驟。

步驟一:

打開任意一篇文章或頁面,需要有啟用資訊欄 (Sidebar),點擊目標的小工具。

步驟二:

那個 aside xxxxxxxxx 就是小工具的 CSS 名稱。

例子四:隱藏 WooCommerce 的「加入購物車」

例子四:隱藏 WooCommerce 的「加入購物車」
例子四:隱藏 WooCommerce 的「加入購物車」

如果架站目標題建立「形錄網站」而非「電子商務 / 網店」,那由於不是在線購買產品或服務,那個「加到購物車」就不需要存在。

步驟一:

打開產品目錄或單篇產品頁面,點擊目標的「加到購物車」圖示或按鈕。

步驟二:

那個 button. xxxxxxxxx 就是「加到購物車」的 CSS 名稱。

例子五:隱藏 WordPress 網站的留言區

例子五:隱藏 WordPress 網站的留言區
例子五:隱藏 WordPress 網站的留言區

WordPress 其實預設就允許關閉留言區域,在 [網站後台] 裡可找到相關的設定。這例子想告知人們在使用 display:none 之前,不妨多思考是否可以不依賴這個方式,達到相同的目標。

步驟一:

點擊目標的留言區域元素,記得是整個區塊。

步驟二:

那個 div.comments-area 就是「留言區域元素」的 CSS 名稱。

進入附加的 CSS 區域

進入附加的 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 是什麼?

CSS 裡的 !important 是什麼?
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 仍然發揮作用,只是人類肉眼看不到。

參考資料和引用文獻:

我們提供市場上最新的網站架設新聞、教學和相關知識,我們不會向用戶發送垃圾和推廣內容,而你可以隨時「取消訂閱」。

學員人數:6,600+ 人(持續增加之中)

中文語系的 WordPress - Facebook 社團列表

發表您的留言

加入我們的免費 WordPress 學習社團免費的教學資源、交流和解決問題!

是否覺得孤軍作戰和學習很無趣味?
何不加入學習社團和其他
熱愛網站設計的朋友交流?
分享您建站的喜與樂
學習最新的知識和技術