Last Updated on 2021-10-18 by Clay
在 WordPress 架設的網站中，若是對於某個元件的樣式設計不滿意，其實我們是可以透過自訂 CSS 語法去調整元件的樣式的。
在本文中，以 內嵌程式碼 為例（就是右邊那個特別的區塊）。
為什麼要修改內嵌程式碼的樣式呢？這是因為在不久之前，我將 WordPress 網站的主題更換成了 Neve，在這個主題中，我網頁中預設的『內嵌程式碼』樣式居然是：
這真的是太酷了。不過作為象徵程式碼的背景，我個人覺得有點奇怪。
我理想中在文章內的內嵌程式碼，應該要像 G. T. Wang 先生的部落格：
那麼我們應該如何更改呢？
自訂 CSS 樣式
其實不論是哪個元件，要做的步驟都是一樣的。
- 找到『元件的網頁原始碼類別』
- 在後台 > 外觀 > 自訂 > 附加的 CSS 中添加 CSS 程式碼
找到『元件的網頁原始碼類別』（以內嵌程式碼為例）
假設我們要找的就是 print("Hello World!") 這一段程式碼，我們可以在瀏覽器中打開網頁原始碼，並搜尋這一段程式碼：
我們可以發現，這段程式碼是被 <code>***</code> 這樣的格式所包圍。所以我們要修改的其實就是 <code> 這個標籤。
在『附加的 CSS』修改元件樣式
在 WordPress wp-admin 的後台左側選單中 "Appearance" -> "Customize" -> 附加的 CSS 中設定 CSS 樣式。
code {
border-color: rgb(220,220,220);
border-radius: 7px;
background: rgb(245,245,245);
padding: 1.8px;
padding-left: 5px;
padding-right: 5px;
}
Output:
而要修改成什麼樣子、跟使用什麼樣的 CSS 語法呢？在這點上，我覺得就『邊試邊查』吧！畢竟沒有實際看過，只憑想像是很難調整出自己喜歡的樣式的。
References
- https://themeisle.com/blog/css-in-wordpress/
- https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/