WordPress主题添加字体大小切换按钮

2012年10月19日12:10:13 39 6,027

经常会看到一些网页在显著位置有一个“大、中、小”的字号选择切换按钮,这是个很人性化的设计,方便不同人群的阅读习惯。下面以默认主题Twenty Eleven为例,把该功能集成到Wordpress主题中。

一、打开Twenty Eleven主题文章页面模板single.php,把下面javascript代码:

  1. <script type="text/javascript">   
  2.     function doZoom(size) {   
  3.         var zoom = document.all ? document.all['primary'] : document.getElementById('primary');   
  4.         zoom.style.fontSize = size + 'px';   
  5.     }   
  6. </script>  

加到第12行:

  1. <div id="primary">  

上面。

注:primary为正文内容所在的id选择器标签名称,可根据不同主题进行修改,前提正文内容所在选择器必须是<div id="primary">形式,采用<div class="primary">控制将失效。

二、把下面代码:

  1. <div class="font"><a href="javascript:doZoom(12)">小</a> <a href="javascript:doZoom(13)">中</a> <a href="javascript:doZoom(18)">大</a></div>  

加到:

  1. <span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></span>  

下面,视不同主题可以放在自己认为合适的位置。

其中:数字为不同的字号大小,可自行修改。

三、最后根据不同的主题添加适当的样式控制,这里略过。

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

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

目前评论:39   其中:访客  28   博主  3   引用   8

    • 死神面具 2

      沙发。。。

      • 杨玲 4

        鸟哥,又在研究新的主题了~~~

        • Aaron 7

          鸟哥的主题,功能是没话说的,哈

          • 左岸读书 1

            有没有办法让浏览者选择一次后,以后的文章就按选择的字体大小显示?
            也就是如何用cookie实现这个功能?

              • 知更鸟 Admin

                @左岸读书 本文方法并不适用,我会再写一篇可以保存到cookie中的方法

              • 复利 1

                哈哈。连左岸也来看鸟哥的技术贴了。

                • 执子之手 0

                  不错啊,改天我自己也试试。

                  • 旭阳 0

                    鸟哥,非常感谢你的主题,挺喜欢的。我在我的博客中发表的文章,为什么上下两片文章不链接,比如说上一篇是52,下一篇就是57,为什么文章序号不是连续(如:1,2,3,4)这的呢?

                      • 知更鸟 Admin

                        @旭阳 可以自己网上搜索:Wordpress ID不连续

                      • 哥特复兴 4

                        牛逼了

                        • Prudentwoo 1

                          不能用呀。。。。

                          • 骷髅猫 5

                            这个还真没装过。一般都用默认的了

                            • 小菜鸟 2

                              厉害,厉害

                              • 唐山房产 0

                                很棒,值得学习,以前没用过,看来真的得试试了!

                                • tsolove 3

                                  鸟哥,鸟弟有个问题想请教你,就是文章写完了,如果我再次修改,能不能在文章的最下面显示出我最后修改的时间呢?我在学习中

                                  • tsolove 3

                                    更进一步学些,最后修改的时间能不能加在http://zmingcx.com/wordpress-mobile-theme.html文章的下面那个方框内呢?具体我要怎么修改呢?

                                      • 知更鸟 Admin

                                        @tsolove 最后更新时间函数是

                                        <?php the_modified_date(‘Y年m月d日’); ?>  
                                        加到single模版适合的位置

                                          • tsolove 3

                                            @知更鸟 鸟哥好久没有更新了,现在很忙吗?谢谢!这个我先去折腾下。

                                            • tsolove 3

                                              @知更鸟 对了鸟哥,如果一些文章没有更新过,和开始发文章时间一样,下面不想显示该怎么折腾呢?

                                          • Harries 0

                                            Bucuo不错

                                            • WW 0

                                              不错

                                              • 呱呱漫步 1

                                                哥啊!想死我了!终于盼到你回来了.

                                                • 番茄 1

                                                  这个倒是不错,可以折腾看看。

                                                  • 友力 0

                                                    看了这么多主题,还是鸟哥的主题最强大,教程文章也很到位,谢谢伟大无私的鸟哥分享的主,让我们看到了功能强大无所不能的WP.

                                                    • skychf 0

                                                      这个倒是不错,研究一下看看

                                                      • 小清新 3

                                                        挺好的关注了。

                                                        • Zouming 1

                                                          学习了

                                                          • 北京seo 0

                                                            不错的网站

                                                            • 二手货车 0

                                                              把下面javascript代码:

                                                              • 西贝博客 3

                                                                赞一个赞一个,很棒的设置!

                                                                • 腾蛙网 3

                                                                  这个是干货

                                                                • 来自外部的引用: 8

                                                                  • 页面字体大小切换cookie版 | 大学生工作室
                                                                  • 页面字体大小切换cookie版 | 八字起名_免费起名_宝宝起名_起名网
                                                                  • 页面字体大小切换cookie版 | wordpress主题下载|wordpress教程|wordpress 插件| wordpress主机
                                                                  • WordPress主题添加字体大小切换按钮 | wordpress主题下载|wordpress教程|wordpress 插件| wordpress主机
                                                                  • 页面字体大小切换cookie版- 流氓网页狂
                                                                  • 页面字体大小切换cookie版 | 知己鱼
                                                                  • WordPress页面字体大小切换cookie版 | BLOG|崇尚专注 追求极致
                                                                  • 页面字体大小切换cookie版 | BLOG|崇尚专注 追求极致