网贝|BT’s homeland

首先请看以下这三个用WordPress搭建的站点：

• Xplosive Reloaded
• Wicked Lemon
• Wpdesigner7

注意它们的右上角位置都有几个色块，点击这几个色块，可以立即更改整个站点的配色，实际上是即时切换了style sheet(css)文件，以实现这种效果。其实切换css文件可不仅仅可以改配色，把整个主题翻个底朝天都不难。那么这种华丽的效果在代码上是如何实现的呢？BlogOhBlog的Jai专门写了一篇文章教导大家。当然了，blacktulip很乐意将其用方块字重新描述一遍与大家分享。

第一步，让我们来看看WordPress是怎样调用css文件的，在header.php里头，可以找到类似：

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

这样的一行，其中rel="stylesheet"说明这是在调用css。

好，现在假设你有两个别的css文件，一个叫orange.css，另一个叫blue.css，你希望站点能实时切换这几个css文件，那要怎么办呢？

首先必须在header里面加入定义，把那两个css文件放在你正在使用的模板目录下(也就是原始的style.css所在的路径)，然后在header.php方才那行的下面加上这样两行：

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

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

当然，也可以放在别的地方，以上两行的路径做相应修改即可。

其次，点击下载styleswitcher.js文件，将其也放在正在使用的模板目录下。

接着，继续编辑header.php，在</header>标签前面加上调用这个js文件的代码：

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

最后，就是在你的WordPress页面中加入几个按钮来切换css。这就没有什么统一的代码了，你想怎么弄都行，发挥想象力吧。下面是一例，随便在模板哪个地方加上：

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

那么，教程结束了，很简单吧。自己动手试试看？

css, wordpress, 模板