WordPress樣式微調自己來！使用CSS微調佈景模板(1)

在選擇 WordPress 佈景主題之後，多多少少心裡會有這些聲音出現：「欸感覺標題字體大小可以調整」、「佈景的超連結顏色不喜歡，想要改變」，而且使用熱門模板，應該也蠻容易跟其他部落客「撞版」，一看就知道用一樣的模板，有時會覺得好像沒有把部落格佈景打造出自己的獨特特色出來。

因此，WordPress 提供了一個功能：附加 CSS (在「自訂」功能中)，可以讓你設定 CSS，達成版面微調的效果！

這篇會學一些程式語法，對於沒學過程式的人來講可能會需要花一點點時間熟悉，但我跟你保證並不會難，把這一篇多看幾次就可以上手了，如果有不懂的地方也歡迎留言詢問！

部落格css
我為部落格撰寫的 CSS

HTML 與 CSS

可以想像 HTML 是我們房子的骨架，CSS 則是房子的裝潢。HTML 是撰寫網頁基本內容的標籤語言，CSS 是網頁的化妝師，網頁的編排、美化都是靠 CSS 達成！

WordPress「附加的 CSS」

WordPress 的「附加的 CSS」在大部分的情形之下，會將你寫的 CSS 覆蓋原本的語法，而達成顯現你要的畫面。但不建議藉由「附加的 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 架構

如果我想要更改「近期文章」的文字顏色變成綠色，我需要先找到近期文章所依附的標籤是什麼：

從下方圖，我們知道了幾件事情：

  1. 「近期文章」用<h4> 標籤包著
  2. 但是網頁其他地方也可能有用<h4>，我只想改這邊而已，不想其他地方也被改到樣式
  3. 我需要往外找標籤，上面一層標籤和上上一層標籤都有 class 可以幫助區別 ( 如黃色標註 )
  4. 上面的 class 「wp-container-62357f7e47c74」因為帶有亂碼，表示此 class 在其他地方可能會被變動，不可以使用

撰寫 CSS 在「附加的CSS」中

我們預估寫完的 css 會是這樣

.wp-block-group .wp-block-group__inner-container h4 {
  color: green;
}

但是因為我只需要網上寫一層，就可以幫助「近期文章」文字顏色變成綠色了，所以我們不用寫.wp-block-group在最前面了。

變成綠色

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

參考

w3c css教學