当前位置:首页精品源码WordPress添加字体切换大小按钮
🎉 恭喜你发现了宝藏!

WordPress添加字体切换大小按钮

WordPress添加字体切换大小按钮

WordPress添加字体切换大小按钮

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

WordPress添加字体切换大小按钮

将此JS代码添加到single.php中:WordPress添加字体切换大小按钮

这里分享一个代码的方法,给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):这里需要注意的就是,上面代码的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代码,加入主题文件中即可:然后是美化的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添加了字体大小的按钮了呢?点击可以随时切换。完成以上操作,马上看看是否已经成功的为自己的WordPress添加了字体大小的按钮了呢?点击可以随时切换。

提示: 本站一律禁止以任何方式发布或转载任何违法的相关信息访客发现请向站长举报,会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。本网站的资源部分来源于网络,如有侵权烦请发送邮件至:522552094@qq.com

给TA打赏
共{{data.count}}人
人已打赏
精品源码网站源码

WordPress用代码实现自动为文章添加标签超链接

2022-2-13 13:36:27

网站源码

WordPress关注公众号可见隐藏内容插件

2022-2-13 17:42:40

!
你也想出现在这里?立即 联系我们吧!
终生年SVIP赞助仅需188
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
  • 5499 用户总数
  • 37052 文章总数
  • 155842615 浏览总数
  • 0 今日发布
  • 2760 稳定运行
立即加入

加入本站VIP,全站资源任意下载!