WordPress模板層次05：style.css樣式表

所有WordPress主題都包含一個名為style.css的樣式表。它不僅包含主題所需的主要CSS樣式程式碼，還有在其檔案頂部的註釋中的：主題的後設資料資訊。

拖動主題到 Sublime Text 編輯器

由於我們將會全面的講解主題的模板層次結構，所以，把主題資料夾拖入到了 文字編輯器 Sublime Text 中會極大的方便程式碼操作。

然後，在 Sublime Text 的檔案列表中找到並開啟style.css檔案。

You must be logged in to view the hidden contents.

所有WordPress主題都需要有一個style.css檔案。主要的原因是因為它必須包含關於主題本身的元資訊。

比如說，在這個檔案的頂部的註釋，它提供有關主題的資訊，例如主題是誰建立，主題的版本和描述等等。

/*
Theme Name: Template Hierarchy /***主題名稱***/
Author: MrBang /***主題作者***/
Description: Example theme for working with template hierarchy/***主題描述***/
Version: 1.0/***主題版本***/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

子主題的Style.css

什麼是子主題

WordPress子主題也是一個主題，它繼承了另一個主題——父主題——的功能，並允許你對父主題的功能進行修改，或者新增新功能。

什麼是Style.css

這是WordPress關於子主題的style.css的介紹：

點我跳轉

style.css是一個子主題唯一必須的檔案。它的頭部提供的資訊讓WordPress辨認出子主題，並且重寫父主題中的style.css檔案。

對於任何WordPress主題，頭部資訊必須位於檔案的頂端，唯一的區別就是子主題中的Template:行是必須的，因為它讓WordPress知道子主題的父主題是什麼。

下面是一個style.css檔案的頭部資訊的示例：

/*
Theme Name:     Twenty Ten Child
Theme URI:      http: //example.com/
Description:    Child theme for the Twenty Ten theme 
Author:         Your name here
Author URI:     http: //example.com/about/
Template:       twentyten
Version:        0.1.0
*/

逐行的簡單解釋：

• Theme Name. (必需) 子主題的名稱。
• Theme URI. (可選) 子主題的主頁。
• Description. (可選) 子主題的描述。比如：我的第一個子主題，真棒！
• Author URI. (可選) 作者主頁。
• Author. (optional) 作者的名字。
• Template. (必需) 父主題的目錄名，區別大小寫。 注意： 當你更改子主題名字時，要先換成別的主題。
• Version. (可選) 子主題的版本。比如：0.1，1.0，等。

如何新增子主題的Style.css

如果你想建立子主題，那麼這個CSS檔案同樣也需要在頂部放置關於這個子主題對應的父主題的資訊。

所以，如果你想簡單的為主題新增一個父主題，只需在註釋中簡單地複製Template這一行，並將其貼上到我們的主題中。就像這樣：

/*
Theme Name: Template Hierarchy 
Author: bangge
Description: Example theme for working with template hierarchy
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template:       twentyten /***為主題宣告父主題***/
*/

如果你正在建立一個子主題，那麼你還需要從父主題中匯入css樣式。以便可以獲得父主題的主要樣式以及模板程式碼。

只需新增這行：

如果這裡沒有包括這一行，那麼你可能有一個自己的子主題樣式。但是，它不會從父主題匯入，因此實際上就不會像父主題一樣。它可能看起來像一個完全空白的主題。

引入外部css的方式方法

一般來說，@import通常是包含父主題CSS樣式的最佳方法。

但是，如果不是從父主題包含的話，並且你想從外部或額外的CSS，最好的方法是通過functions.php檔案引入。

這裡先不講解引入的程式碼。但是，我們會在主題實戰開發課程中深入介紹如何從functions.php檔案中連結到CSS和JavaScript。

刪除示例程式碼

這一節的所有內容都是為了講解子主題的概念，所以新增的示例程式碼都不需要儲存。