一、準(zhǔn)備
從事光華機房服務(wù)器托管,服務(wù)器租用,云主機,網(wǎng)頁空間,國際域名空間,CDN,網(wǎng)絡(luò)代維等服務(wù)。
基礎(chǔ)技能你不必深入研究PHP語言是怎么回事,但是最起碼的代碼得看懂一點,當(dāng)然這也不是重點,重點是基本了解CSS代碼書寫規(guī)則,非專業(yè)人士準(zhǔn)備一份CSS教程,或者下載一份CSS手冊。
主題模板選擇一套整體格局不錯的Wordpress主題模板,建議選擇WordPress HTML5主題,現(xiàn)在主流趨勢是HTML5主題。如果有耐心和信心的話,也可以自己把WP主題轉(zhuǎn)化為HTML5主題。
輔助工具最好是搭載本地PHP環(huán)境,網(wǎng)絡(luò)上有教程詳細(xì)說明怎么搭建本地Wordpress,個人推薦使用EasyPHP。如果修改范圍不大的話,可以直接在服務(wù)器上的主題修改,沒必要大費周折搞本地PHP。新手推薦使用軟件Dreamweaver,便于打開CSS文件好找到修改處,老鳥直接用記事本查找。在工具里,最重要一點是安裝Mozilla
Firefox瀏覽器,強大的元素查看功能讓你迅速定位修改。
二、確定修改重點
這里講述的是怎么修改CSS文件,其實仔細(xì)觀察Wordpress主題模板代碼,不管是index.php首頁還是page.php頁面,或者single.php文章內(nèi)頁,你會發(fā)現(xiàn),其實大部分主題都只是通過CSS來控制頁面布局,頁面本身的代碼基本相同,特別是一些國外簡潔明了的優(yōu)秀主題更是如此。
當(dāng)我們要修改某部分樣式及結(jié)構(gòu)時,都會直接打開Wordpress主題模板文件或在后臺編輯主題,密密麻麻的代碼,就是主題作者自己看了也會頭暈眼花,所以會經(jīng)常在關(guān)鍵部位加上一些注釋,
php中注釋一般為:!– XXX –
css中為:/** XXX **/
一般調(diào)整比較常見的是頁面寬度、文本主體寬度、字體大小、行間距、背景顏色等。通過修改style.css文件都能夠達(dá)到預(yù)期效果(部分主題會指定CSS文件,只需對應(yīng)找到控制的CSS文件),部分國外主題在functions.php中加入加入大量模板函數(shù),這不是本文講述的重點。
三、修改Wordpress主題CSS文件
下面以Wordpress默認(rèn)主題Twentyeleven修改為例
用Mozilla Firefox瀏覽器打開網(wǎng)站,首先在要修改樣式的地方右鍵單擊→查看元素。
此時瀏覽器自動打開DOM樣式探查器
左側(cè)是頁面html源代碼,右側(cè)這部分就是控制標(biāo)題文字的CSS屬性,當(dāng)然可以自己琢磨著對照左側(cè)代碼進(jìn)行選擇
我們簡單地對CSS參數(shù)進(jìn)行調(diào)整,可以實時預(yù)覽效果,不管是字體大小,還是背景顏色都如此。
例如把color: rgb(34, 34, 34);調(diào)整為color: rgb(345, 34, 34);你會發(fā)現(xiàn)標(biāo)題顏色發(fā)生改變,再加入字體參數(shù)font-size: 20px;
font-family: 微軟雅黑; 此時發(fā)現(xiàn)頁面中,文章標(biāo)題全部都變?yōu)槲④浹藕谧煮w,字號為20px,紅色,調(diào)整到滿意的效果后,就應(yīng)該把文件修改進(jìn)CSS文件里。注意:字體如果是要使用微軟雅黑等中文字體時,需要參照CSS中文字體對照表使用Unicode編碼
保存方法有二種
一種是對照代碼右側(cè)位置style.css:745 用Dreamweaver軟件或是記事本打開style.css文件找到第745行代碼進(jìn)行修改。另一種是點擊style.css:745自動跳轉(zhuǎn)到樣式編輯器,然后選擇保存CSS文件。
你在后臺 外觀 編輯 里邊有CSS的樣式表 就可以直接編輯 但如果你的主題比較復(fù)雜的話 也許樣式表不止一個 你在那里編輯的話有可能會沒用 你試試。Wordpress 管理后臺,導(dǎo)航 - 外觀 - 編輯,往底下拉,右邊有個 style.css,這就是 Wordpress 主題的樣式表,點擊即可編輯。
很多wordpress主題都提供了可自定義編輯、修改功能,如:更改背景圖片,背景顏色,頂部圖片,還有一些主題上的小工具可以選擇是否讓它顯示出來等等,但是并不是所有的wp主題都提供這樣的功能,所以如果你不熟悉wordpress主題修改,那么建議你選擇wp主題的時候,盡可能選擇能支持自定義編輯的主題。下面,無憂主機()小編將演示修改wordpress主題的style.css樣式表的過程。首先如下圖,登錄后臺點擊外觀-編輯-就可以看到主題的css樣式表了。
主題所有的樣式都是寫在style.css里面的,今天就以博客文章的字體大小為例做演示。大家都知道,wp的文章是不能修改字體大小的,但是我們可以通過修改主題樣式文件來達(dá)到修改字體大小的目的。我們只需要在style.css中,找到font-size:100% 把它改為Font-size:20px后,點更新,然后返回到博客首頁,就可以看到修改后的效果。這個是很簡單的一個操作。我們只需要隨意修改css樣式表里面的屬性,就可以控制并改變wp主題的輸出,非常簡單強大。
WordPress2.5已經(jīng)正式發(fā)布,最近看了不少關(guān)于新版本的介紹與評價,感覺這個版本與原來相比有較大的變動,因此我沒有急于升級。而是在先在我的本地wordpress中進(jìn)行了測試,看看新版本與現(xiàn)在主題和插件的兼容性。 不過在把本地wordpress升級到2.5后(我使用了一件升級插 1. 樣式表簡介 樣式表(Stylesheet)是一個WordPress主題的重要組成部分之一,它負(fù)責(zé)控制整個主題的所有樣式,包括:字體,顏色,圖片,鏈接,模塊的位置等等. 一般來說一個WordPress主題擁有一個樣式表文件(style.css),你可以在后臺的主題編輯器中查看現(xiàn)在使用主題的所有組成文件。 (1) 應(yīng)用實例 a 比如你撰寫了一個contact me的頁面,想要為這個頁面自定義另外一個樣式,讓它與主題中的其他頁面不同 樣式表(Stylesheet)的使用一般是在主題的 header.php文件中定義的,打開你的header.php找到以下的語句: link rel=stylesheet href=?php bloginfo(’stylesheet_url’); ? type=text/css media=screen / 以上語句說明了主題調(diào)用主題文件夾中的stlye.css文件。如果想要為特定的一個分類定義一個另一個樣式表的話只需要將代碼改成: 以下為引用的內(nèi)容: ?