爲你的Wordpress再加入一個主題樣式表

感謝韓人的投稿
在遙遠的俄羅斯,還惦記着Wopus中文平臺和國內玩WordPress的朋友。俺們也祝福韓人早點找個俄羅斯的MM!

今天我來給大家分享一個教程,一個主題使用多個樣式表,並可以在頁面上快速切換,你可能已經見過了這樣的主題,如果你還不明白它有什麼用處。那麼你可以看看下面幾個例子。
通過點擊頁面右上角落上不同顏色的小圖,就可以改變主題的配色。

Xplosive Reloaded
Wpdesigner7


在絕大多數的情況下,每一個WordPress主題有一個style.css文件,你可以查看一下自己目前用的主題文件目錄下是否有個 style.css。style.css是一個的樣式表文件,它定義了主題的顏色,字體,等等等等,如果你不明白CSS是什麼,那麼你可以看看什麼是CSS?它的能做些什麼?。通常是在主題的header.php文件裏有這樣的一段代碼。

這是代碼表示這個主題調用CSS,並且指出了CSS文件的地址。

明白了這些,現在,你需要新建一個CSS文件,根據原先主題的CSS,更改外觀或佈局。例如,你可以改變顏色的背景,字體,定位工具欄,頁眉圖像等,(CSS修改不在本文的討論範圍)你新建的CSS文件,將成爲你主題的第二個樣式表,以供頁面上風格切換的調用,你應該爲它取個名字,比如 blue.css。我們應該像默認的CSS文件那樣,在header.php聲明一下,如下面這段代碼。

現在,在header.php中聲明瞭blue.css文件的存在,CSS文件也有了,但是,我們暫時沒有使用它,它只是個替補,我們採用JavaScript以供頁面上樣式切換功能的實現。

點擊下載styleswitcher.js文件,並將它放在主題目錄下

繼續編輯header.php,在標籤前面加上調用這個js文件的代碼:

好了。教程到這裏結束了,本文重在講述的過程,而沒有對CSS修改等具體問題進行討論,有問題,歡迎留言!

英文原文教程地址:http://www.blogohblog.com/integrating-alternative-stylesheets/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章