给WP文章增加字体大小调整按钮

先放图:

在single或page模板的适当位置加上如下HTML:
[cc lang="html"]

CSS神马的,哥最怕了,不要来找我要,去找万戈或木木吧 :grin: :mrgreen:
然后,确保你的主题已经加载了jQuery的情况下,修改footer.php,在前加上如下代码:
注:配置区其它地方可以不修改,但是选择器那里一定要与你当前所用主题一致

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script type='text/javascript'>
jQuery(function($) {
    $('#fs-change li').click(function() {
        /***START***配置区*****jQuery font change by 荒野无灯******/
        /***********==================================***********/
        //定义选择器,这里要和主题模板相对应
        var selector='.entry,.entry p';
        //定义每次点击后的字体大小增量
        var increment=2;
        //定义默认字体大小
        var fs_n = 14;
        /***********==================================***********/
        /****END***配置区******jQuery font change by 荒野无灯******/
        var fs_cur=$(selector).css('fontSize');
        //获取当前字体
        var fs_cur_num= parseFloat( fs_cur, 10);
        //获取单位(em OR  px ...)
        var stringEnding = fs_cur.slice(-2);       
        var id = $(this).attr('id');
        switch(id)
        {
        case 'fs_dec':
            fs_cur_num -= increment;
            break;
        case 'fs_inc':
            fs_cur_num += increment;
            break;
        case 'fs_n':
        default:
            fs_cur_num=fs_n;
           
        }
        $(selector).css('fontSize', fs_cur_num + stringEnding);
        return false;
        });
    });
</script>

好了,放图看下效果吧:

更多
5 Responses Post a comment
  1. 荒野无灯

    我现在还没在这个主题上加上。去你网站看了,FF下你那个点了根本没反应。这个代码虽比你那个长一点,是可以随意增大和调小字体的。

  2. 倡萌

    没看到啊,难道你的网站没有使用?或说这个代码比我使用的要长不少

Leave a Reply

Note: You may use basic HTML in your comments. Your email address will not be published.

Subscribe to this comment feed via RSS