WordPress一个主题多个样式表

记得前段日子写了篇《 WordPress不同页面显示不同的侧栏.》。通过该办法,使实了Wordpress不同页面显示不同的布局。今天,我来给大家分享一个教程,一个主题使用多个样式表,并可以在页面上快速切换,你可能已经见过了这样的主题,如果你还不明白它有什么用处。那么你可以看看下面几个例子。通过点击页面右上角落上不同颜色的小图,就可以改变主题的配色。

Xplosive Reloaded
Wicked Lemon
Wpdesigner7

如何实现这样的功能呢?每一个WordPress主题都有一个style.css文件,你可以查看一下自己目前用的主题文件目录下是否有个style.css。.css是一个的样式表文件,它定义了主题的颜色,字体,等等等等,如果你不明白CSS是什么,那么你可以看看< strong>什么是CSS?它的能做些什么?。通常是在主题的header.php文件里有这样的一段代码。

1
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

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

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

1
 <link rel="alternate stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/blue.css" media="screen" title="blue" />

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

我们需要一个JS文件,点击下载 styleswitcher.js,并将它放在主题目录下。

继续编辑header.php,在标签前面加上调用这个js文件的代码:

1
 <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/styleswitcher.js"></script>

好了,现在你只要加页面上加入一个链接,或者是个按钮,点击后就可以切换了。下面代码供参考。

1
 <a style="color:#ffffff;" title="Blue" onclick="setActiveStyleSheet('blue'); return false;" href="#">Blue</a>

好了。教程到这里结束了。 :neutral:
英文原文教程地址:http://www.blogohblog.com/integrating-alternative-stylesheets/

This entry was posted in Wordpress and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">