这两天折腾的换上了新的主题，也修改了不少东西，发现我现在的口味真是越来越清淡了，网站的配色也都基本是淡色系了，而且风格也越来越简化。我终于发现了我的需求：简单明快的风格，大大的文章宽度，和一套可以分享图片，视频和代码的插件。是的，这样足矣！
这篇日志主要是想讲讲我是如何实现文章的字体大小切换调节的，其实这也算是我的宿愿了，一直希望wordpress可以像之前用过的pjblog一样可以允许读者自己调节文章字体的大小。这两天在网上找找，折腾了一下还真实现了这个功能！
其实大家不喜欢看废话，咱们就直接药到病除吧！
HTML部分
<ul id="resizer">
<li id="f_s"><a href="javascript:void(0)">小</a></li>
<li id="f_m"><a href="javascript:void(0)">中</a></li>
<li id="f_l"><a href="javascript:void(0)">大</a></li>
</ul>以上的html代码是用来贴到你需要实现该功能的地方的，大家懂的，比如我就放在了文章信息栏（见文章右上角）
这个功能是通过jQurey实现的，所以需要引入jQurey代码（引入方式如不清楚请google之），代码如下：
$(document).ready(function() {
$('#resizer li').click(function() {
var fontSize = 14;
var name = $(this).attr('id');
if (name == 'f_s') {
fontSize -= 2
} else if (name == 'f_l') {
fontSize += 2
} else if (name == 'f_m') {
fontSize == 14
}
$('.post_content p').css('font-size', fontSize + 'px')
});
});以上JS代码可以直接写在 footer.php里，但是为了减少非单文章页面不必要的加载多余的代码，可以用以下代码把这段JS括起来：
<?php if( is_single() ): ?><?php endif; ?>好了，做完这些工作，相信你的网站已经可以实现字体大小的调节了！有问题请留言，能力范围内尽量解答。（我也是个半吊子） :)
注：以上信息部分来自网络。
3 comments
很实用，可以随意切换字体大小。
学习一下！
@于泽鹏欢迎光临！