Twenty Ten 子主題

善用子主題,打造你的個性化 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

 

子主題的資料夾裡至少要包含一個 style.css 檔案,也可以包含一個完整主題的檔案;style.css 是一個子主題唯一必須的檔案。它提供的訊息讓 WordPress 辨認出子主題,並且重寫父主題中的 style.css 檔案。

底下是子主題頂部訊息的撰寫範例:

 

好了,寫完了 CSS 樣式的頂部訊息之後,接下來你可以開始寫你的子主題樣式了,你的子主題樣式會替換原本的父主題 Twenty Ten 樣式,應該說 WordPress 根本就不會載入父主題的樣式了。所以要是我們只想稍微更改父主題的樣式和結構,而不是從頭寫一個新主題的話,那我們就必須要正確導入父主題的樣式表,再對它進行修改。接下來就跟大家說說要怎麼運用 @import 的規則來導入父主題樣式表。

 

小提醒:@import 導入規則一定要擺放在樣式表的第一順位,絕對不能在上面有其他 CSS 樣式,否則父主題的樣式表將不會被載入。

 

巧用 functions.php

除了樣式表之外,我們還可以在子主題的資料夾裡建立一個 functions.php 功能函數表,但是 functions.php 並不像 CSS 樣式表一樣會覆蓋父主題的功能,而是將新的功能加入,而且他會在父主題的 functions.php 前載入。這樣一來,子主題的 functions.php 就提供我們靈活穩定的方式來修改父主題的功能,而且就算日後父主題升級也不會有所影響,我們可以完全保留先前的修改。

那麼,只要我們想要什麼功能,就可以直接加入子主題的 functions.php 功能函數表裡,還記得我曾經寫過一系列的 WordPress 主題製作學習筆記的文章嗎?你可以看看裡面有哪些功能是你喜歡的,不要遲疑,把它加入你子主題的 functions.php 功能函數表檔案裡!

 

接下來的幾天,我會一點一滴使用子主題的方式來逐步修改 Twenty Ten 主題,如果你也打算這麼做,歡迎一起來分享交流你的心得,或是遇到問題了,也可以在此一同討論尋求解答喔!

 

 

文by覺非/終於又有動力折騰 WordPress 主題


 飛翔於文字國裏的蝴蝶,我是愛寫文的女子,不要看我的人,請你看看我的文,那裡面全是我的心.和我想對你說的話……

 StartOver.回。到。原。點 https://carrielis.com