在WordPress主题上添加风格切换功能（二） ‹ 站长巴士

RSS | 关于 | 在线留言 | 意见建议

首页 » 建站教程 » Blog教程 » Wordpress » 浏览内容

在WordPress主题上添加风格切换功能（二）

2012-02-14 08:57 75 0 发表评论

标签：wordpress

上回我介绍了如何在主题中简单实现风格切换功能, 但我的主题风格切换和 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;
}

以下是我的处理方法:

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”), 找到不带该属性的那个风格就立刻返回.
而我的没有用这个属性, 只能将默认的风格放在最前, 找到立刻返回. 也就是说, 每次放最前面的就是它的默认风格.