WP Theme

在主题上添加风格切换功能 (1)

Jan 22nd, 2009 Add Comment

本文讨论的是如何在主题上添加风格切换功能. 这里将以 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" />

现在 Classic 主题已经拥有了简单的风格切换功能. 你也可以点击下面的链接下载我已经修改好的主题:
classic_with_styleswitcher_1.zip

下次, 我们会讨论一下本例与 wpdesigner7 主题在处理风格切换上的主要不同, 如果你本文或者以后的章节有任何意见和想法, 请在此留言.

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 在主题上添加风格切换功能 (1)

37 Comments 1 Trackbacks

calcifer | May 18th, 2009 at 17:39

@mg12
mohamad hassan 说的是这个link
classic_with_styleswitcher_1.zip
mg12 | May 18th, 2009 at 14:13

@connie
@calcifer 正解!
评论者头像到后台禁掉就可以了.

@mohamad hassan
Which link?
calcifer | May 18th, 2009 at 08:11

@connie
1、修改CSS，找到 #tagline 删除 border-top:1px solid #FFFFFF; 就OK了。
2、请使用插件…… Recent Comment，在widgets设置其显示模式
mohamad hassan | May 18th, 2009 at 02:59

hello dear
the link of downliad is broken
please repair
best rigards
connie | Apr 20th, 2009 at 23:01

还有,就是我想在首页最新留言那显示留言者的头像,请问该怎么弄呢?
再谢啦.
connie | Apr 20th, 2009 at 22:59

你好!
我也超喜欢你设计的主题,功能太全了,而且还可以根据自己的需要更改样式,非常好
不过,偶是菜鸟,对css一窍不通,现在遇到点问题,就是我想去掉博客名称下面的细线,可是能力有限,搞了半天都没搞好,现在向前辈请教,请问能具体说明一下怎么做吗?谢谢
mg12 | Apr 20th, 2009 at 17:21

@Sean
肯定会. 用不用看你怎么认为而已.
Sean | Apr 20th, 2009 at 15:14

这样做会不会增加很多的http请求？影响速度啊？
mg12 | Feb 1st, 2009 at 21:29

@LSvKing.CN
早换了, 那个没前途...

@hiswing
同乐

@向右
不晚, 2009 年都还没结束, 哈哈~

@小王子
互相学习.
小王子 | Feb 1st, 2009 at 14:56

我来学习了.
向右 | Jan 31st, 2009 at 20:46

希望现在说“新年好”应该不算太晚~呵呵
hiswing | Jan 31st, 2009 at 15:41

来拜年啦，新年快乐
Randy | Jan 31st, 2009 at 15:08

不错，支持~~~~~~~~
LSvKing.CN | Jan 31st, 2009 at 14:45

哥们，来给你拜个晚年了，咋换域名啦。
mg12 | Jan 30th, 2009 at 16:09

@YYY
这是 Highslide4WP 插件, 你可以到导航栏点击访问我的插件页面下载.
h3 要改 sidebar.php 的东西, 如果你用 Widget 那就到 functions.php 修改吧.

@Salafysidoarjo
No, I am a Chinese.
Salafysidoarjo | Jan 30th, 2009 at 14:54

very nice theme thanks....btw are you japanese?
YYY | Jan 30th, 2009 at 13:45

刚发现了，发表评论后不用刷新页面而是等待的一个小画面怎么实现的？你这里太多符合我风格的东西了。哈哈。顺便提个建议：sidebar里的分隔条是5像素的，压扁成3像素高会觉得更精致。（个人观点）
YYY | Jan 30th, 2009 at 13:42

你好，刚用上你的主题，很好很强大。想问下这个表情是什么插件？还是用别的方法实现的。另外sidebar里的中文标题h3字体在哪里更换？我找了很久，谢谢了！
mg12 | Jan 30th, 2009 at 13:16

新年快乐!
HK | Jan 29th, 2009 at 12:44

技术文章，不错！
新年快乐！
dust2k | Jan 28th, 2009 at 10:13

这个功能实现的方式很多，单独的插件也许是个更好的选择，因为可以独立的卸载，而且可以跟所有的Themes共存。
Mao | Jan 27th, 2009 at 21:34

我想知道..这个主题还有没有机会支持2.7的套套回复?
xiaorsz | Jan 26th, 2009 at 16:52

看来大家都忙去过年了！！
我是来拜年的，新年快乐哈！
吖Bee | Jan 26th, 2009 at 12:08

呵呵,新年恭祝各位，新春快乐,万事胜意，心想事成，牛年有喜！
米店老板 | Jan 25th, 2009 at 21:42

祝万事如意，牛年行大运，万事如意。
醉倚西风 | Jan 25th, 2009 at 18:43

春节快乐
mg12 | Jan 25th, 2009 at 11:01

@猪小猪
 @unicac
@M.蘾娚
(- -!) 一个极少图片的主题再慢也不会比一个靠图片搭建起来的主题慢, 心理作用...
M.蘾娚 | Jan 24th, 2009 at 20:04

我在测试blog的主题，感觉有点慢，O(∩_∩)O~
aunsen | Jan 24th, 2009 at 12:44

拜年了！
feicun | Jan 23rd, 2009 at 12:56

紧紧跟随mg的脚步，一步一步学完这个教程
ibmwblog | Jan 23rd, 2009 at 12:26

that's cool, thanks for the tips to change theme easily:)
YIMO | Jan 23rd, 2009 at 11:38

文章很好，很有用的。转载一下，Thank you!O(∩_∩)O~
齐林 | Jan 23rd, 2009 at 10:06

没事还是不要换主题的好！
unicac | Jan 23rd, 2009 at 00:03

的确感觉有点慢！
Alan | Jan 22nd, 2009 at 23:51

收藏，顺便祝新春快乐，万事胜意
水灰色 | Jan 22nd, 2009 at 23:11

似乎用过类似功能的插件……
猪小猪 | Jan 22nd, 2009 at 21:59

沙发！！
我觉得你的主题太过于强大了，感觉速度慢些

Add Comment Read Article

WP Theme

在主题上添加风格切换功能 (1)

Theme, Tutorial, WordPress