[WordPress] 子模板Themes Child 的建立

還記得以前在使用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 (其他你要改寫的檔案)

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

喜歡這篇文章就按個讚吧!

關於「墨嗓」

陳佑竹,朋友都叫我墨嗓。我是專注於資訊科技整合、應用、開發方法及研究的T型人,現任 PHP 資訊系統分析師。平時喜好羽球、登山及手沖咖啡。
分類: Wordpress,標籤: , , , , , , , , , , , 。這篇內容的永久連結
透過Facebook發表迴響:

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料