在wordpress主题上添加风格切换功能本文讨论的是如何在主题上添加风格切换功能. 这里将以 Classic 主题为模板, 用红绿蓝三种颜色作为例子, 手牵手地教你如何实现这个功能. 当然这是最简单的实现, 它可以变得更加灵活, 更加强大, 但这些只能在以后的文章中另作讨论. 本文会为你展示一个尽量简化的, 便于理解模型.
1. 用 JavaScript 实现的切换功能
本例的演示主题中我已经提供了完整的 JavaScript 代码 (js/styleswitcher.js), 如果你对 JavaScript 并不熟悉则没有必要研究它, 知道怎么调用就行了. 这段代码要利用 Cookie, 可以获取当前主题的样式代号(第一次取默认主题的), 和保存当前主题的样式代号.
js/styleswitcher.js 文件内 99% 的代码来自 wpdesigner7 主题. 但我修改过的 1% 决定了我的处理方法和 wpdesigner7 主题并不相同, 后续文章中我会说说其中的区别与优缺点.
2 .在主题中引用脚本 js/styleswitcher.js
在 header.php 的 <head> 和 </head> 之间添加以下代码:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/styleswitcher.js"></script>
3. 在主题中添加切换按钮
在主题内任何地方添加都可以, 但为了方便查阅我们还是将这些按钮添加到 header 中. 一共三个按钮, 在 header.php 文件的最后面追加以下代码:
<div id="styleswitchers">
<a id="style-green" onclick="setActiveStyleSheet('green');" href="javascript:void(0);">green</a>
<a id="style-blue" onclick="setActiveStyleSheet('blue');" href="javascript:void(0);">blue</a>
<a id="style-red" onclick="setActiveStyleSheet('red');" href="javascript:void(0);">red</a>
<div style="clear:both;"></div>
</div>
4. 为切换按钮的外形定义样式
在 style.css 中追加以下代码:
#styleswitchers a {
width:16px; /* 宽度为 16 个像素 */
height:16px; /* 高度为 16 个像素 */
text-indent:-999em; /* 不显示文本信息 */
display:block; /* 为了不显示文本信息而定义为块状 */
float:left; /* 左对齐 */
margin-right:4px; /* 按钮右边的外边距 */
}
5. 定义不同风格的样式 (以红色为例)
创建文件 styles/red/default.css 和 styles/red/global.css 两个文件, 其中 default.css 只在激活该风格时才会生效, 它控制整个界面的样式; 而 global.css 则是任何时候有效的, 它只负责确定切换按钮的样式.
Q1: 为什么不将 default.css 和 global.css 两个文件合并在一起?
A1: 因为我们要将主题样式和按钮样式分离开, 在本例中并看不出有什么优点, 但在后续文章的例子中, 这将变成极大的方便. 如: 一个主题本来有 1, 2, 3 三种风格, 当引入风格 4 的时候, 我们就不需要再去修改 1, 2, 3 中关于 4 风格的切换按钮样式了 (各负责各的).Q2: 分为 default.css 和 global.css 两个文件对性能有什么影响?
A2: 因为链接数多了, 所以效率相对低一点点, 但这是微乎其微的, 不会影响用户体验.Q3: 什么情况下不用分为 default.css 和 global.css 两个文件.
A3: 如果你的风格不多, 或者风格数量不变, 那没有必要分为两个文件.
这里的 styles/red/default.css 只是修改了 header 和 footer 的背景颜色, 代码如下:
.credit {
background:#a09090;
}
#header {
background:#a09090;
}
而 styles/red/global.css 定义了红色风格切换按钮的样式, 代码如下:
a#style-red {
background:#a09090;
}
a#style-red:hover {
background:#e09090;
}
以同样的方式创建 green 和 blue 风格. 如果你要创建更多风格或者用别的命名, 请保持使用英文, 数字和下划线的组合 (数字不能是第一个字符), 因为 HTML 标签中的 id 和 class 属性不能存在其他的字符.
6. 在主题中引入各种风格的样式
在 header.php 的 <head> 和 </head> 之间添加以下代码: (第一个为默认风格)
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/styles/green/default.css" type="text/css" media="screen" title="green" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/styles/green/global.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/styles/blue/default.css" type="text/css" media="screen" title="blue" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/styles/blue/global.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/styles/red/default.css" type="text/css" media="screen" title="red" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/styles/red/global.css" type="text/css" media="screen" />
上面的主题风格切换和 wpdesigner7 的究竟有什么不同呢? 主要在获取风格的方法 getPreferredStyleSheet 上.
而这个方法什么时候被调用? 在需要获取风格设定的时候, 主题会先去 Cookie 查找上一次使用的风格, 如果找不到 (一般是第一次运行的时候), 就会调用这个方法.
window.onload = function(e) { // 页面加载完成时
var cookie = readCookie("style"); // 读取 Cookie
var title = cookie ? cookie : getPreferredStyleSheet(); // 获取上一次的风格
setActiveStyleSheet(title); // 重新设定风格
}
以下是 wpdesigner7 的方法:
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 遍历所有 link 标签
if(a.getAttribute("rel").indexOf("style") != -1 // 找到包含 style 的描述
&& a.getAttribute("rel").indexOf("alt") == -1 // 找不到包含 alt 的描述
&& a.getAttribute("title") // 找到 title 属性
) {
return a.getAttribute("title");
}
}
return null;
}
以下是neo的处理方法:
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")
) {
return a.getAttribute("title");
}
}
return null;
}
或许你已经注意到了, 少了句代码而已. a.getAttribute("rel").indexOf("alt") == -1 的意思是 “在标签中无法找到带 alt 的描述属性”.
wpdesigner7 靠这个来判断获取哪个风格 (非默认风格都添加了属性 rel=”alternate stylesheet”), 找到不带该属性的那个风格就立刻返回.
而neo的没有用这个属性, 只能将默认的风格放在最前, 找到立刻返回. 也就是说, 每次放最前面的就是它的默认风格.
