
善用子主題,打造你的個性化 Twenty Ten 主題
大家可以看到本站的主題採取了 WordPress 3.0 新上線的預設主題 Twenty Ten,在我使用了這個主題之後,我發覺 Twenty Ten 這個主題功能之強大,已經可以拿來作為框架主題,使用它來衍生許多出色的主題,今天要跟大家說說所謂的「子主題 – Child-theme」的妙用之道。
當你學會靈活運用子主題來修改原始父主題的方法後,你可以使用任何一款你喜愛的主題來個性化成你自己專屬的主題,由於我挺喜歡 Twenty Ten 的強大、以及其採用的 WordPress 新函數,所以這裡便拿它做範本來說明。
根據 WordPress 官方的 Child Themes(子主題)說明,製作子主題非常簡單,你只要建立一個資料夾,在裡頭放入格式正確的 CSS 樣式檔案,這樣就成功建立了你的子主題。我們只要懂一點 HTML+CSS 的基礎知識,就可以使用這個子主題來修改樣式、結構,而不需要更動到父主題的原始檔案,如此對於父主題日後的升級便不會有所影響,並且我們還能保留自己子主題的所有樣式。
![]()
子主題的目錄結構
現在我們來看一下我們建立的子主題存放的目錄結構:
- wp-content
- themes (主題存放的目錄)
- twentyten (範例父主題 Twenty Ten 的目錄)
- twentyten-child (子主題存放的目錄,可以任意命名)
- style.css (子主題中不可或缺的檔案,檔案名必需為 style.css)
- themes (主題存放的目錄)
子主題的資料夾裡至少要包含一個 style.css 檔案,也可以包含一個完整主題的檔案;style.css 是一個子主題唯一必須的檔案。它提供的訊息讓 WordPress 辨認出子主題,並且重寫父主題中的 style.css 檔案。
底下是子主題頂部訊息的撰寫範例:
/*
Theme Name: Twenty Ten Child //Twenty Ten 子主題,可任意命名
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 //你的子主題版本號
*/
好了,寫完了 CSS 樣式的頂部訊息之後,接下來你可以開始寫你的子主題樣式了,你的子主題樣式會替換原本的父主題 Twenty Ten 樣式,應該說 WordPress 根本就不會載入父主題的樣式了。所以要是我們只想稍微更改父主題的樣式和結構,而不是從頭寫一個新主題的話,那我們就必須要正確導入父主題的樣式表,再對它進行修改。接下來就跟大家說說要怎麼運用 @import 的規則來導入父主題樣式表。
/* Theme Name: Twenty Ten Child //Twenty Ten 子主題,可任意命名 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 //你的子主題版本號 */ @import url("../twentyten/style.css"); //就是使用這個 @import 導入規則來載入父主題樣式表
小提醒:@import 導入規則一定要擺放在樣式表的第一順位,絕對不能在上面有其他 CSS 樣式,否則父主題的樣式表將不會被載入。
![]()
巧用 functions.php
除了樣式表之外,我們還可以在子主題的資料夾裡建立一個 functions.php 功能函數表,但是 functions.php 並不像 CSS 樣式表一樣會覆蓋父主題的功能,而是將新的功能加入,而且他會在父主題的 functions.php 前載入。這樣一來,子主題的 functions.php 就提供我們靈活穩定的方式來修改父主題的功能,而且就算日後父主題升級也不會有所影響,我們可以完全保留先前的修改。
那麼,只要我們想要什麼功能,就可以直接加入子主題的 functions.php 功能函數表裡,還記得我曾經寫過一系列的 WordPress 主題製作學習筆記的文章嗎?你可以看看裡面有哪些功能是你喜歡的,不要遲疑,把它加入你子主題的 functions.php 功能函數表檔案裡!
接下來的幾天,我會一點一滴使用子主題的方式來逐步修改 Twenty Ten 主題,如果你也打算這麼做,歡迎一起來分享交流你的心得,或是遇到問題了,也可以在此一同討論尋求解答喔!
文by覺非/終於又有動力折騰 WordPress 主題
飛翔於文字國裏的蝴蝶,我是愛寫文的女子,不要看我的人,請你看看我的文,那裡面全是我的心.和我想對你說的話……
StartOver.回。到。原。點 http://blogs.carrielis.com
【歷史上的今天】
- 這裡│再次入圍【藍眼觀注】.懇請大家賜票! - 2009
- 遊戲│令人瘋狂的 Facebook 小遊戲.Country Story 農場遊戲 - 2009
- 雜談│部落與心情隨筆 - 2007


WP3.0的預設主題真的太過強大了….
只好動起修改預設主題的腦筋XP
是呀,只可惜我最近忙於工作,工餘之時通常也沒有太多體力和精神來修改了,這段期間我也沒什麼時間上網寫文了,這是比較困擾我的事呀
话说我的主题就是在Twenty Ten的基础上改的。不过当时可不知道有子主题这个功能,也没深入研究,就胡乱改了下CSS,将就着用,一段时间以来都去忙其它事去,结果完全忽略了博客,真是惭愧。真是佩服你能坚持不懈地关注一些事物。
你改的 Twenty Ten 很有自己的風格,其實真的用 CSS 就可以搞定一個主題的佈局和版型,我只是希望日後升級時能不影響到自己的修改,否則就功虧一簣了,我當然可以先複製一份再升級,不過何必多費那道手續呢
其實你也只是當時不曉得有子主題功能罷了,現在做也來得及囉
大概因為我將博客這裡當做自己生命的一部分,所以比較會關心這些事,不過最近遷居、新工作,所以這幾天都沒有心力顧及此蝸居
這個預設的主題是挺不錯的
可塑性還頗強的
是啊,不過有很多函數和寫法都與之前的預設主題不同了,所以得慢慢摸索
难得见到默认主题
現在預設主題已經很多人在用了,相信日後會更多
WordPress越来越强大了,也越来越庞大了。
当有一天,Wordpress被我大材少用时,我会换掉它。
不得不说,wp3的默认主题很有意思,基于它我制作了一个私人主题,目前正用它制作企业网站主题,不知道最终能否满足需求!
是呀,據說有一些朋友已經在試用 Typecho 了。不過,我大概還是會使用 WordPress 繼續書寫博文的,畢竟比較習慣也上手,所以這是一種兩難啊
是的,WordPress 3.0 的預設主題很有意思,而且也很強大,它支援全部 3.0 功能的新函數,所以有必要研究一下的。你如果做成企業主題,可否分享一下網站連結,讓我也看看主題布局版面呢?
我的另外一个小代码收集点已经在使用typecho了。
呵呵,是喔,那真是好選擇,我看 Willin 也有使用呢!他另外一個站點就是使用 Typecho 打造的,有時間我也來架一個用 Typecho 的站,順便學習一下新平台的技術
不小心闯入台湾 wordpress 圈
请问,“有人回覆時郵件通知我” 这个插件,哪里下载哦
你好,我這裡也很多中國大陸的博友來啊,所以很高興認識你
我那個功能不是用插件達成的喔,詳情請看此文。
哈哈,看到了,原来是 Willin 大师的杰作,已经使用
沒錯,是 Willin 大師的傑作,很棒的代碼程序!
还没试过子主題的方式。。
3.0的皮的确让人耳目一新,可折腾的地方也多
其實我也是因為覺得 3.0 預設的主題很棒,才會開始動起子主題的腦筋來
可以折騰的地方很多呀,不過我最近又因為沉迷 Facebook 的小遊戲而開始偷懶了
對呀,以前我是用 Default 主題改的,
但因為後來升級 wordpress 3.0 之後,有些功能變得很奇怪,
所以我後來就又用 wordpress 3.0 的預設主題 Twenty Ten 改了,呼~
哇,那你真的改得很好耶,因為完全看不出是用 Twenty Ten 改的,CSS 幫了很大的忙喔
哇賽!這主題真的太神奇了!有機會也可以來學學…
雖然看到一大堆碼就整個人暈倒了…哈哈…
這個主題真的蠻強大的,你可以嘗試看看,代碼其實沒想像中可怕啦,如果要折騰主題,還是要跟他們打交道的
看到CSS就头皮发麻
呵呵,其實深入研究過一陣子之後,你就會驚訝於 CSS 的神奇力量