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

WordPress396.8K阅读模式

经常会看到一些网页在显著位置有一个“大、中、小”的字号选择切换按钮,这是个很人性化的设计,方便不同人群的阅读习惯。下面以默认主题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
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  39  访客  28  作者  3
    • 死神面具
      死神面具 2

      沙发。。。

      • 杨玲
        杨玲 4

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

        • Aaron
          Aaron 7

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

          • 左岸读书
            左岸读书 1

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

              • 知更鸟
                知更鸟

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

              • 复利
                复利 1

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

                • 执子之手
                  执子之手 0

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

                  • 旭阳
                    旭阳 0

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

                      • 知更鸟
                        知更鸟

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

                      • 哥特复兴
                        哥特复兴 4

                        牛逼了

                        • Prudentwoo
                          Prudentwoo 1

                          不能用呀。。。。

                          • 骷髅猫
                            骷髅猫 5

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

                            • 小菜鸟
                              小菜鸟 2

                              厉害,厉害

                              • 唐山房产
                                唐山房产 0

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

                                • tsolove
                                  tsolove 3

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

                                  • tsolove
                                    tsolove 3

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

                                      • 知更鸟
                                        知更鸟

                                        @ tsolove 最后更新时间函数是

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

                                          • tsolove
                                            tsolove 3

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

                                            • tsolove
                                              tsolove 3

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

                                          • Harries
                                            Harries 0

                                            Bucuo不错

                                            • WW
                                              WW 0

                                              不错

                                              • 呱呱漫步
                                                呱呱漫步 1

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

                                                • 番茄
                                                  番茄 1

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

                                                  • 友力
                                                    友力 0

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

                                                    • skychf
                                                      skychf 0

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

                                                      • 小清新
                                                        小清新 3

                                                        挺好的关注了。

                                                        • Zouming
                                                          Zouming 1

                                                          学习了

                                                          • 北京seo
                                                            北京seo 0

                                                            不错的网站

                                                            • 二手货车
                                                              二手货车 0

                                                              把下面javascript代码:

                                                              • 西贝博客
                                                                西贝博客 3

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

                                                                • 腾蛙网
                                                                  腾蛙网 4

                                                                  这个是干货

                                                                匿名

                                                                发表评论

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

                                                                拖动滑块以完成验证