5分鐘教你如何透過 自訂CSS修改WordPress主題外觀

5分鐘教你如何自訂CSS修改WordPress主題外觀

上週在班上進行專題輔導時，有學生詢問我說如何透過CSS在WordPress中修改佈景主題樣式?他覺得主題的樣是太醜了~

我笑著說修改不難阿~難的是想要修改成怎樣的模樣(本人極度沒有美感)。

我通常是有模板就用模板啦~懶得去修改這些細節。

不過在回家途中突然想到，也許會有其他朋友們會有此問題，因此就把過程寫成教學文，讓大家快速了解操作的流程~

我們這次的教學目標設定為如何修改主題中標題(如下圖紅框所示)

操作步驟：(如下圖)

1.選取主題中要修改的區塊，按右鍵點選「檢查」，會跳出語法欄位，依照設定的不同可能會出現在螢幕下方或是螢幕右方，但這並不影響操作。

2.找到相對應的語法後我們這邊先暫時不修改，此次目標放在修改字體大小、字體顏色。

3.再往下尋找對應的語法，可以找到有一段叫做font-size的地方，這個即為我們要修改字體大小的地方。

4.接著針對font-size調整成想要的大小，我們這邊先將自體設定成50px，顏色調整為紅色，字體調整為斜體，調整完後左邊視窗即會跟著做為調整(但這僅為測試調整，正式調整部分待會會做說明)

5.接著複製上方圖片紅色框中我們修改過後的code(如下圖)

補充說明:

屬性	說明
font-size	設定文字大小，屬性值採用 "數字 + 單位" 呈現，數字越大通常表示字體越大。
font-weight	設定文字粗細，屬性值設為 bold 即為粗體字。
font-style	設定文字樣式，有兩種斜體字屬性值可用，分別為 italic 及 oblique
font-family	設定文字字型，可設定多個不同字型依序排列

補充字體說明(font-family):

字型	語法
細明體	MingLiU
新細明體	PMingLiU
標楷體	DFKai-sb
微軟正黑體	Microsoft JhengHei

• 也可以上去google font尋找更多字體: https://fonts.google.com/

6.進入wordpress後台，進去安裝外掛選項，搜尋 wp add custom css，安裝紅框中的外掛並選擇啟用。.

7.啟用完畢後，在左下角會出現wp add custom css選項，點選進入外掛並貼上剛剛複製的code，按下儲存，即可成功更新想要的效果。

8.回到網頁，重新整理。即可更新成想要的模式。

希望透過上述的簡單示範可以幫助到有需要的朋友，但還是建議大家花一點時間去研究一下CSS+HTML，才能更加熟悉操作!上述是懶人法，給非工程師的朋友來使用~

本人也是在努力學習中，共勉之!

撰文/陳建夆