在選擇 WordPress 佈景主題之後,多多少少心裡會有這些聲音出現:「欸感覺標題字體大小可以調整」、「佈景的超連結顏色不喜歡,想要改變」,而且使用熱門模板,應該也蠻容易跟其他部落客「撞版」,一看就知道用一樣的模板,有時會覺得好像沒有把部落格佈景打造出自己的獨特特色出來。
因此,WordPress 提供了一個功能:附加 CSS (在「自訂」功能中),可以讓你設定 CSS,達成版面微調的效果!
這篇會學一些程式語法,對於沒學過程式的人來講可能會需要花一點點時間熟悉,但我跟你保證並不會難,把這一篇多看幾次就可以上手了,如果有不懂的地方也歡迎留言詢問!

HTML 與 CSS
可以想像 HTML 是我們房子的骨架,CSS 則是房子的裝潢。HTML 是撰寫網頁基本內容的標籤語言,CSS 是網頁的化妝師,網頁的編排、美化都是靠 CSS 達成!
WordPress「附加的 CSS」
WordPress 的「附加的 CSS」在大部分的情形之下,會將你寫的 CSS 覆蓋原本的語法,而達成顯現你要的畫面。但不建議藉由「附加的 CSS」寫上大量的 CSS 把整個網頁畫面大改!建議還是找到跟你期望很相近的佈景主題,再藉由「附加的 CSS」修改一小部分的元件畫面即可。
基本的 CSS

CSS 一開始可能要花一點點時間理解,但他其實沒有很難。我職業是網頁工程師,CSS 有一定的熟悉度,我也盡量以簡單的方式讓大家理解 CSS 的基本語法。
CSS 格式是以頁面元素+頁面樣式形成。頁面元素是 「CSS 抓取 HTML 標籤」找到我們想要修改的位置,頁面樣式就是我們想要調整的樣子。
CSS 抓取 HTML 頁面元素
<div class="new-class post-2" id="HelloId"> Hello! </div>
上面是基本 HTML 語法,如果你不熟 HTML,你只要記得以下事情就可以了:
- 外面一定會用標籤符號包住裡面的內容( ex: <>內容</>)
- 標籤名稱會不一樣( ex: <div>, <p>, <span> )
- class 和 id 是選用,不會每個標籤都有
- class 內容可以多組,中間用空白建區隔(像上面的new-class、post-2)
假設我們現在想要幫「Hello!」改變樣式,那我們要如何使用 CSS 抓取上面那一段 HTML 元素呢 ? 在這邊我提出一個容易使用的公式抓取頁面元素:
- [標籤].[選取一個 Class 內容名稱]:如果標籤中只有 class,使用標籤 + class的方法,注意 class 前面要有「.」
- #[id名稱]:如果標籤中有 id,直接拿 id 名稱即可,注意 id 前面要有「#」
所以我們的取法會變成下面這樣,兩種方法都可以取得元素:
div.new-class {
// style;
}
#HelloId {
// style;
}
到這邊,我們提一下 CSS 取得元素的語法,幫助你記憶:
- class 前面會用「.」
- id 前面會用「#」
- 標籤前面不會有任何的記號
- 同層級的標籤與class,我們可以直接把他連起來使用(ex: div.new-class)
CSS 抓取多層次 HTML 標籤
我們的 HTML 結構通常沒有向上面範例那麼簡單,假設有下面例子
<span> 我在外面 </span>
<div class="container">
<div class="main">
<span> 我在裡面 </span>
</div>
</div>
如果我們想要更改「我在裡面」字體的樣式,照前一段文章的邏輯,我們會想要使用 span + class 名稱的方法,但是,我們發現「我在裡面」的 span 標籤,沒有 class 可以讀取,那怎麼辦?
如果我們的 css 的頁面元素僅僅使用 span,會連上面的「我在外面」的 span 元素一起被改掉,我們在下面看看這錯誤的範例:
span {
// 這更改方式會讓整個網頁的span樣式都被更改
}
我們今天只是想要更改「我在裡面」的 span 標籤,但我不想要把所有網站的 span 標籤都改掉,我們就需要在 css 把外面的標籤也都寫進去頁面元素裡面,才能抓到我們想要的標籤,下面的三種方法都可以:
div.container div.main span {
// 從最外面的標籤開始寫,把包在外面的標籤與 class 都寫進來,中間用空格隔開
}
div.main span {
// 我們也不一定要每層標籤都寫,這樣寫也可以,如果這樣沒辦法改到樣式,我們再把 div.container 寫進來
}
.container .main span {
// 如果不想打太多字,我們單純寫 class,也可以達到一樣的效果
}
到這邊,我們總結前面與到現在 CSS 取得元素的語法,幫助你記憶:
- class 前面會用「.」
- id 前面會用「#」
- 標籤前面不會有任何的記號
- HTML 同層級的標籤與 class,在 css 的頁面元素中,可以直接把他連起來使用(ex: div.new-class)
- HTML 不同層級的標籤與 class,在 css 的頁面元素中,中間需加上空格(ex: .class-1 .class-2)
不可使用的class
在 WordPress 中,帶有「數字」或「亂碼」的 class 會因為不同文章而變動 ( ex: post-2 ),這種 class 因為不是固定的,所以不能在 CSS 裡面寫到這類型的 class
使用 Google Chrome 開發者工具取得頁面元素
那我們怎麼知道在WordPress裡面我們想修改的地方,他的 HTML 架構是什麼? 因為我們要知道 HTML 架構,才能去寫 CSS ,這時候開發者工具就派上用場了。
因為不同的佈景主題,HTML程式碼可能會不一樣,在此我以我的部落格模板為範例。
按下 F12 開啟開發者工具
我們進去我們的部落格網站,按下 F12 ,這時候網頁右邊會出現密密麻麻的程式碼,那個就是開發者工具。

找尋我們要修改的元素
在開發者工具的左上方,有個箭頭圖案(檢查工具),點選他,他可以透過游標點選網頁上的元件,直接在開發者工具顯示目標元件的 HTML 碼。

點選之後,在開發者工具會顯示我們需要修改的程式碼區段
檢視 HTML 架構
如果我想要更改「近期文章」的文字顏色變成綠色,我需要先找到近期文章所依附的標籤是什麼:
從下方圖,我們知道了幾件事情:
- 「近期文章」用<h4> 標籤包著
- 但是網頁其他地方也可能有用<h4>,我只想改這邊而已,不想其他地方也被改到樣式
- 我需要往外找標籤,上面一層標籤和上上一層標籤都有 class 可以幫助區別 ( 如黃色標註 )
- 上面的 class 「wp-container-62357f7e47c74」因為帶有亂碼,表示此 class 在其他地方可能會被變動,不可以使用

撰寫 CSS 在「附加的CSS」中
我們預估寫完的 css 會是這樣
.wp-block-group .wp-block-group__inner-container h4 {
color: green;
}
但是因為我只需要網上寫一層,就可以幫助「近期文章」文字顏色變成綠色了,所以我們不用寫.wp-block-group在最前面了。


到這邊寫的有一點累,我們下篇再來講樣式要怎麼寫吧!