• Work Team


    奕捷創意(股)公司 EJ-Idea Inc.

    奕捷創意(股)公司 EJ-Idea Inc. 專精 iPhone, iPad , Android 行動平板應用程式開發,亦與多家出版社及 e-Learning 廠商與廣告公司合作,開發出許多手機與平板應用,互動式電子童書,平面電子型錄等等。2011 年開始結合 WordPress 平台創作出更多精采作品!
    了解更多……

  • 版權宣告


    網摘、引用、連結,不轉載

    Creative Commons License
    姓名標示您必須保留原作姓名標示
    非商業性您不得為商業使用本著作
    禁止改作您不得改變或改作本著作

  • 最新評論

  • 善用子主題,打造你的個性化 Twenty Ten 主題
    Twenty Ten 子主題

    善用子主題,打造你的個性化

    大家可以看到本站的主題採取了 3.0 新上線的預設主題 Twenty Ten,在我使用了這個主題之後,我發覺 Twenty Ten 這個主題功能之強大,已經可以拿來作為框架主題,使用它來衍生許多出色的主題,今天要跟大家說說所謂的「 – Child-」的妙用之道。

    當你學會靈活運用子主題來修改原始父主題的方法後,你可以使用任何一款你喜愛的主題來個性化成你自己專屬的主題,由於我挺喜歡 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 檔案。

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

    /*
     
    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


    【歷史上的今天】
    相關文章外掛 for WordPress, Blogger...
    本文目前有 127 則回應
    1. WP3.0的預設主題真的太過強大了….
      只好動起修改預設主題的腦筋XP

      • 是呀,只可惜我最近忙於工作,工餘之時通常也沒有太多體力和精神來修改了,這段期間我也沒什麼時間上網寫文了,這是比較困擾我的事呀 :(

    2. 话说我的主题就是在Twenty Ten的基础上改的。不过当时可不知道有子主题这个功能,也没深入研究,就胡乱改了下CSS,将就着用,一段时间以来都去忙其它事去,结果完全忽略了博客,真是惭愧。真是佩服你能坚持不懈地关注一些事物。

      • 你改的 Twenty Ten 很有自己的風格,其實真的用 CSS 就可以搞定一個主題的佈局和版型,我只是希望日後升級時能不影響到自己的修改,否則就功虧一簣了,我當然可以先複製一份再升級,不過何必多費那道手續呢 :D

        其實你也只是當時不曉得有子主題功能罷了,現在做也來得及囉 ;)

        大概因為我將博客這裡當做自己生命的一部分,所以比較會關心這些事,不過最近遷居、新工作,所以這幾天都沒有心力顧及此蝸居 :P

    3. 這個預設的主題是挺不錯的
      可塑性還頗強的

    4. WordPress越来越强大了,也越来越庞大了。
      当有一天,Wordpress被我大材少用时,我会换掉它。

      不得不说,wp3的默认主题很有意思,基于它我制作了一个私人主题,目前正用它制作企业网站主题,不知道最终能否满足需求!

      • 是呀,據說有一些朋友已經在試用 Typecho 了。不過,我大概還是會使用 WordPress 繼續書寫博文的,畢竟比較習慣也上手,所以這是一種兩難啊 :(

        是的,WordPress 3.0 的預設主題很有意思,而且也很強大,它支援全部 3.0 功能的新函數,所以有必要研究一下的。你如果做成企業主題,可否分享一下網站連結,讓我也看看主題布局版面呢?

    5. 不小心闯入台湾 wordpress 圈

      请问,“有人回覆時郵件通知我” 这个插件,哪里下载哦

    6. 还没试过子主題的方式。。
      3.0的皮的确让人耳目一新,可折腾的地方也多

      • 其實我也是因為覺得 3.0 預設的主題很棒,才會開始動起子主題的腦筋來 :D

        可以折騰的地方很多呀,不過我最近又因為沉迷 Facebook 的小遊戲而開始偷懶了 :P

    7. 對呀,以前我是用 Default 主題改的,
      但因為後來升級 wordpress 3.0 之後,有些功能變得很奇怪,
      所以我後來就又用 wordpress 3.0 的預設主題 Twenty Ten 改了,呼~

    8. 哇賽!這主題真的太神奇了!有機會也可以來學學…
      雖然看到一大堆碼就整個人暈倒了…哈哈…

      • 這個主題真的蠻強大的,你可以嘗試看看,代碼其實沒想像中可怕啦,如果要折騰主題,還是要跟他們打交道的 :P

    9. 看到CSS就头皮发麻

    1 Trackbacks/Pingbacks