WordPress添加字体切换大小按钮

技巧达人 2022-10-17

1696 38

这里分享一个代码的方法,给WordPress的文章页面添加一个字体控制按钮,这里也附上美化样式,实现方法如下:

WordPress添加字体切换大小按钮

将此JS代码添加到single.php中:

<script type="text/javascript">
function doZoom(size) {
var zoom = document.all ? document.all['entry'] : document.getElementById('entry');
zoom.style.fontSize = size + 'px';
}
</script>

这里需要注意的就是,上面代码的entry指的是正文内容的div id,必须根据主题的实际情况进行修改即可。

前端调用html(在文章适当页面加入即可一般都是single.php):

<div id="fschange">
<span id="font_title">字号:</span>
<span id="fs_dec"><a href="javascript:doZoom(12)" title="缩小">-</a></span>
<span id="fs_n"><a href="javascript:doZoom(14)" title="恢复">o</a></span>
<span id="fs_inc"><a href="javascript:doZoom(16)" title="增大">+</a></span>
</div>

然后是美化的css代码,加入主题文件中即可:

/* 字体大小 */
#fschange {float:right; margin:0; padding:0;}
#fschange #font_title{margin-top:2px;}
#fschange span {display:inline; float:left; margin-left:4px;}
#fschange span a {border-bottom:#c8c8c8 1px solid; text-align:center; border-left:#c8c8c8 1px solid; width:16px; display:block; height:18px; border-top:#c8c8c8 2px solid; border-right:#c8c8c8 1px solid;}
#fschange span a:hover {background:#ebebeb; text-decoration:none;}

完成以上操作,马上看看是否已经成功的为自己的WordPress添加了字体大小的按钮了呢?点击可以随时切换。

签名:这个人很懒,什么也没有留下!
最新回复 (38)
  • 895951235 2022-10-3
    2
    看了楼主的贴,一顿能吃三大碗!
    签名:这个人很懒,什么也没有留下!
  • 3232 2022-10-4
    3
    谢谢大佬
    签名:这个人很懒,什么也没有留下!
  • 历史课代表 2022-10-8
    4
    看了楼主的贴,一顿能吃三大碗!
    签名:这个人很懒,什么也没有留下!
  • 982145285sw 2022-10-9
    5
    签名:这个人很懒,什么也没有留下!
  • 狸猫 2022-10-11
    6
    签名:这个人很懒,什么也没有留下!
  • 公ogo 2022-10-12
    7
    666
    签名:这个人很懒,什么也没有留下!
  • chgy401 2022-10-12
    8
    不错的帖子!
    签名:这个人很懒,什么也没有留下!
  • msb 2022-10-13
    9
    赞!
    签名:这个人很懒,什么也没有留下!
  • 我爱你 2022-10-14
    10
    签名:这个人很懒,什么也没有留下!
  • megumi 2022-10-14
    11
    楼主好人
    签名:这个人很懒,什么也没有留下!
  • 康康 2022-10-14
    12
    不错的帖子!
    签名:这个人很懒,什么也没有留下!
  • huaweiab 2022-10-14
    13
    试试
    签名:这个人很懒,什么也没有留下!
  • 520precure 2022-10-14
    14
    谢谢大佬
    签名:这个人很懒,什么也没有留下!
  • 75703042 2022-10-14
    15
    看了楼主的贴,一顿能吃三大碗!
    签名:这个人很懒,什么也没有留下!
  • 午夜 2022-10-14
    16
    拿走看看
    签名:这个人很懒,什么也没有留下!
  • vimin 2022-10-14
    17
    感谢分享
    签名:这个人很懒,什么也没有留下!
  • loken 2022-10-15
    18
    哈哈,不错哦
    签名:这个人很懒,什么也没有留下!
  • 凨の甴 2022-10-19
    19
    看了楼主的贴,一顿能吃三大碗!
    签名:这个人很懒,什么也没有留下!
  • 柒玖 2022-10-19
    20
    666,牛
    签名:这个人很懒,什么也没有留下!
返回