Day 5 WordPress 樣式客製化與 CSS：樣式介紹與佈景主題架構

第 12 屆 iThome 鐵人賽

DAY 5

自我挑戰組

WordPress 客製化從 0 開始系列第 5 篇

12th鐵人賽 wordpress css

Eric 桓桓

2020-09-06 23:46:42

2763 瀏覽

分享至

大家好，我是 Eric。

第二到第四天的文章中，我們透過觀察 WordPress 佈景主題的檔案，了解了基本的 HTML 5 架構與語意化標籤。接著，在骨架完成後，我們將開始進入第二個階段：網站的外貌，階層式樣式表 (Cascading Stylesheets)，也就是我們常說的 CSS。

內嵌樣式、style 與外部靜態檔案

在開始說明 CSS 前，我們先來看看 CSS 可以用什麼樣的形式出現在網頁中。

內嵌樣式 (inline styling)

在解說 HTML 時曾經提到，不同的標籤，可以搭配 style 這個屬性，用以決定該區塊的樣式。基本語法如下所示：

<p style="font-size: 48px">
    這一段字的文字大小為 48px。
</p>

透過 style 屬性，我們指定這個區塊中，文字大小應為 48px。

這種做法在使用上最直觀，但隨著網站規模越來越龐大，如果每個樣式都必須要重複這個做法，會相當沒有效率。因此才會有 <style> 與外部靜態檔案的做法產生。

style

除了透過內嵌的方式外，另一種定義樣式的方式為 <style> 標籤。而 <style> 標籤，在定義上必須寫在 <head> 標籤之中；雖然將 <style> 寫在內容區 <body> 裡，瀏覽器基本上也都能轉譯出結果，但這種做法並不正確。

由於 <style> 並不在 <body> 之中，這樣會產生一個問題：

瀏覽器要怎麼知道你的樣式要套用在誰身上？

因此，除了內嵌樣式以外，不論是 <style> 或是外部檔案的方式，我們都必須要透過一種特定的方式，來告訴瀏覽器：「把樣式套用在我選的元素上。」這，就是 CSS 選擇器 (CSS Selector)。有關 CSS 選擇器的內容，我們留待下一章討論。

使用 <style> 標籤來設定樣式的基本語法如下，值得注意的是，下列的語法，可以得到與前一小段內嵌樣式範例一樣的結果：

<head>
    <title>This is title</title>
    <style>
        p {
            font-size: 48px;
        }
    </style>
</head>
<body>
    <p>
        這一段字的文字大小為 48px。
    </p>
</body>

外部靜態檔案 (external static files)

外部靜態檔案指的就是 CSS 檔，可以說是狹義的 "Stylesheets"。

透過引入外部的 CSS 檔，可以將網站的檔案架構做比較細緻的分工，在遇到網站架構較複雜的時候，這種做法更能集中管理這些靜態資源。因為是「外部檔案」，因此語法範例我們將拆成兩個部分來看。

/* 檔名: style.css */
p {
    font-size: 48px;
}

<head>
    <title>This is title</title>
    <link rel="stylesheet" src="style.css">
</head>
<body>
    <p>
        這一段字的文字大小為 48px。
    </p>
</body>

注意到了嗎？外部檔案就是將原本 <style> 內所指定的樣式，通通包裝成另一個名為 style.css 的檔案。透過這個方法，未來我們便可以在不更動頁面內容的情況下，修改不同的樣式。

WordPress 佈景主題的架構

說起 WordPress 客製化，當從佈景主題講起。這是因為佈景主題決定了：「在沒有安裝外掛的情況下」，其他人看到的網站樣貌。

在第二天〈用 WordPress 了解 HTML5 語意化標籤〉中，我們知道佈景主題是透過模組化網頁的構成要素 (例如 header、content、footer、sidebar) 後，再根據情境組合出不同頁面。而根據 WordPress 開發人員手冊，佈景主體的基本架構如下：

檔名	功能
必要檔案	必須要具備的檔案。
index.php	主要範本，所有佈景主題必須要有這個檔案。
style.css	主要的樣式表，所有佈景主題必須要有這個檔案，並且須要於標頭記載佈景主題資訊。
functions.php	主要功能，包含佈景主題支援哪些核心功能，以及客製化功能等。
選用檔案	視情況選用的範本檔案，以下依重要性排序。
rtl.css	RTL 樣式表，如果網站的語言是由右至左，如阿拉伯文，則會自動套用這個檔案。
comments.php	留言區範本。
front-page.php	靜態首頁範本，只有在 [控制台] > [設定] > [閱讀] 有指定靜態首頁時有用。
home.php	在 [控制台] > [設定] > [閱讀] 選擇「最新文章」或選擇「文章頁面」時使用的範本。
header.php	頁首範本，通常包含了 `<head>` 以及 `<body>` 的開頭。
footer.php	頁尾範本，通常用來作為頁面的結尾，會包含 `</body>` 與 `</html>`。
singular.php	單頁範本，相對於彙整頁範本，處理單一內容時使用。在 single.php 或 page.php 不存在時，會使用此範本。
single.php	單一內容範本，針對文章或其他自訂內容類型時使用。如果要針對特定自訂內容，則檔名應改為 single-{內容類型}.php。與之對應的是彙整頁範本 archive.php 與 archive-{內容類型}.php
page.php	頁面範本，用於 [頁面] 的範本。可以透過 page-{代稱}.php 的方式，指定特定路徑的範本，例如 page-about.php 就會指定 /about/ 頁面的內容。
category.php	文章的分類彙整頁範本。
tag.php	文章的標籤彙整頁範本。
taxonomy.php	分類法彙整頁範本，用於自訂的分類法。
author.php	作者彙整頁範本。
date.php	日期彙整頁範本，例如年、月、日等。
archive.php	彙整頁範本，沒有上述彙整頁範本時，就會使用此範本。
search.php	搜尋結果範本。
attachment.php	附加檔案範本。由於 WordPress 會替媒體庫的檔案額外產生頁面，因此可以透過修改這個檔案調整、隱藏使用者可見的內容。
image.php	圖片頁範本，比 attachment.php 更精確。
404.php	404 範本，找不到網頁時使用。
readme.txt	佈景主題的說明檔，如果佈景主題沒有要上架到 WordPress 的儲存庫，其實並不需要特別注意。

上述的檔案，都能在佈景主題的根目錄當中找到。我們一樣以 Twenty Twenty 為例，他的根目錄包含了下列檔案：

404.php
comments.php
footer.php
functions.php
header.php
index.php
print.css
readme.txt
screenshot.png
searchform.php
singular.php
style-rtl.css
style.css

style.css 標頭

在了解佈景主題的基本架構後，我們回到前面提到的說明：style.css 須要於標頭記載佈景主題資訊。接著，我們就以 Twenty Twenty 的 style.css 為例，來看佈景主題的 style.css 應該要包含哪些項目。由於篇幅的關係，部分內容較長的地方，我會用 {{}} 替代：

/*
Theme Name: Twenty Twenty
Text Domain: twentytwenty
Version: 1.0
Requires at least: 4.7
Requires PHP: 5.2.4
Description: {{說明}}
Tags: {{標籤}}
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/

一個完整的佈景主題標頭，需要包含佈景主題的名稱 (Theme Name)、版本號 (Version)、最低支援 WordPress 版本 (Requires at least)、最低支援 PHP 版本 (Requires PHP)、授權方式 (License)。至於敘述 (Description)、標籤 (Tags)、作者資訊 (Author/Author URI) 與佈景主題資訊 (Theme URI) 則端看你是否打算將佈景主題發佈在 WordPress 的資源庫裡面，讓一般使用者搜尋安裝，如果有的話再完整填寫。

Text Domain 則看你的佈景主題是否有打算具備本地化功能，讓不同語言的使用者得以翻譯回他們的母語。

結語

現在我們除了了解了 HTML 5 以外，我們也對於網站如何處理「樣式」做了初步的介紹。結論來說，內嵌樣式最直觀、外部靜態檔案最好管理。
這篇文章的第二部分，主要目的在介紹 WordPress 佈景主題的基本架構。並透過 style.css 的標頭，真正開始進入 WordPress 客製化的 CSS 環節。
下一章，我們將討論 CSS 最重要的：CSS 選擇器。