WordPress 模板文件極簡教程

安裝完了WordPress，發(fā)現(xiàn)一個(gè)很不錯(cuò)的主題，接著又安裝了一些必需的插件，可是最后，你還想個(gè)性化一下自己的博客外觀。 你想更改版權(quán)文字，想添加自定義header圖片，還想改下文章的標(biāo)題字體，總之，你總覺得還有很多地方有待改進(jìn)。

要實(shí)現(xiàn)這些效果，最好的方法當(dāng)然是快速更改模板文件里的一些變量。WordPress管理后臺的外觀>編輯菜單下就是一個(gè)主題編輯器。可是對不懂代碼的人來說， 編輯器下的那些文件就像天書一樣。

不過請別灰心。只要你肯多花點(diǎn)時(shí)間來研究，即使不懂編程，你也可以對自己的主題做些小小的修改。

主題編輯器的右邊是一條模板文件列表。 列表被分為兩部分： 模板文件和樣式表。 大多數(shù)情況下，樣式表版塊里只有一個(gè)文件，這個(gè)文件里包含了主題的所有視覺元素屬性。 在這里你可以對標(biāo)題字號大小、段落間距、背景顏色以及幾乎其它所有博客版面進(jìn)行修改。

修改博客版面上的設(shè)計(jì)元素

看著面前的CSS代碼，作為新手的你需要從哪里入手呢？ 乍一眼看去，這些代碼的確很復(fù)雜，但是你可以利用Firefox插件Firebug更直觀地進(jìn)行查看。 安裝Firebug只需要幾分鐘，但之后它可以幫你減少很多麻煩。

首先打開Firefox瀏覽器，進(jìn)入firebug主頁，點(diǎn)擊“Download”安裝Firebug插件。 重啟Firefox瀏覽器，然后打開博客頁面。 我們先從標(biāo)題開始。 右擊標(biāo)題并選擇“查看元素”，你會看到瀏覽器下方出現(xiàn)了一個(gè)工具條。

你可以看見，工具條里有一行被高亮顯示的代碼。 工具條分左右兩部分，左側(cè)是標(biāo)題標(biāo)簽的HTML代碼，我們暫且跳過。 右側(cè)就是定義標(biāo)題標(biāo)簽樣式的CSS代碼了。 首先來觀察一下右側(cè)的代碼：

怎樣？ 這段代碼看起來還算容易理解吧？ Font size和font weight意思相近，都是對字體屬性的描述。 。 這里的標(biāo)題字體大小為18，稍后你可以更改這個(gè)數(shù)值。注意這里的標(biāo)題： “h2.postTitle a”。 這是CSS文件對你的標(biāo)題的定義。

接下來回到博客后臺的主題編輯器，在style.css文件中查找“h2.postTitle a”。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈