本文目錄1WordPress 子主題簡介2目錄結構3必需的style.css文件4一個子主題的范例4.1註意 @import 規則5使用 functions.php6樣版文件7其他文件
相信很多朋友使用的WordPress主題都經過瞭自己的一些修改,好不容易折騰好瞭,主題的升級版發佈瞭,要不要升級呢?升級以後,還得重新再次修改?鬱悶啊!
其實,你大可不必如此煩惱,使用Wordpress的子主題功能,一切問題都可以迎刃而解!
WordPress 子主題簡介
WordPress子主題也是一個主題,它繼承瞭另一個主題——父主題——的功能,並允許你對父主題的功能進行修改,或者添加新功能。
創建一個子主題是很簡單的。創建一個目錄,將格式編寫正確的 style.css 文件放進去,一個子主題就做成瞭!
隻需要對 HTML 和CSS 具有基本的瞭解,您就可以通過創建一個非常基本的子主題 來對一個父主題的樣式和佈局進行修改和擴展,而不需要對父主題的文件作任何修改。
通過這樣的方式,當父主題被更新的時候,您所做的修改就可以保存下來。
因為這個原因,我們強烈推薦您使用子主題的方式來對主題進行修改。
如果您對 PHP, WordPress Templates,和 WordPress Plugin API有個基本的理解,理論上來講,您可以使用子主題對父主題的每一個方面進行擴展,而不需要對父主題的文件進行任何修改。
本文將說明如何創建一個基本的子主題並解釋您能用它來幹什麼。本文將使用 WordPress 3.0 的默認主題 Twenty Ten 作為父主題進行舉例說明。
目錄結構
子主題放在wp-content/themes目錄下屬於自己的目錄裡。下面的結構顯示的就是子主題和它的父主題(Twenty Ten)在典型的WordPress目錄結構中的位置:
public_htmlwp-contentthemes (主題存放的目錄)twentyten (示例中父主題Twenty Ten的目錄)twentyten-child (子主題存放的目錄,可以任意命名)style.css (子主題中不可或缺的文件,文件名必需為 style.css)
這個文件夾裡面可以少至隻包含一個style.css文件,也可以包含多至一個完整WordPress主題所擁有的文件:
style.css (必需)functions.php (可選)Template files (可選)Other files (可選)
讓我們看看它們是如何起作用的。
必需的style.css文件
style.css是一個子主題唯一必須的文件。它的頭部提供的信息讓WordPress辨認出子主題,並且重寫父主題中的style.css文件。
對於任何WordPress主題,頭部信息必須位於文件的頂端,唯一的區別就是子主題中的Template:
行是必須的,因為它讓WordPress知道子主題的父主題是什麼。
下面是一個style.css文件的頭部信息的示例:
1 2 3 4 5 6 7 8 9 |
/*
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: 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,等。
*/
這個關閉標記的後面部分,就會按照一個常規的樣式表文件一樣生效,你可以把你想對WordPress應用的樣式規則都寫在它的後面。
要註意的是,子主題的樣式表會替換父主題的樣式表而生效。(事實上WordPress根本就不會載入父主題的樣式表。)所以,如果你想簡單地改變父主題中的一些樣式和結構——而不是從頭開始制作新主題——你必須明確的導入父主題的樣式表,然後對它進行修改。
下面的例子告訴你如何使用@import
規則完成這個。
一個子主題的范例
這個例子中的父主題是Twenty Ten,我們喜歡這個主題的幾乎每個部分,除瞭網站標題的顏色,因為我想把它從黑色的改成綠色的。使用子主題的話,隻用完成以下三個簡單的步驟:
在wp-content/themes目錄下創建一個新目錄,並將它命名為twentyten-child(或其他你喜歡的名稱)。將下面的代碼保存在名為style.css的文件裡,並將它放到新建的這個文件夾。到WordPress的控制臺>主題,然後激活你的新主題:Twenty Ten Child。
1 2 3 4 5 6 7 8 9 10 11 12 |
/* Theme Name: Twenty Ten Child Description: Child theme for the Twenty Ten theme Author: Your name here Template: twentyten */ @import url("../twentyten/style.css"); #site-title a { color: #009900; } |
/*
Theme Name: Twenty Ten Child
Description: Child theme for the Twenty Ten theme
Author: Your name here
Template: twentyten
*/ @import url("../twentyten/style.css"); #site-title a {
color: #009900;
}
下面一步步解釋上面代碼的作用:
/*
開啟子主題的頭部信息。Theme Name:
子主題名稱的聲明。Description:
主題的描述(可選,也可被省略)。Author:
作者名字的聲明(可選,也可被省略)。Template:
聲明子主題的父主題,換言之,父主題所在的文件夾的名稱,區分大小寫。*/
子主題頭部信息的關閉標記。用 @import
規則將父主題的樣式表調入#site-title a
定義網站標題的顏色(綠色),覆蓋父主題中相同的樣式規則。
註意 @import
規則
需要註意的是,@import
規則之前沒有其他的CSS樣式規則,如果你將其他的規則置於它之上,那麼它將無效,並且父主題的樣式表不會被導入。
使用 functions.php
不像style.css,子主題中的functions.php不會覆蓋父主題中對應功能,而是將新的功能加入到父主題的functions.php中。(其實它會在父主題文件加載之前先載入。)
這樣,子主題的functions.php提供瞭一個靈活穩定的方式來修改父主題的功能。如果你想在你的主題裡加入一些PHP函數,最快的方式可能是打開functions.php文件然後加入進去。但那樣並不靈活:下次你的主題升級更新瞭,你加入的新功能就會丟失掉。相反地,如果你使用子主題,將functions.php文件放進去,再將你想加入的功能寫進這個文件裡,那麼這個功能同樣會工作得很好,並且對於父主題以後的升級更新,子主題中加入的功能也不會受到影響。
functions.php文件的結構非常簡單:將PHP起始標簽置於頂部,關閉標簽置於底部,它們之間就寫上你自己的PHP函數。你可以寫得很多,也可以寫得很少,反正按你所需。下面的示例是一個基本的functions.php文件的寫法,作用是將favicon鏈接加入到HTML頁面的head元素裡面。
1 2 3 4 5 6 7 8 |
<?php function favicon_link() { echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "n"; } add_action('wp_head', 'favicon_link'); ?> |
<?php function favicon_link() {
echo ‘<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />’ . "n";
}
add_action(‘wp_head’, ‘favicon_link’); ?>
給主題作者的提示。事實上子主題的functions.php首先加載意味著你的主題的用戶功能可插入——即子主題是可替換的——通過有條件地進行聲明。例如:
1 2 3 4 5 |
if (!function_exists('theme_special_nav')) { function theme_special_nav() { // Do something. } } |
if (!function_exists(‘theme_special_nav’)) {
function theme_special_nav() {
// Do something.
}
}
用這種方式,子主題可以替換父主題中的一個PHP函數,隻需要簡單地對它再次聲明。
樣版文件
樣版文件 在子主題中的表現和style.css一樣,它們會覆蓋父主題中的相同文件。子主題可以覆蓋任何父主題樣版中的文件,隻需要創建同名文件就行。(註意:index.php在WordPress3.0及以上版本才能被覆蓋。)
同樣,這項WordPress的功能允許你修改父主題的樣式功能而不用去編輯父主題的文件,並且你的修改能讓你在更新父主題後繼續保留。
下面是一些使用樣版文件的子主題的例子:
增加一個父主題沒有提供的樣版(例如:網站地圖頁面的樣版,或者一單欄頁面,它們在頁面編輯,樣版選擇裡是可用的)增加一個比父樣版更加具體的樣版(見樣版級別)。(例如:新加的tag.php樣版用於按tag歸檔的文章來代替父主題中通常的archive.php樣版。)替換父主題中的一個樣版.(例:使用你自己的home.php來覆蓋父主題中的home.php)
其他文件
除瞭style.css,functions.php,index.php和home.php,子主題可以使用任何正式主題使用的類型的文件,隻要文件被正確鏈接。打個比方,你可以使用在樣式表裡或者Javascript文件裡鏈接的圖標、圖片,或者從functions.php文件中調用出來的額外PHP文件。