還記得以前在使用Lifetype的時候,我曾經發表過一篇關於Lifetype樣板的繼承架構文章嗎?那時候是為了讓不同的部落格中,可以各自有各自的細節設定,但共同的部份統一管理,所以想出了這樣的一個樣板(Template)繼承架構。最近,我轉移到了WordPress,同樣的問題再次的冒出來了,但是在WordPress這邊的解決方案,就沒有那麼複雜了。
在WordPress的網站中,佈景主題(Themes)的說明裡,有提到「Child Themes」的方法,就是在解決這樣的問題,當建立一個Child Themes時,Child Themes可以繼承父系Themes的程式碼,而只修改自己想要修改的部份,當繼承的父系Themes有所更新時,會連帶著更新到Child Themes,而不覆蓋到Child Themes中有修改到的部份。
至於,該如何實作呢?假設,我們要建立一個Child Theme繼承自WordPress預設的樣板twentyten theme,並且把這個Child Theme取名為Twentyten Child。
首先,在Wordpress Codex網站上有提到,建立一個Child Theme有幾個必要的條件。
1. 資料夾結構,其繼承的Child Theme資料夾必須要與繼承的父Theme擺放在同一層。如:
- public_html
- wp-content
- themes (擺所有的佈景的資料夾)
- twentyten (要繼承的佈景主題)
- twentyten-child (繼承的佈景主題,資料夾名稱,不一定要以Child結尾)
- style.css (一定要有一個style.css)
- header.php (其他你要改寫的檔案)
- themes (擺所有的佈景的資料夾)
- wp-content
2. 改寫style.css
style.css是整個Wordpress的Child Theme使用上唯一,一定要存在的檔案,WP系統會透過style.css的header資訊,取得繼承對象的資料來源。
在Wordpress codex網站中,有提到一個基本的Child Theme的Header 資訊撰寫範例如下,這也就是在style.css中的header必須要標明清楚的:
/*
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
*/
1. 整個style.css的Header資訊必須要以/* */作包圍
2. 必須要有Theme Name,這名字可以讓你隨意取用
3. 必須要有繼承的Theme名稱,否則系統會無法得知你繼承自哪個Theme
其他非必要的資訊如Theme URI,你可以填入關於你的這個Child Theme的網址,Description,填入關於這個Theme的說明,Author,這個Theme的作者名稱,Author URI,這個Theme作者的相關網址,Version,版本名稱,可由你自訂。
同樣的,以Codex上的例子來說,要繼承twentyten並且只修改style.css中的一小段程式,您可以在Child Theme中的style.css輸入以下內容,存檔之後上傳到Wordpress中即可建立第一個Child Theme:
/*
Theme Name: Twenty Ten Child
Description: Child theme for the Twenty Ten theme
Author: mouson
Author URI: https://mrmo.cc/mouson
Template: twentyten
Version: 0.0.1
*/@import url(“../twentyten/style.css”);
#site-title a {
color: #009900;
}
在這個範例中,值得再說明的如,在CSS中,可以使用@import 去載入父Theme中的style.css,而後只改寫#site-title a的部份,對於繼承架構裡,又更簡潔。
在上傳到網站之後,你便可以看到Wordpress的佈景管理中出現如下的樣板(由於我並沒有加入screenshot圖片,所以並不會有縮圖出現。)
上傳完畢後,如果可以看到這些內容,基本上就已經完成一個child Theme製作了。
相關參考連結:
1. WordPress Codex – Child Themes
2. How to make a child theme for WordPress: A pictorial introduction for beginners