为WordPress主题加入一个可选的定制样式表

转自:Wopus中文平台 http://www.wopus.org/integrating-alternative-stylesheets.html

今天我来给大家分享一个教程&＃xff0c;一个主题使用多个样式表&＃xff0c;并可以在页面上快速切换&＃xff0c;你可能已经见过了这样的主题&＃xff0c;如果你还不明白它有什么用处。那么你可以看看下面几个例子。

通过点击页面右上角落上不同颜色的小图&＃xff0c;就可以改变主题的配色。

例如这两个主题:Xplosive Reloaded Wpdesigner7 

在绝大多数的情况下&＃xff0c;每一个WordPress主题有一个style.css文件&＃xff0c;你可以查看一下自己目前用的主题文件目录下是否有个 style.css。style.css是一个的样式表文件&＃xff0c;它定义了主题的颜色&＃xff0c;字体&＃xff0c;等等等等&＃xff0c;如果你不明白CSS是什么&＃xff0c;那么你可以看看什么是CSS&＃xff1f;它的能做些什么&＃xff1f;。通常是在主题的header.php文件里有这样的一段代码。

" type&＃61;"text/css" media&＃61;"screen" />

这是代码表示这个主题调用CSS,并且指出了CSS文件的地址。

明白了这些&＃xff0c;现在&＃xff0c;你需要新建一个CSS文件&＃xff0c;根据原先主题的CSS&＃xff0c;更改外观或布局。例如&＃xff0c;你可以改变颜色的背景&＃xff0c;字体&＃xff0c;定位工具栏&＃xff0c;页眉图像等&＃xff0c;&＃xff08;CSS修改不在本文的讨论范围&＃xff09;你新建的CSS文件&＃xff0c;将成为你主题的第二个样式表&＃xff0c;以供页面上风格切换的调用&＃xff0c;你应该为它取个名字&＃xff0c;比如 blue.css。我们应该像默认的CSS文件那样&＃xff0c;在header.php声明一下&＃xff0c;如下面这段代码。

/blue.css" media&＃61;"screen" title&＃61;"blue" />

现在&＃xff0c;在header.php中声明了blue.css文件的存在&＃xff0c;CSS文件也有了&＃xff0c;但是&＃xff0c;我们暂时没有使用它&＃xff0c;它只是个替补&＃xff0c;我们采用Javascript以供页面上样式切换功能的实现。

点击下载styleswitcher.js文件&＃xff0c;并将它放在主题目录下

继续编辑header.php&＃xff0c;在标签前面加上调用这个js文件的代码&＃xff1a;

好了。教程到这里结束了&＃xff0c;本文重在讲述的过程&＃xff0c;而没有对CSS修改等具体问题进行讨论&＃xff0c;有问题&＃xff0c;欢迎留言!

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