欢迎您光临自学哈网,只为分享网络知识教程,供大家学习参考!

「自学哈网」WordPress主题添加字体大小切换按钮

作者 : 自学哈 本文共780个字,预计阅读时间需要2分钟 2022-11-6 共126人阅读
也想出现在这里? 联系我们

WordPress主题添加字体大小切换按钮

经常会看到一些网页在显著位置有一个“大、中、小”的字号选择切换按钮,这是个很人性化的设计,方便不同人群的阅读习惯。下面以默认主题Twenty Eleven为例,把该功能集成到WordPress主题中。

一、打开Twenty Eleven主题文章页面模板single.php,把下面javascript代码:

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

加到第12行:

<div id="primary">  

上面。

注:primary为正文内容所在的id选择器标签名称,可根据不同主题进行修改,前提正文内容所在选择器必须是<divid=”primary”>形式,采用<div class=”primary”>控制将失效。

二、把下面代码:

<div class="font"><a href="javascript:doZoom(12)">小</a> <a href="javascript:doZoom(13)">中</a> <a href="javascript:doZoom(18)">大</a></div>  

加到:

<span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></span>  

下面,视不同主题可以放在自己认为合适的位置。

其中:数字为不同的字号大小,可自行修改。

三、最后根据不同的主题添加适当的样式控制,这里略过。

本站声明:
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!

自学哈网 » 「自学哈网」WordPress主题添加字体大小切换按钮
也想出现在这里? 联系我们
© 2022 Theme by - 自学哈网 & WordPress Theme. All rights reserved 浙ICP备2022016594号