自定义 CSS 和通过 CSS 隐藏网站部分内容

相當常見的請求與隱藏網站上的特定部分有關,這些部分在管理端沒有自己的開/關按鈕。由於前端不可能為每個細節設置主題管理按鈕,因此如果您不熟悉編輯 HTML 代碼來刪除不需要的部分,則可以使用 CSS 隱藏不需要的部分。

找到要刪除的部分

您可以使用瀏覽器開發人員工具找到要刪除的確切部分。
假設您想要刪除博客文章下帶有日期和作者的部分,右鍵單擊該部分“檢查元素”並打開瀏覽器開發人員工具:

打開開發者工具

將鼠標光標移到源代碼上,您可以看到頁面上突出顯示的部分,該部分引用了鼠標光標下的一行源代碼:

在源中查找元素

通過這種方式,您可以找到您想要隱藏的部分 - 例如,如果所有部分都帶有日期和作者,或者只有日期部分,或者只有作者部分,請參考上面的屏幕截圖。

編寫 CSS 來隱藏選定的部分

當您選擇了要隱藏的部分後,請在您自己的 CSS 樣式中使用所選 HTML 標記的 ID 或 CLASS 屬性,或者使用該標記的主題所使用的確切 CSS 選擇器。您可以在瀏覽器開發人員工具的右側找到主題使用的所選標籤的 CSS 選擇器。
例如,如果您決定刪除包含日期和作者的整個部分,則主題使用的選擇器為: .elm-posts-main .item .item-info

標籤的 CSS 選擇器

隱藏側面 HTML 標籤的 CSS 樣式是“display: none;”,您也可以使用 !重要的 語句以防止進一步用另一個 CSS 覆蓋 CSS 樣式。

因此隱藏日期和作者部分的最終 CSS 樣式將是:

.elm-posts-main .item .item-info { 顯示:無!重要; }

將自定義 CSS 代碼添加到定制器中

您可以將自定義 CSS 代碼添加到 外觀 > 自定義 > 附加 CSS

發布後您可以在您的網站上查看:

應用CSS樣式