最後更新日期:2019 年 11 月 20 日
WordPress 主題建立完成後,有時候會跑出一些多餘的區塊,卻又不知道該如何刪除。
本篇文章將會教一些 CSS 、開發者工具,快速的隱藏 WordPress 網站多餘的區塊。

目錄
影片教學
如果喜歡我的文章或是影片,可以訂閱我的 Youtube 頻道、按讚、分享,我會分享更多實用的教學影片!訂閱 Youtube 頻道
Chrome 開發者工具
首先要來介紹一下 Chrome 的開發者工具,功能非常非常的多,本篇文章著重在 Elements,若有人需要其他教學,可以在底下留言。
首先,要如何開啟 Chrome 的開發者工具呢?
使用 快捷鍵 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)。

首先在上面先選擇 Elements,上半部的那些程式碼是網頁的HTML,下半部的程式碼是網頁的CSS。
HTML 是用來顯示文字、表格、區塊等等。
CSS 是用來調整 HTML 的樣式,像是文字大小、字體、位置等等。
CSS 語法
我這裡列出幾個比較常用到的CSS語法:
- background-color : 背景顏色
- font-family : 字型
- color : 文字顏色
- font-size : 文字大小
- line-height : 行距
- display : 顯示方式
如果想要練習,可以到這個網站學習與實作:w3schools
想要學習更完整的CSS語法,可以參考以下兩本書:
1. 學好跨平台網頁設計:HTML5、CSS3、JavaScript、jQuery與Bootstrap 4超完美特訓班(第二版)
2. CSS 大全(第四版)
隱藏區塊
step 1
透過開發者工具的左上角的箭頭,選取要修改的區塊,再到開發者工具大概上下點一下,尋找最符合的區塊。

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

這裡列出幾個常用的語法:
display: none; /*隱藏區塊*/ color: #ffffff; /*文字顏色*/ font-size: 20px; /*文字大小*/ background: red; /*背景顏色*/
step 3
接著到佈景主題自訂的地方,選擇客製化CSS,將語法貼進去,下圖是原本的樣子。

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

結論
本篇文章是阿璋第一次透過影片來教學,教大家如何快速的客製化自己的網站,並且透過隱藏區塊來作為示範。
不知道這樣的影片教學大家的感受如何? 希望可以在下面給我一點回應,我才知道接下來要不要繼續照這種模式。
如果想要學習更完整的前端語法,可以看看以下這部影片,教得很好很清楚!
(Ken Cen出品)建網百科全書-使用 HTML,CSS,JS, jQuery,php,mySQL 建立網站

覺得自學很困難,不想要花時間在這上面,可以看看本站外包服務,由阿璋幫你客製化!
支持阿璋的新書《打開網路就有錢》,裡面分享許多自媒體以及投資理財的知識,非常適合網路創業者以及想要增加額外收入的上班族閱讀。
如果你對幣圈資訊有興趣,可以訂閱此電子報:幣圈最新資訊
我目前有成立一個亞洲最大的幣圈自媒體 Discord 社群:Crypto Mind 加密腦
推坑阿璋超愛的商品,歡迎加入團購群:阿璋好物團購 LINE 社群
12篇文章手把手教你如何透過部落格開始賺錢:站長之路
更多相關社群連結:工具王阿璋社群列表
本站有部分連結與商家有合作關係,透過我的連結購買,我會獲得少數佣金,讓我可以持續營運網站,但並不會影響您的任何權益,詳情查看免責聲明。
如果我的文章對你有幫助,歡迎贊助我一杯咖啡!
本站所有內容皆為阿璋個人經驗分享,如有涉及投資請謹慎評估,阿璋不做任何投資建議。
文章引用請來信索取授權,否則將保留法律追訴權。
by Johntool-工具王阿璋
我覺得有影片很好,之前在找資料的時候,很常看到叫我貼在哪一段到哪一段之間,我不是找不到,就是找到了不知道怎麼用,有影片教學真的好很多。以前想解決都要找英文教學,超痛苦…於是被網站搞瘋的我怒買主題…然後發現還是要懂一點基礎語法qwq 相見恨晚
好XD 那我之後盡量把文章的影片都補齊,希望可以讓你更好理解!
我覺得真的至少要懂一些基本的網頁語法,不然遇到問題只能到處求助。
感謝阿璋大神分享,剛好最近有這個困擾,現在知道如何隱藏 WordPress 網站多餘的區塊,這篇超詳細,大推!
不客氣! 記得幫我多分享,還有訂閱我的youtube哦!
請問,那如果想要將導覽列選單固定、浮動顯示在上方,可以怎麼客製化呢?
感謝回覆~~
你可以選擇選單的位置,語法是 position: fixed;
影片教學清楚明瞭,跟著做就懂了!
記得幫我訂閱影片跟分享哦!
看了學長的文章,覺得淺顯易懂!非常好的教學文,讓不懂程式的我也能一步一步跟上,感謝分享!
記得幫我訂閱影片跟分享哦!
看到語法什麼的就覺得頭好痛啊……!
哈哈哈,我覺得多少嘗試了解一下!
謝謝分享~~
馬上就用到了!
影片很清楚,最後再來段ending會更好
哈哈
你說youtube的ending嗎? 類似訂閱什麼的嗎哈哈
有機會我來做一下,感謝你的建議!
搭配影片的教學真的太棒了,照著步驟一步一步也可以完成
太好了! 很棒的鼓勵,謝謝你
看版主的文章根本不用再找其他的了!感謝有你的價值提供
謝謝!! 幫忙多多分享跟訂閱我的影片
終於開youtube教學了,邊看影片的步驟學又更加清楚。
對阿,第一次嘗試開看看,看來成效算是不錯!
這篇先收藏了!真的很多免費主題都不如一開始預覽的好看QQ
我也找過很多首頁圖片過大怎麼辦的文 上一步還懂,下一步就不知道跳到哪去了@@
感謝阿璋~~~
對阿,很多主題並沒有一開始瀏覽的樣子,學一些語法才是最棒的方式
已訂閱~~~
之前自己在喬網站格式時
都找不到去哪裡修改….
有影片直接簡單又快速就能處理好問題
我以後有操作程式的步驟,盡量以影片呈現
謝謝璋哥,這篇文章真的很實用
把上面那個隱藏
看起來版面也比較乾淨呢
這還是要取決個人感官啦,只是做一個示範!
請問像是結論那樣的語法怎麼寫?!有沒有推薦的可以看
可以參考這篇文章唷:【WordPress教學】如何寫CSS更改WordPress標題樣式?3個實際範例教學
謝謝你的分享!因為更新佈景主題之後多了一個區塊,困擾了兩天!
你的解釋簡單清楚,立刻解決了我的問題。(已收藏)
歡迎分享出去~
您好,這個教學太棒了!!
但我遇到了一個問題,我想改變woocommerce中的”加入購物車”按鈕背景色
參考您的教學,找到了以下css
但貼上網頁後,按鈕顏色並不會產生任何變化
(在F12測試的時後有變化)
button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed {
background: red;
}
想詢問該怎麼修正呢?😢
這個都要看你的網頁 HTML 結構來調整哦,同樣是 WooCommerce,若遇上不同佈景主題或外掛都可能有變化
如果是我的學生或 NFT 持有者,可以寄信給我你的網址,免費幫你調整
如果你只是一般訪客,可以付費提供服務