先說壹下修改Wordpress模板需要的知識。大部分Wordpress功能都可以在WP官方Codex中找到,也可以說是固定的。不需要深入學習,只需要知道某個函數的起止位置,修改主題的時候也不用出錯。關鍵是掌握DIV+CSS。網上有很多教程。大致學會修改Wordpress模板的原理,也就是幾句屬性的寫法就夠了。因為我還在學,現在就不教妳了。我們找個教程看看吧。
壹個完整的WordPress模板至少應該包括以下文檔:
樣式表文件
php:主頁模板
Archive.php:文章歸檔/分類目錄模板。
404.php: 404模板
Comments.php:消息/回復模板
頁腳:底部模板
Header.php:頂層模板
側欄模板
頁面模板
Single.php:文章頁面模板
php:模板函數
搜索結果模板
當然,有些主題可能不止這些文件。比如我的HotNews Pro主題就有上百個模板文件,但是上面的文件是每個模板都必須的。
了解以上模板的作用,可以讓妳知道當前頁面應該修改哪個對應的模板。
以下是本文的重點:工欲善其事,必先利其器!
很多人可能會想到制作網頁的工具,會想到《網頁三劍客》裏的Dreamweaver(簡稱DW),意思是說當初流行用表格表格制作網頁,現在是DIV+CSS的時代,所見即所得的優勢沒有了。這個DW幾乎沒用(個人)。此外,國外常用的制作網頁的工具Adobe GoLive,因為中文版的推出較晚,在國內開始流行。Adobe GoLive也是第壹款制作大規模DIV+CSS網頁的軟件,但目前這款軟件的開發已經停止,很遺憾。今天推薦的工具不是這兩個又貴又笨重的軟件。妳根本不需要任何專業軟件來修改和制作Wordpress主題,但是妳不能像有些人吹噓的那樣,用系統自帶的筆記本來寫主題。
首先妳需要搭建壹個本地的PHP測試環境來修改模板。當然也可以在Wordpress後臺主題編輯頁面修改,臨時用還是可以的,很多修改不太合適。關於如何搭建本地測試環境,網上有很多教程,這裏就不贅述了。建議使用Wamp或者phpStudy,自己搜索。
必要的工具軟件:
■文本編輯器
EmEditor(付費軟件),EditPlus(付費軟件),Notepad++(免費)
前兩個是付費軟件,後者是免費的,功能非常好。適合初學者使用。千萬不要用系統自帶的筆記本編輯模板文件,尤其是中文模板,否則模板會被借用。中文模板代碼為UTF-8,無BOM。
■ Mozilla Firefox。
有人會問,為什麽要用火狐,系統自帶的IE也能瀏覽網站?當然,我們並不是完全用火狐瀏覽網站,而是用火狐強大的擴展能力來引導我們神仙。
當我們想要修改某個部分的樣式和結構時,我們會直接打開Wordpress主題模板文件或者在後臺編輯主題。密密麻麻的代碼是主題作者自己看了會頭暈,所以會經常在關鍵部分加壹些註釋。
php中的註釋壹般是:
在css中:/**XXX **/
但有些筆記可能只有作者知道。所以在打開的模板文件中很難找到要修改的部分,然後我們就用Firefox的擴展名:Firebug,下載地址。
IE瀏覽器也有類似的插件,但在功能上無法和火狐的擴展相比。有些瀏覽器自己集成了這個功能,比如Opera,看起來也同樣強大。
具體操作方法
如果妳已經安裝了Firefox並添加了Firebug擴展,妳可以繼續研究如何專門修改Wordpress主題。
■修改頁面元素的文本大小。
以修改HotNews Pro主題的CMS布局和最新文章標題的文字大小為例:
將鼠標懸停在最新文章的標題上,右鍵彈出菜單,選擇“使用Firebug”查看元素(如圖)。
之後Firebug窗口會默認在Firefox瀏覽器底部被調出。左邊顯示當前網頁元素的HTML結構,右邊顯示當前元素選擇器的樣式屬性,文件和行數(如圖所示),在style.css文件的第277行。
使用上面描述的文本編輯軟件,打開主題style.css文件並在第277行找到它:
#帖子h3 {
font-size:13px;
字體粗細:粗體;
}
把數字13修改成妳認為合適的大小。
如果當前元素選擇器的樣式中沒有font-size:13px;屬性,但是全局字體大小設置,可以添加這個font-size:13px;屬性
看了上面的例子,是不是很簡單?要修改主題樣式,關鍵是要找到需要修改元素選擇器名稱和樣式屬性的位置。
我在修改主題模板的時候也是用同樣的方法。沒有Firebug擴展的神仙指導,修改自己的模板絕非易事。
■如何確定網頁元素(模塊)的整個代碼,以便於位置調整。
以移動到徽標下方的HotNews Pro主題導航菜單為例:
首先用上面的方法確定導航菜單最外層選擇器的名稱為:top。
然後用Notepad++文本編輯器,打開題目頂部的模板header.php,搜索頂部位置,鼠標點擊選擇器,妳會發現Notepad++已經為我們明確標註了這段代碼的起始和結束位置(如圖所示):
下面很簡單。使用相同的方法找到導航菜單下面的元素的最外面的選擇器的結束位置,並將代碼移動到這裏。
以上是修改模板的基本方法和步驟。所謂高手基本都是這樣折騰模板的。如果妳花壹兩天時間學習DIV+CSS,相信會更加得心應手。
另壹個很好的擴展是:Web Developer,這裏不介紹了。請自行研究。