WordPress页面添加字体大小切换cookie版

上篇《WordPress主题添加字体大小切换按钮》中的方法，当浏览者刷新页面后，不能将设置保存到浏览器cookie中，需再次选择字体大小，不够人性化，有童鞋提出能不能选择一次，刷新后不用再次选择，下面就以 Prower V4主题 为例，将浏览者选择的字号大小信息保存到浏览器cookie的方法，添加到Wordpress主题中。

步骤一，在 Prower V4主题主题目录中新建一个名称为：js 的文件夹，将下载的jquery.min.js和styleswitch.js放进去。

所需JS文件下载：jquery.min和styleswitch（提取码：ap61）

再新建一个名称为：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，刷新后或者再次浏览你的站点，将会继续显示之前选择的字号。

 上面的方法只用于改变字号，有点大材小用，可以通过定义不同的样式让浏览者选择整体布局和风格，就看你的想像力和创造力了！

!

也想出现在这里？ 联系我们吧