页面字体大小切换cookie版

知更鸟
知更鸟
知更鸟
1632
文章
6932
评论
2012年10月20日18:11:08324.7K3

上篇《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三个样式文件。

打开三个样式文件分别在其中输入:

  1. 在第一个中输入:#post_content {font-size14px;}   
  2. 在第二个中输入:#post_content {font-size16px;}   
  3. 在第三个中输入:#post_content {font-size18px;}  

其中:post_content 为主题正文部分的DIV选择器,可视不同主题作适当修改。

步骤二,打开主题header模版,在:

  1. <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />  

下面添加:

  1. <link title=css1 rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/c1.css" />   
  2. <link title=css2 rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/c2.css" />   
  3. <link title=css3 rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/c3.css" />  

</head>标签上面添加:

  1. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js" ></script>
  2. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/styleswitch.js" ></script>  

步骤三,打开主题single模版,在:

  1. <div class="meta"><?php the_time('Y-m-d'); ?></div>  

下面添加:

  1. <div span="fontsize">   
  2.     <a class="styleswitch" style="cursor: pointer" title="小" rel=css1>小</a>   
  3.     <a class="styleswitch" style="cursor: pointer" title="中" rel=css2>中</a>    
  4.     <a class="styleswitch" style="cursor: pointer" title="大" rel=css3>大</a>   
  5. </div>  

折腾完成。

浏览者只要不清空浏览器cookie,刷新后或者再次浏览你的站点,将会继续显示之前选择的字号。

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

weinxin
版权声明
本站原创文章转载请注明文章出处
WordPress 删除xmlrpc.php防DDOS攻击 WordPress

WordPress 删除xmlrpc.php防DDOS攻击

可能很多WordPress用户都不知道这个xmlrpc.php是什么,简单地说就是Wordpress 为手机等客户端提供的接口文件,早期的Wordpress 这个接口就是个万恶之源,虽然经过多次的升级...
WordPress 5.6.1 维护更新 WordPress

WordPress 5.6.1 维护更新

WordPress 5.6.1 维护更新,修复20个错误及7个区块编辑器问题,无安全更新,中文版同期发布。 看了一下更新日志,只有少数几个程序的错误,基本都是修正默认主题的错误。 该版本是一个短周期维...
登录用户显示不同的 WordPress 菜单 WordPress

登录用户显示不同的 WordPress 菜单

如果让登录用户与未登录浏览者,显示不同的菜单,可以通过下面的代码实现: 登录用户显示不同的 WordPress 菜单 将下面代码添加到当前主题函数模板functions.php中: if( is_us...