• 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. 高手小姐您好,因為小弟也是以這主題做修改,請問一下 側邊欄位 的東西應該如何設定,像是標題的顏色及背景,請美女高手指導謝謝

      →為小弟的網址:http://pyshare.tw

      祝您一切順利^o^

      • 基本上你的問題屬於樣式問題(CSS),側邊欄是主題裡 sidebar.php 的檔案,因為我不知道你要改什麼,所以很難回答你的問題喔!

        我去過你的部落格,你的文章標題沒有更改 line-height ,也就是所謂的「行間距」,才會造成背景顏色沒有撐開效果,你也是使用 Twenty Ten 這個預設主題,那麼就請你在 CSS 檔案裡加入以下程式碼:

        #content h2.entry-title{line-height:140%}

        你自己試試看吧!

        對了,如果你要自己修改主題,最好具有基本的 HTML+DIV 和 CSS 基礎,不然很容易發生悲劇喔 :P

        建議你可以看看我介紹的書:學習│我的程式語言工具書:HTML、CSS、JavaScript

        如果想學習主題製作,也可以看我曾經寫過的相關筆記:WordPress 主題製作學習筆記:學前準備WordPress 主題製作學習筆記

        最後要說的是,我不是什麼高手,只是喜歡 WordPress :mrgreen:

    2. 我发现你的BLOG如果回复太多了会初切边
      如: Mixi 說道:2011 年 02 月 01 日 at02:00:07 (你自己在查找下)
      这条我的头像就看不到了,还有一些回复的内容(每行的前面几个字)也看不见
      我用google和IE8都是这样
      还有就是现在这个回复框下面有一个背景(twitter)有这个回复框的1.3倍那么大1.1倍那么高(呵呵有点抽像)
      在这个背景图(twitter)下面有bloggerads广告(这个广告是居中的)
      不知道是否是我的浏览器不兼容
      还有我在你的留言板里你给我回复"
      Carrie 給您的回應:
      我去看過你的博客了,主題做得很漂亮啊,LOGO 也特別,最重要你自己喜歡就好 :D 春節快樂 ;) "
      也是看不到的(是根本没有哦,不知是否是你删除了,这段是我在MAIL里复制过来的)
      评论表情用光标点击无效,不知用代码行不…(现在试验,这个是表情’:?:’ :?:
      以上都是google和IE8两个都出现的兼容(当然也可能是我的网速有问题)

      下面这个是google浏览的问题,那就是根本没办法回复哦,点击回复框和呢称文本框是完全没反映的

      • 的確,你說的問題都有產生,這應該是我當初改這份預設主題時沒有注意到的bug,未來的新主題製作時會特別注意這些問題的。至於你說我給你的回覆不見了,我倒是沒注意。

        表情圖片無法點擊這應該是我當初的代碼有問題,這在之後也會改進,多謝你的回報,另外,直接以代碼打出表情符號還是沒問題的。

        Google 瀏覽器無法點擊回覆框這些問題目前是確定的,日後製作新主題時也會一併列入測試和改進的項目裡。

    3. 能把顶部的博客名称LOGO换成图片LOGO的代码怎么修改告诉我么?
      副标名称是怎么变成多行显示的呀?

      • 如果要把博客名稱從文字改為圖片 LOGO 的話,請在 CSS 裡頭做更改,以下是我的樣式表 Header (頁首)部分代碼。

        #site-title { color:none; width:395px; text-indent:-999em; }
        #site-title  a{ background:url(images/logo.png) no-repeat; color:#fff; display:block; height:62px; }

        至於你問的副標多行顯示,我並沒有多做更改,所以應該是這個 WordPress 3.0 預設主題 Twenty Ten 原本自帶的樣式表產生的。

        如果你也是採用這款主題,那就可以按照我以上提供的樣式去修改,假設你是使用其他主題,那就要看你主題裡面的樣式表 ID 來改了,但是應該不會很難的,你試試看吧 ;)

        • 是和你的一样的主题`
          我改了style.css 里的 header部份把原先的改成你的
          #site-title { color:none; width:395px; text-indent:-999em; }
          #site-title a{ background:url(images/logo.png) no-repeat; color:#fff; display:block; height:62px; }
          首页会显示h1 (后发现h1在header.php里)
          删除header.php里的h1 后显示 div 删除div后无显示(LOGO位置空白)

          header.php第60行

          • 建議你將 header.php 檔案裡 64 至 68 行的代碼:

            <<?php echo $heading_tag; ?> id="site-title">
             
            <span>
             
            <a href="<?php echo home_url( '/' ); ? rel="nofollow">" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
             
            </span>
             
            </<?php echo $heading_tag; ?>>

            更改為以下代碼:

            <h1 id="site-title">
             
            <span>
             
            <a href="<?php bloginfo ('home');? rel="nofollow">" rel="home" title="<?php bloginfo('name');?>">
             
            <img src="<?php echo bloginfo ('template_directory');?>/images/logo.png" alt="<?php bloginfo ('name');?>" />
             
            </a>
             
            </span>
             
            </h1><!–end of h1 site-title–>

            這樣就可以將文字標題正確更改為圖片 LOGO

            • 怎么(原版)header.php的64-68是:

              </>

              <?php
              javascript:grin(':?:')

              • 不好意思,我比對一下原版的代碼(頁首 header.php),是在 61-65 行,才是那段代碼:

                <<?php echo $heading_tag; ?> id="site-title">
                					<span>
                						<a href="<?php echo home_url( '/' ); ? rel="nofollow">" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
                					</span>
                				</<?php echo $heading_tag; ?>>

                你要修改的代碼就是這段,千萬不要搞錯代碼了。而且我看過 Twenty Ten 主題的代碼,並沒有你提供的這段代碼,你是不是搞錯檔案了?

            • 不好意思刚刚看错了
              我改了header.php里的那几行调试如下:
              Parse error: syntax error, unexpected ‘?’ in /home/content/55/7344955/html/blog/wp-content/themes/twentyten/header.php on line 65

              • 你會出現這個錯誤,是因為 header.php(頁首檔案)的第 65 行有錯誤,而這應該是 syntax 產生的,這個 syntax 是代碼高亮的用途,你有沒有使用這個插件?

                • 65行我用了一个图片缓迟加载js

                  // Delay Image

                  $(function() {

                  $(".post img").lazyload({

                  placeholder : "/images/grey.gif",

                  effect : "fadeIn"

                  });

                  });

                  要删除才能实行么?

                  我刚才找到了一个方法,能把导航标题那一块黑色变半透明上移到大图区域里感觉蛮不错的,如果你感觉兴趣可以看看
                  http://www.mixi.cc/blog/

                  • 所以我才會強調你要修改的是我之前提供的那段代碼,那才是修改文字標題的地方。

                    建議你把 js 檔案放在 footer.php 檔案裡,除了要事先加載的 jQuery 庫需要放在 header.php 之外,其他的 jQuery 或是 js 特效,幾乎都能放在 footer.php 檔,最好把它另外存成 js 檔案,這樣你比較方便調用。

                    另外,你說的這個 nav 移位的方式我知道,我今天也在一個博客裡看到了教學文章,或許改天我會試用看看 ;)

                    • 把js删除还是65行
                      Parse error: syntax error, unexpected ‘?’ in /home/content/55/7344955/html/blog/wp-content/themes/twentyten/header.php on line 65

                      我现在发header.php代码到你的邮箱

                    • 你的邮箱无效

                      嗯 ""`问题还是出在65行

                      也就是出在你给的那段那里

                      • 我的郵箱是 carrieli.blog at gmail.com

                        你發對了嗎?

                        另外,請不要再一直強調行數問題,你要找的代碼一直都是

                        <<?php echo $heading_tag; ?> id="site-title">
                         
                        <span>
                         
                        <a href="<?php echo home_url( '/' ); ? rel="nofollow">" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
                         
                        </span>
                         
                        </<?php echo $heading_tag; ?>>

                        不要搞錯代碼了!

                    • 调试了半天成功了!
                      谢谢!!!

                      • 是怎麼成功的呢?是照我跟你說的方法嗎?

                        • 怎么我搞了十几个小时把一些代码给搞乱了,后来对照原版的来改回来的,LOGO部份是你的代码,谢谢!
                          –!你的邮箱是我拼错了,现在你应该收到了我的测试邮件了

                          • 我想你應該是把原始代碼搞亂了,LOGO 圖片的網址你當然要改成你自己的圖片連結網址囉,否則一定會出錯的嘛!

                            Ok, 我等下去收 mail 看看。

                            • 嗨"`我又来请教了
                              你的图片没有点击功能(就是光标经过图片的时候无点击打开功能,可以理解了把文章中插入的图片变成了背景)
                              是用WP-Thumbnails插件实现的么?
                              还我插入的视频怎么只是“文字描述链接”而不是一个视频框,这也要用插件么?

                              • >>你的圖片沒有點擊功能
                                上面這句我不懂意思 :?:

                                另,我沒有使用 WP-Thumbnails 插件。

                                要插入視頻,是在文章裡面插入嗎?如果是,請使用

                                <embed src="視頻網址"></embed>

                                的方式在文章中插入視頻,不然就得使用 WordPress 短代碼的方式來插入了,如果你要開啟使用短代碼的功能,請善用 Google 搜尋相關教學文章。不需使用什麼插件,過多的插件只會拖慢你的主機速度喔 ;)

                                • 嗯,我说的那个图片没有点击功能就是,光标经过图片的时候会变成一个"手"形,也就是图片可以链接,我想改成图片没有链接功能的,光标在文章里的图片上点击没有任何"事件"出现.就是你的LOGO点击会连接到你的首页,而你点击LOGO周围的背景图是没有链接到任何页面的.
                                  而视频是在文章中的,我是用WP自带的"插入视频"图标插入的,显示的是"文字描述"点击后在新窗口打开的,而别人的是一个视频框一点击就直接播放了,哎…这几天够晕的了

                                  • 我的圖片也是在滑鼠經過時會有一個手形哪,所以我不清楚你的問題要如何解決,可能要請你自己 Google 搜尋一下解決之道囉!

                                    我之前回覆你的視頻代碼被吃掉了,所以我補回去了,你再看看我之前的回覆吧。

                                    • 哦"`原来如些,呵呵
                                      用"插入图片"功能代码是>a href="图片超链地址"><img class="alignnone size-full wp-image-30" title="图片名" src="图片地址" alt="" width="650" height="441" /<
                                      把<img前面的那段删除就行了,原来这样的。
                                      就像你的"新年快樂,和一些嘰嘰喳喳"文中的图片在我这浏览时,光标经过就不会变成手形呀,当然了可能浏览器不同造成的。
                                      而"添加视频"功能显示的方式是“文字描述(视频名称)”点击时会在新窗口打开,所以要选那个"插入/编辑内嵌媒体"才是插入一个视频窗口在文章中的,呵呵,我的LOGO也快要完成咯。谢谢你哦!

                                      • 喔,原來你要的是那樣的功能啊,只要不加上鏈結網址就不會有手形了啊,不過我不是那樣加圖的,我是使用 wp-caption 的方式來加圖的。至於視頻添加,我也是直接上代碼,沒有特意去使用 WordPress 的添加視頻方式。

                    • 奇怪我的博客名副标(博客描述)不能对齐左边的LOGO位置,我的换行是向下的,你的是向上的吧?
                      你改过style.css的Header(首页部份) #site-description
                      的参数了?
                      http://www.mixi.cc
                      有空你能帮看下么

                      • 我並沒有特地修改預設主題的任何代碼,因為我是使用子主題的方式來進行編修的。

                        所以我是另外做了一款子主題,但是子主題的樣式 import 了 Twenty Ten 主題的樣式表,我的子主題針對 header 頁首部分的樣式如下:

                        /* 頁首 */
                        #site-title { color:none; width:395px; text-indent:-999em; }
                        #site-title  a{ background:url(images/logo.png) no-repeat; color:#fff; display:block; height:62px; }
                        #access .menu-header, div.menu { margin-left:2px; }

                        我其他都沒改過,所以我不清楚你的問題,建議你使用 Firefox 的套件 Firebug 去找出你樣式裡面的錯誤。

    4. 字间距和字号在哪里调整啊。求教。谢谢。

    5. 姐姐真好心思
      我常想把這主題小改一下用
      但都提不起勁

    6. 我还是喜欢2.9.2的默认主题.我修改主题的时候都是按照那个改的!

    7. 你有把這個佈景升級嗎?
      我發現這個佈景升級後中文檔有問題
      前台是英文介面的!

    8. 这个主题蛮不错的!

    1 Trackbacks/Pingbacks