WordPress | 統一修改文章內的標題樣式

在WordPress寫文章，預設的標題樣式與內文只有粗細及大小的區別，想要讓標題看起來顯眼特別一點，可以自行調整css樣式，本篇說明如何統一調整每篇文章的標題樣式，不用一篇一篇的手動調整，可維持整個網誌的一致性及方便維護。

文章標題

網頁的標題層級是h1~h6，h1最大最重要，h6最小，設定標題除了易於閱讀外，也對seo排名有幫助。在WordPress中h1為文章的大標題，內文標題通常是由h2開始。

預設樣式：

修改後：

CSS基本介紹

簡單說明一下css規則

選擇器：選擇欲樣式化的HTML元素
宣告：每個宣告中，包含屬性與值
屬性：修改HTML樣式特徵
值：一個屬性對應一個值

修改標題樣式

如何將預設的標題樣式改成自己想要的呢？這裡以修改h2標題當範例，修改步驟如下：

步驟1

登入WordPress後台，Appearance > Customize

步驟2

選擇「Additional CSS」
右側預覽頁面，可點其中一篇文章以方便調整內文標題

步驟3

將以下的css貼入，再調整成自己想要的樣式後，點選「Publish」就完成修改h2的樣式囉！

.entry-content h2 {
    background-color: #efefef;
    padding: .2em .2em .2em .4em;
    border-left: 5px solid #719430;
}

修改其他預設樣式

不是只有標題可以修改，其他的元素的樣式，如：段落、說明文字……也都可以修改喔！
只要知道「選擇器」的名稱，就可以修改！要如何知道「選擇器」呢？方法如下：

1. 使用Chrome瀏覽器，開啟「開發者工具」（快速鍵： F12 或 Ctrl + Shift + I）
2. 在「開發者工具」的視窗，點選左上角的鍵頭，以「開發者工具的選取鈕」（快速鍵：Ctrl + Shift + C），點選網頁中的「元素」，就可以比對html，找到「選擇器」囉

以本篇的h2為例，選擇器為.entry-content h2，對照html可以知道h2是在一個class名為entry-content的div中。

自訂class樣式

在Additional CSS也可以新增自訂的class樣式，這裡我有新增了一個樣式，主要用來寫「步驟」用的，css如下：

.heading-step {
    background-color: #719430;
    color: #fff!important;
    display: inline-block;
    padding: .4em;
    border-radius: 3px;
    margin-top: 2em;
}

套用方法：

1. 在寫文章的時，選擇欲套用的段落
2. 右欄點選「Block」> 展開「Advanced」
3. 「Additional CSS class(es)」填入 heading-step即可