WordPress 建立子主題

WordPress 提供好用的「子主題(Child Theme)」功能,在放置自建 CSS 樣式與 function 時很好用,就不必擔心版本升級或變更版面主題時,這些自建的資料會被覆蓋而消失。要建立子主題,並將自己修改的 CSS 樣式與 function 移置進去,主要是幾個步驟:

第一、建立子主題目錄
第二、建立一個新的 style.css
第三、建立新 style.css 裡的主題繼承
第四、啟用這個子主題
第五、將所添加的 CSS 資料全數移置到新的 style.css 裡

這裡就以 twentyten 為例,請以個人需求自行修改。這個主題編號為數字「2010」,在「佈景主題」頁面顯示為中文「貳零壹零」或英文「Twenty Ten」,在「主題目錄」裡顯示為英文「twentyten」,在建立主子題的步驟中,所有書寫都使用英文「twentyten」。

第一、建立子主題目錄

WordPress 將所有主題存放在 themes 中,由於當前使用的主題名稱是 twentyten,所以它的所在目錄是:
/(wordpress目錄)/wp-content/themes/twentyten

要建立它的子主題,就要依照 WordPress 規定,在 themes 新建一個 twentyten-child:
/(wordpress目錄)/wp-content/themes/twentyten-child

於是就形成了這樣的目錄結構:

第二、在這個新目錄裡建立一個新的 style.css

剛開始 twentyten-child 還是一個空目錄,得在目錄中新建一個文件叫 style.css,子主題只要有這個文件就能運作。但是這個新的樣式表,標頭必須以下列這必要的幾行開始,連首尾的 /*  */ 都不能省略:

/*
Theme Name:
Template:
Text Domain:
*/

Theme Name:     【子主題名稱】
Template:          【模板名稱,也就是父主題的目錄名稱】
Text Domain:     【文本域名,也就是子主題的 ID,進階使用者編寫程式碼時會用到】
(其中 Text Domain 一項,一般使用者其實也可以忽略不寫。)

第三、在這個新 style.css 裡指定要繼承的父主題

然後加上父主題的名稱 twentyten 和導入命令@import

/*
Theme Name: Twenty Ten Child
Template: twentyten
Text Domain: twenty-ten-child
*//* 已改由 functions.php 載入 */
@import url(“../twentyten/style.css”);/*======底下開始自己的 CSS ======*/

注意每一行 twentyten 的書寫法,尤其是 Template 樣式模板和 @import url 導入命令,用的就是父主題目錄名稱 twentyten,一定要完全一致才能生效。
(其中 Text Domain 名稱用的是連字符「-」,不是底線符「_」。)

補充:
WordPress 已更改為由 functions.php 載入此子主題之 style.css 或其它 .css,參見本篇。functions.php 內容如下:(直接複製貼上即可)
<?php
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
function my_theme_enqueue_styles() {

$parent_style = ‘parent-style’; // This is ‘twentyfifteen-style’ for the Twenty Fifteen theme.

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style ),
wp_get_theme()->get(‘Version’)
);
}
?>
第四、啟用這個子主題

新建子主題的 style.css 製作完成存檔後,就要「啟用」才生效。進入:控制臺>外觀,來選擇佈景主題,通常排在首位的就是已啟用的主題,而新建的子主題會排在下方。按下子主題 Twenty Ten Child 的啟用鈕,就能啟用這個子主題,它成為佈景主題的首位,代表啟用完成。(註:若是多路網誌,須先由網路網誌管理員於網誌網路中啟用,此子主題才能使用)

 

★ 假如覺得自建子主題外觀,少了圖形呈現,一片灰很難看,就把父主題裡一個 screenshot.png 圖形檔,複製到子主題目錄中,就能擁有和父主題一樣的圖形呈現外觀了。

這樣就完成子主題建立了。

第五,將所添加的 CSS 資料全數移置到新的 style.css 裡

步驟請看本篇

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *