fbpx
首頁 » 程式語言 » CSS » 【CSS】5分鐘教你如何隱藏 WordPress 網站多餘的區塊

【CSS】5分鐘教你如何隱藏 WordPress 網站多餘的區塊

最後更新日期:2019 年 11 月 20 日

WordPress 主題建立完成後,有時候會跑出一些多餘的區塊,卻又不知道該如何刪除。

本篇文章將會教一些 CSS 、開發者工具,快速的隱藏 WordPress 網站多餘的區塊。

【CSS】5分鐘教你如何隱藏 WordPress 網站多餘的區塊
【CSS】5分鐘教你如何隱藏 WordPress 網站多餘的區塊

影片教學

如果喜歡我的文章或是影片,可以訂閱我的 Youtube 頻道、按讚、分享,我會分享更多實用的教學影片!

訂閱 Youtube 頻道


前往 Youtube 觀看

 

Chrome 開發者工具

首先要來介紹一下 Chrome 的開發者工具,功能非常非常的多,本篇文章著重在 Elements,若有人需要其他教學,可以在底下留言。

首先,要如何開啟 Chrome 的開發者工具呢?

使用 快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)。

Chrome 開發者工具
Chrome 開發者工具

首先在上面先選擇 Elements,上半部的那些程式碼是網頁的HTML,下半部的程式碼是網頁的CSS。

HTML 是用來顯示文字、表格、區塊等等。

CSS 是用來調整 HTML 的樣式,像是文字大小、字體、位置等等。

 

CSS 語法

我這裡列出幾個比較常用到的CSS語法:

  1. background-color : 背景顏色
  2. font-family : 字型
  3. color : 文字顏色
  4. font-size : 文字大小
  5. line-height : 行距
  6. display : 顯示方式

如果想要練習,可以到這個網站學習與實作:w3schools

想要學習更完整的CSS語法,可以參考以下兩本書:

1. 學好跨平台網頁設計:HTML5、CSS3、JavaScript、jQuery與Bootstrap 4超完美特訓班(第二版)

2. CSS 大全(第四版)

 

隱藏區塊

step 1

透過開發者工具的左上角的箭頭,選取要修改的區塊,再到開發者工具大概上下點一下,尋找最符合的區塊。

尋找要修改的區塊
尋找要修改的區塊

step 2

選擇要修改的區塊後,在下方按+的符號,輸入 CSS 語法。

新增CSS
新增CSS

這裡列出幾個常用的語法:


display: none; /*隱藏區塊*/

color: #ffffff; /*文字顏色*/

font-size: 20px; /*文字大小*/

background: red; /*背景顏色*/

step 3

接著到佈景主題自訂的地方,選擇客製化CSS,將語法貼進去,下圖是原本的樣子。

修改前
修改前

step 4

貼上隱藏的語法後,上面的 bar 就消失了。

修改後
修改後

 

結論

本篇文章是阿璋第一次透過影片來教學,教大家如何快速的客製化自己的網站,並且透過隱藏區塊來作為示範。

不知道這樣的影片教學大家的感受如何? 希望可以在下面給我一點回應,我才知道接下來要不要繼續照這種模式。

如果想要學習更完整的前端語法,可以看看以下這部影片,教得很好很清楚!

(Ken Cen出品)建網百科全書-使用 HTML,CSS,JS, jQuery,php,mySQL 建立網站

(Ken Cen出品)建網百科全書-使用 HTML,CSS,JS, jQuery,php,mySQL 建立網站
建網百科全書

覺得自學很困難,不想要花時間在這上面,可以看看本站外包服務,由阿璋幫你客製化!

支持阿璋的新書《打開網路就有錢》,裡面分享許多自媒體以及投資理財的知識,非常適合網路創業者以及想要增加額外收入的上班族閱讀。

打開網路就有錢 呂明璋(工具王阿璋)


如果你對幣圈資訊有興趣,可以訂閱此電子報:幣圈最新資訊

我目前有成立一個亞洲最大的幣圈自媒體 Discord 社群:Crypto Mind 加密腦

推坑阿璋超愛的商品,歡迎加入團購群:阿璋好物團購 LINE 社群

12篇文章手把手教你如何透過部落格開始賺錢:站長之路

更多相關社群連結:工具王阿璋社群列表

本站有部分連結與商家有合作關係,透過我的連結購買,我會獲得少數佣金,讓我可以持續營運網站,但並不會影響您的任何權益,詳情查看免責聲明

如果我的文章對你有幫助,歡迎贊助我一杯咖啡!

本站所有內容皆為阿璋個人經驗分享,如有涉及投資請謹慎評估,阿璋不做任何投資建議。

贊助我一杯咖啡

文章引用請來信索取授權,否則將保留法律追訴權。

by Johntool-工具王阿璋

在〈【CSS】5分鐘教你如何隱藏 WordPress 網站多餘的區塊〉中有 32 則留言

  1. 我覺得有影片很好,之前在找資料的時候,很常看到叫我貼在哪一段到哪一段之間,我不是找不到,就是找到了不知道怎麼用,有影片教學真的好很多。以前想解決都要找英文教學,超痛苦…於是被網站搞瘋的我怒買主題…然後發現還是要懂一點基礎語法qwq 相見恨晚

    1. 好XD 那我之後盡量把文章的影片都補齊,希望可以讓你更好理解!
      我覺得真的至少要懂一些基本的網頁語法,不然遇到問題只能到處求助。

  2. 這篇先收藏了!真的很多免費主題都不如一開始預覽的好看QQ
    我也找過很多首頁圖片過大怎麼辦的文 上一步還懂,下一步就不知道跳到哪去了@@
    感謝阿璋~~~

  3. 謝謝你的分享!因為更新佈景主題之後多了一個區塊,困擾了兩天!
    你的解釋簡單清楚,立刻解決了我的問題。(已收藏)

  4. 您好,這個教學太棒了!!
    但我遇到了一個問題,我想改變woocommerce中的”加入購物車”按鈕背景色
    參考您的教學,找到了以下css

    但貼上網頁後,按鈕顏色並不會產生任何變化
    (在F12測試的時後有變化)

    button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed {
    background: red;
    }

    想詢問該怎麼修正呢?😢

    1. 這個都要看你的網頁 HTML 結構來調整哦,同樣是 WooCommerce,若遇上不同佈景主題或外掛都可能有變化
      如果是我的學生或 NFT 持有者,可以寄信給我你的網址,免費幫你調整
      如果你只是一般訪客,可以付費提供服務

發表迴響

返回頂端