实现wordpress文章字体大小切换调节


这两天折腾的换上了新的主题,也修改了不少东西,发现我现在的口味真是越来越清淡了,网站的配色也都基本是淡色系了,而且风格也越来越简化。我终于发现了我的需求:简单明快的风格,大大的文章宽度,和一套可以分享图片,视频和代码的插件。是的,这样足矣!

这篇日志主要是想讲讲我是如何实现文章的字体大小切换调节的,其实这也算是我的宿愿了,一直希望wordpress可以像之前用过的pjblog一样可以允许读者自己调节文章字体的大小。这两天在网上找找,折腾了一下还真实现了这个功能!

其实大家不喜欢看废话,咱们就直接药到病除吧! :mrgreen:

HTML部分
[cc lang="html"]

[/cc]
以上的html代码是用来贴到你需要实现该功能的地方的,大家懂的,比如我就放在了文章信息栏(见文章右上角)

这个功能是通过jQurey实现的,所以需要引入jQurey代码(引入方式如不清楚请google之),代码如下:
[cc lang="javascript"]$(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')
});
});[/cc]
以上JS代码可以直接写在 footer.php里,但是为了减少非单文章页面不必要的加载多余的代码,可以用以下代码把这段JS括起来:
[cc lang="php"][/cc]
好了,做完这些工作,相信你的网站已经可以实现字体大小的调节了!有问题请留言,能力范围内尽量解答。(我也是个半吊子) :)

注:以上信息部分来自网络。

声明:雅布叔叔的糖果屋|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 实现wordpress文章字体大小切换调节


雅布叔叔的四季糖果屋,那个洋溢着阳光味道和快乐音符的时光铺子啊,珍藏着最美的童话~~