页面字体大小切换cookie版

WordPress324.7K阅读模式

上篇《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
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  32  访客  31  作者  1
    • 五度空间
      五度空间 4

      在此代表童鞋多谢鸟哥的辛苦劳动。

      • 复利
        复利 1

        牛,上午看过还木有。下午就出来了。真是速度啊。学习。

        • 田润林的博客
          田润林的博客 1

          同一楼,知更鸟是只勤快的鸟

          • 女生
            女生 4

            天天关注鸟哥的动态

            • 门软
              门软 5

              给力!

              • zivpin
                zivpin 0

                给我打开了思路

                • 403放映室
                  403放映室 1

                  过来关注动态

                  • DennisPo
                    DennisPo 4

                    这个网站我总觉得模版过于华丽,华丽的不适合我用来做行业站,呵呵。

                    • Arron
                      Arron 7

                      鸟哥挺能折腾的,哈哈,最近想入手鸟哥的 Linode主机

                      • 胡倡萌
                        胡倡萌 3

                        有空也折腾下……

                        • 建站网
                          建站网 0

                          准备折腾。。

                          • cowtu
                            cowtu 3

                            哥 ,你今天的网站好几次都打不开,被墙了?

                            • IT实验室
                              IT实验室 3

                              请问鸟哥的视频播放是怎么实现的,小弟用鸟哥的主题本地调试的时候,flash在视频里添加后,页面有了,但是访问是不能播放,也不能像鸟哥一样出现视频截图。求解

                              • beyondme37
                                beyondme37 4

                                这个功能用还是不多吧

                                • 软迷
                                  软迷 1

                                  看到这多站,就鸟哥没有换过主题

                                  • Kay
                                    Kay 4

                                    不错~好技术

                                    • 狼子好心
                                      狼子好心 0

                                      高人,想问问不是用你网站当前主题的话,怎么实现首页右上角“近期热门~分类目录”这样的样式啊

                                      • york
                                        york 2

                                        鸟哥,能对某用户创建的文类进行管理吗?

                                        • 复利理财
                                          复利理财 3

                                          鸟哥,我有一个问题,像你的站点击“技术分享”进入文章列表,最后分页不能显示总共几页,但点击“浏览博客”就显示94页,怎么才能在 “技术分享”里面也能显示 多少页呢,能加下拉跳转或者>> 双箭头翻页么?

                                            • 知更鸟
                                              知更鸟

                                              @ 复利理财 可以参考:
                                              http://zmingcx.com/hotnews-pro-2-7-1-plus-faq.html
                                              第12条修改一下

                                            • 骷髅猫
                                              骷髅猫 5

                                              蛮给力的,支持鸟哥。

                                              • 饭拍秀
                                                饭拍秀 1

                                                准备折腾。。

                                                • zltlg
                                                  zltlg 0

                                                  不错

                                                  • 奶茶
                                                    奶茶 3

                                                    代码改改可以用于改变版式布局,看来挺给力的,有时间研究下。

                                                    • 山寨吧
                                                      山寨吧 3

                                                      博客打开了,多个备案号,看来小鸟前一段时间是去备案了。当时做站的备案岂不更好 。恭喜你一个

                                                      • 第九技术
                                                        第九技术 2

                                                        早起的鸟有虫子吃,知更鸟勤快,值得学习。

                                                        • 广州电脑医院
                                                          广州电脑医院 0

                                                          好方法 但有时候大中小样式影响不大

                                                          • pptv播放器下载
                                                            pptv播放器下载 1

                                                            终于在这里找到我要的答案了.

                                                            • 番茄
                                                              番茄 2

                                                              这个得去折腾看看。

                                                              • txh
                                                                txh 3

                                                                鸟叔,我有个思路,我想问您个问题,这个styleswitch的脚本里,哪里改动一下,可以实现支持更多css切换效果,原最多只能切换3个(大中小)css1,css2,css3,若想多写几个,css4,css5……就会切换失败

                                                                • txh
                                                                  txh 3

                                                                  分析:这是一段配合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++)那个循环的语句那里,以及可能到下面,哪里写限制了,但我不大懂。求鸟叔赐教

                                                                匿名

                                                                发表评论

                                                                匿名网友
                                                                :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                                                                拖动滑块以完成验证