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

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

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

HTML部分

1
2
3
4
5
<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之),代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(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括起来:

1
<?php if( is_single() ): ?><?php endif; ?>

好了,做完这些工作,相信你的网站已经可以实现字体大小的调节了!有问题请留言,能力范围内尽量解答。(我也是个半吊子) :)

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

 
目前有3条回应
Comment
Trackback
Loading ....
  • 本篇文章没有Trackback
你目前是游客,请输入昵称和电邮!