WordPress主題成千上萬,但並不是每一個主題都適合自己,自己喜歡。特別是對於一些國外英文主題,用來顯示中文你會發現很多字體以及格局會發生很大變化,例如很多國外主題使用英文標題字號都比較大,用在中文上顯然不合適宜。還有邊距、字間距、背景等等。雖然某些優秀的英文主題有國內WP達人做過漢化,但是僅僅是漢化,不一定就適合你。
自己動手豐衣足食,修改主題之前,準備工作還是要做的。
一、準備
基礎技能你不必深入研究PHP語言是怎麼回事,但是最起碼的代碼得看懂一點,當然這也不是重點,重點是基本瞭解CSS代碼書寫規則,非專業人士準備一份CSS教程,或者下載一份CSS手冊。
主題模板選擇一套整體格局不錯的Wordpress主題模板,建議選擇WordPress HTML5主題,現在主流趨勢是HTML5主題。如果有耐心和信心的話,也可以自己把WP主題轉化為HTML5主題。
輔助工具最好是搭載本地PHP環境,網絡上有教程詳細說明怎麼搭建本地Wordpress,個人推薦使用EasyPHP。如果修改範圍不大的話,可以直接在服務器上的主題修改,沒必要大費周折搞本地PHP。新手推薦使用軟件Dreamweaver,便於打開CSS文件好找到修改處,老鳥直接用記事本查找。在工具裡,最重要一點是安裝Mozilla Firefox瀏覽器,強大的元素查看功能讓你迅速定位修改。
二、確定修改重點
這裡講述的是怎麼修改CSS文件,其實仔細觀察Wordpress主題模板代碼,不管是index.php首頁還是page.php頁面,或者single.php文章內頁,你會發現,其實大部分主題都只是通過CSS來控制頁面佈局,頁面本身的代碼基本相同,特別是一些國外簡潔明瞭的優秀主題更是如此。
當我們要修改某部分樣式及結構時,都會直接打開Wordpress主題模板文件或在後臺編輯主題,密密麻麻的代碼,就是主題作者自己看了也會頭暈眼花,所以會經常在關鍵部位加上一些註釋,
php中註釋一般為:
css中為:/** XXX **/
一般調整比較常見的是頁面寬度、文本主體寬度、字體大小、行間距、背景顏色等。通過修改style.css文件都能夠達到預期效果(部分主題會指定CSS文件,只需對應找到控制的CSS文件),部分國外主題在functions.php中加入加入大量模板函數,這不是本文講述的重點。
三、修改Wordpress主題CSS文件
下面以Wordpress默認主題Twentyeleven修改為例
用Mozilla Firefox瀏覽器打開網站,首先在要修改樣式的地方右鍵單擊→查看元素。
此時瀏覽器自動打開DOM樣式探查器
左側是頁面html源代碼,右側這部分就是控制標題文字的CSS屬性,當然可以自己琢磨著對照左側代碼進行選擇
我們簡單地對CSS參數進行調整,可以實時預覽效果,不管是字體大小,還是背景顏色都如此。
例如把color: rgb(34, 34, 34);調整為color: rgb(345, 34, 34);你會發現標題顏色發生改變,再加入字體參數font-size: 20px;
font-family: 微軟雅黑; 此時發現頁面中,文章標題全部都變為微軟雅黑字體,字號為20px,紅色,調整到滿意的效果後,就應該把文件修改進CSS文件裡。注意:字體如果是要使用微軟雅黑等中文字體時,需要參照CSS中文字體對照表使用Unicode編碼
保存方法有二種
一種是對照代碼右側位置style.css:745 用Dreamweaver軟件或是記事本打開style.css文件找到第745行代碼進行修改。另一種是點擊style.css:745自動跳轉到樣式編輯器,然後選擇保存CSS文件。
完工總結
總的來說修改Wordpress主題並不難,這篇教程只是一個參考,主要從CSS控制器入手。作為新手的一個拋磚引玉,更多高級的調整技巧還有待你的發掘。這裡要提醒大家:製作一款主題不容易,作者為此付出了無數的不眠日夜和汗水,請大家尊重作者的辛苦勞動,修改主題模版請保留作者版權鏈接,不要做讓大家BS的無恥之人。
原作者： 林晨 行走時光