上篇《WordPress主题添加字体大小切换按钮》中的方法，当浏览者刷新页面后，不能将设置保存到浏览器cookie中，需再次选择字体大小，不够人性化，有童鞋提出能不能选择一次，刷新后不用再次选择，下面就以 Prower V4主题 为例，将浏览者选择的字号大小信息保存到浏览器cookie的方法，添加到Wordpress主题中。
步骤一，在 Prower V4主题主题目录中新建一个名称为：js 的文件夹，将下载的jquery.min.js和styleswitch.js放进去。
所需JS文件下载：jquery.min和styleswitch
再新建一个名称为：css 的文件夹，并在其中新建名称为：c1.css、c2.css、c3.css三个样式文件。
打开三个样式文件分别在其中输入：
- 在第一个中输入：#post_content {font-size: 14px;}
- 在第二个中输入：#post_content {font-size: 16px;}
- 在第三个中输入：#post_content {font-size: 18px;}
其中：post_content 为主题正文部分的DIV选择器，可视不同主题作适当修改。
步骤二，打开主题header模版，在：
- <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
下面添加：
- <link title=css1 rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/c1.css" />
- <link title=css2 rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/c2.css" />
- <link title=css3 rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/c3.css" />
在</head>标签上面添加：
- <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js" ></script>
- <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/styleswitch.js" ></script>
步骤三，打开主题single模版，在：
- <div class="meta"><?php the_time('Y-m-d'); ?></div>
下面添加：
- <div span="fontsize">
- <a class="styleswitch" style="cursor: pointer" title="小" rel=css1>小</a>
- <a class="styleswitch" style="cursor: pointer" title="中" rel=css2>中</a>
- <a class="styleswitch" style="cursor: pointer" title="大" rel=css3>大</a>
- </div>
折腾完成。
浏览者只要不清空浏览器cookie，刷新后或者再次浏览你的站点，将会继续显示之前选择的字号。
上面的方法只用于改变字号，有点大材小用，可以通过定义不同的样式让浏览者选择整体布局和风格，就看你的想像力和创造力了！
本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
山东省济南市 1F
在此代表童鞋多谢鸟哥的辛苦劳动。
上海市 2F
牛，上午看过还木有。下午就出来了。真是速度啊。学习。
美国 3F
同一楼，知更鸟是只勤快的鸟
河北省石家庄市 4F
天天关注鸟哥的动态
四川省宜宾市 5F
给力！
江苏省 6F
给我打开了思路
上海市 7F
过来关注动态
安徽省合肥市包河区 8F
这个网站我总觉得模版过于华丽，华丽的不适合我用来做行业站，呵呵。
浙江省台州市 9F
鸟哥挺能折腾的，哈哈，最近想入手鸟哥的 Linode主机
广东省深圳市 10F
有空也折腾下……
上海市闵行区 11F
准备折腾。。
湖南省长沙市 12F
哥 ，你今天的网站好几次都打不开，被墙了？
浙江省台州市 B1
@ cowtu 是抽风
湖北省武汉市 13F
请问鸟哥的视频播放是怎么实现的，小弟用鸟哥的主题本地调试的时候，flash在视频里添加后，页面有了，但是访问是不能播放，也不能像鸟哥一样出现视频截图。求解
北京市朝阳区 14F
这个功能用还是不多吧
湖北省 15F
看到这多站，就鸟哥没有换过主题
广东省中山市 16F
不错~好技术
广东省佛山市 17F
高人，想问问不是用你网站当前主题的话，怎么实现首页右上角“近期热门~分类目录”这样的样式啊
广东省广州市 18F
鸟哥，能对某用户创建的文类进行管理吗？
上海市杨浦区 19F
鸟哥，我有一个问题，像你的站点击“技术分享”进入文章列表，最后分页不能显示总共几页，但点击“浏览博客”就显示94页，怎么才能在 “技术分享”里面也能显示 多少页呢，能加下拉跳转或者>> 双箭头翻页么？
中国 B1
@ 复利理财 可以参考：
http://zmingcx.com/hotnews-pro-2-7-1-plus-faq.html
第12条修改一下
浙江省杭州市 20F
蛮给力的，支持鸟哥。
福建省福州市 21F
准备折腾。。
北京市 22F
不错
广东省东莞市 23F
代码改改可以用于改变版式布局，看来挺给力的，有时间研究下。
河南省郑州市 24F
博客打开了，多个备案号，看来小鸟前一段时间是去备案了。当时做站的备案岂不更好 。恭喜你一个
广西柳州市 25F
早起的鸟有虫子吃，知更鸟勤快，值得学习。
广东省广州市 26F
好方法 但有时候大中小样式影响不大
广东省深圳市 27F
终于在这里找到我要的答案了.
湖北省武汉市 28F
这个得去折腾看看。
陕西省西安市 29F
鸟叔，我有个思路，我想问您个问题，这个styleswitch的脚本里，哪里改动一下，可以实现支持更多css切换效果，原最多只能切换3个（大中小）css1，css2，css3，若想多写几个，css4，css5……就会切换失败
陕西省西安市 30F
分析：这是一段配合query实现点击网页标签，更换网页css的脚本。
这个脚本实现的功能为：点击网页上：大，中，小，这三个标签，可以自由切换网页文本的大小（其实就是选择载入带cookie的“大”，中，小这三个之一的css，点了“大”载入css1，点了“载入”css2，点了“小”载入css3.
css1，css2，css3内容就是改变文本的一段css）
现在问题来了，现在，我想再加入两个按钮，对应css4，css5。和上面的原理一样。
问题是这个js内似乎哪里写限制了，导致只有那大中小，那3个按钮成功实现功能，如果新增css4，css5就无法实现了，我现在怀疑是for(var i=0;i < ca.length;i++)那个循环的语句那里，以及可能到下面，哪里写限制了，但我不大懂。求鸟叔赐教