为了加强用户的阅读体验，我们可以给文章加一个字体大小切换的功能。在做之前先去网上看了下有没有这方面的内容，一看还真不少！基本都是利用Jquery来进行调节的，方法都大同小异，看下面代码。
首先你需要用到的html代码内容(放在single.php文件里面，一般是在标题的下面)：
<span class="changef"> <ul> <li class="fsmall">小</li> <li class="fmid">中</li> <li class="fbig">大</li> </ul> </span>
然后是js 代码(放在header.php文件里面或者也可以放在js文件里面进行引入)：
<script type="text/javascript"> $(document).ready(function(){ $('.changef ul li').click(function() { //使用的是鼠标click点击事件 var class_name = $(this).attr('class'); //得到class的名称，也就是上面的fsmall和fmid以及fbig if (class_name == 'fsmall') //当class里面的名称是fsmall的时候 { fsize = 12; //字体大小根据自己的情况来修改 $(this).addClass("current"); //在fsmall后台再添加一个class的名称 $('.fmid,.fbig').removeClass("current"); //如果fmid和fbig后面有current这个class名称，则去掉 } if (class_name == 'fmid') //当class里面的名称是fmid的时候 { fsize = 14; $(this).addClass("current"); $('.fsmall,.fbig').removeClass("current"); } if(class_name == 'fbig') //当class里面的名称是fbig的时候 { fsize = 15; $(this).addClass("current"); $('.fsmall,.fmid').removeClass("current"); } $('.entry-content p,.entry-content a').css('font-size',fsize+'px'); //找到文章内容所使用的标签的class属性的名称或者id属性的名称。然后添加字体大小的样式 }); }) </script>
接下来还需要在添加一些css样式放到主题style.css文件中。
.entry-utility .changef ul li{ float:left; margin:0 3px 0 3px; border:1px dashed #e0e0e0; border-radius:5px; padding:0px 4px 0px 4px; text-align:center; display:block; font-family:"微软雅黑"; cursor:pointer;} /*将文字左浮动排成一排，然后再添加一些其他样式。*/ .changef ul li.current {font-weight:bold; color:#FE872A;} /*当你点击小,中,大其中任意的名称的时候，字体会变粗，颜色会改变。*/
http://www.favortt.com/