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


高手小姐您好,因為小弟也是以這主題做修改,請問一下 側邊欄位 的東西應該如何設定,像是標題的顏色及背景,請美女高手指導謝謝
→為小弟的網址:http://pyshare.tw
祝您一切順利^o^
基本上你的問題屬於樣式問題(CSS),側邊欄是主題裡 sidebar.php 的檔案,因為我不知道你要改什麼,所以很難回答你的問題喔!
我去過你的部落格,你的文章標題沒有更改 line-height ,也就是所謂的「行間距」,才會造成背景顏色沒有撐開效果,你也是使用 Twenty Ten 這個預設主題,那麼就請你在 CSS 檔案裡加入以下程式碼:
你自己試試看吧!
對了,如果你要自己修改主題,最好具有基本的 HTML+DIV 和 CSS 基礎,不然很容易發生悲劇喔
建議你可以看看我介紹的書:學習│我的程式語言工具書:HTML、CSS、JavaScript
如果想學習主題製作,也可以看我曾經寫過的相關筆記:WordPress 主題製作學習筆記:學前準備 、WordPress 主題製作學習筆記
最後要說的是,我不是什麼高手,只是喜歡 WordPress
我发现你的BLOG如果回复太多了会初切边
春節快樂
"
)
如: Mixi 說道:2011 年 02 月 01 日 at02:00:07 (你自己在查找下)
这条我的头像就看不到了,还有一些回复的内容(每行的前面几个字)也看不见
我用google和IE8都是这样
还有就是现在这个回复框下面有一个背景(twitter)有这个回复框的1.3倍那么大1.1倍那么高(呵呵有点抽像)
在这个背景图(twitter)下面有bloggerads广告(这个广告是居中的)
不知道是否是我的浏览器不兼容
还有我在你的留言板里你给我回复"
Carrie 給您的回應:
我去看過你的博客了,主題做得很漂亮啊,LOGO 也特別,最重要你自己喜歡就好
也是看不到的(是根本没有哦,不知是否是你删除了,这段是我在MAIL里复制过来的)
评论表情用光标点击无效,不知用代码行不…(现在试验,这个是表情’:?:’
以上都是google和IE8两个都出现的兼容(当然也可能是我的网速有问题)
下面这个是google浏览的问题,那就是根本没办法回复哦,点击回复框和呢称文本框是完全没反映的
的確,你說的問題都有產生,這應該是我當初改這份預設主題時沒有注意到的bug,未來的新主題製作時會特別注意這些問題的。至於你說我給你的回覆不見了,我倒是沒注意。
表情圖片無法點擊這應該是我當初的代碼有問題,這在之後也會改進,多謝你的回報,另外,直接以代碼打出表情符號還是沒問題的。
Google 瀏覽器無法點擊回覆框這些問題目前是確定的,日後製作新主題時也會一併列入測試和改進的項目裡。
能把顶部的博客名称LOGO换成图片LOGO的代码怎么修改告诉我么?
副标名称是怎么变成多行显示的呀?
如果要把博客名稱從文字改為圖片 LOGO 的話,請在 CSS 裡頭做更改,以下是我的樣式表 Header (頁首)部分代碼。
至於你問的副標多行顯示,我並沒有多做更改,所以應該是這個 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 行的代碼:
更改為以下代碼:
這樣就可以將文字標題正確更改為圖片 LOGO
怎么(原版)header.php的64-68是:
</>
<?php
javascript:grin(':?:')
不好意思,我比對一下原版的代碼(頁首 header.php),是在 61-65 行,才是那段代碼:
你要修改的代碼就是這段,千萬不要搞錯代碼了。而且我看過 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
你發對了嗎?
另外,請不要再一直強調行數問題,你要找的代碼一直都是
不要搞錯代碼了!
调试了半天成功了!
谢谢!!!
是怎麼成功的呢?是照我跟你說的方法嗎?
怎么我搞了十几个小时把一些代码给搞乱了,后来对照原版的来改回来的,LOGO部份是你的代码,谢谢!
–!你的邮箱是我拼错了,现在你应该收到了我的测试邮件了
我想你應該是把原始代碼搞亂了,LOGO 圖片的網址你當然要改成你自己的圖片連結網址囉,否則一定會出錯的嘛!
Ok, 我等下去收 mail 看看。
嗨"`我又来请教了
你的图片没有点击功能(就是光标经过图片的时候无点击打开功能,可以理解了把文章中插入的图片变成了背景)
是用WP-Thumbnails插件实现的么?
还我插入的视频怎么只是“文字描述链接”而不是一个视频框,这也要用插件么?
>>你的圖片沒有點擊功能
上面這句我不懂意思
另,我沒有使用 WP-Thumbnails 插件。
要插入視頻,是在文章裡面插入嗎?如果是,請使用
的方式在文章中插入視頻,不然就得使用 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 頁首部分的樣式如下:
我其他都沒改過,所以我不清楚你的問題,建議你使用 Firefox 的套件 Firebug 去找出你樣式裡面的錯誤。
字间距和字号在哪里调整啊。求教。谢谢。
都是在你主題的 CSS 檔案裡調整,字間距是 line-heigh, 字號是 font-size, 自己去摸索吧~
字符的间距好宽啊
好久都沒時間搞這些主題囉,請忍耐一下吧
来学习下哈!
不用學習什麼吧,呵
已经学到不少了!呵呵……
別客氣,能夠幫助你我也很高興
呵呵……那我就不客气了啊!
呵,真的不用這麼客氣,我也去了你的博客參訪過,你也寫了不少好文哪
呵呵……刚开的博客啊!内容不多啊!!
能夠繼續寫下去才是重要的
姐姐真好心思
我常想把這主題小改一下用
但都提不起勁
我最近也忙於工作,都沒心思寫博啦
我还是喜欢2.9.2的默认主题.我修改主题的时候都是按照那个改的!
不過現在的 WordPress 3.0 新版,有許多函數都做了修正或是更改掉,還是得考慮到兼容問題啊~
你有把這個佈景升級嗎?
我發現這個佈景升級後中文檔有問題
前台是英文介面的!
有的,我已將此主題升級為最新,並沒有發生你的問題喔!
这个主题蛮不错的!
這是 WordPress 3.0 的默認主題 Twenty Ten,如果你已經升級到 3.0 以上版本,就能在後台主題區看到此主題。