Moke|墨客

 找回密码
 立即注册
搜索
查看: 6677|回复: 0

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

[复制链接]

3636

主题

0

回帖

3681

积分

超级版主

Rank: 8Rank: 8

积分
3681
发表于 2016-5-12 18:19:30 | 显示全部楼层 |阅读模式






                  经常会看到一些网页在显著位置有一个“大、中、小”的字号选择切换按钮,这是个很人性化的设计,方便不同人群的阅读习惯。下面以默认主题Twenty Eleven为例,把该功能集成到Wordpress主题中。
一、打开Twenty Eleven主题文章页面模板single.php,把下面javascript代码:
<script type=&quot;text/javascript&quot;>       function doZoom(size) {           var zoom = document.all ? document.all['primary'] : document.getElementById('primary');           zoom.style.fontSize = size + 'px';       }   </script>    加到第12行:
<div id=&quot;primary&quot;>    上面。
注:primary为正文内容所在的id选择器标签名称,可根据不同主题进行修改,前提正文内容所在选择器必须是<div id=&quot;primary&quot;>形式,采用<div class=&quot;primary&quot;>控制将失效。
二、把下面代码:
<div class=&quot;font&quot;><a href=&quot;javascript:doZoom(12)&quot;>小</a> <a href=&quot;javascript:doZoom(13)&quot;>中</a> <a href=&quot;javascript:doZoom(18)&quot;>大</a></div>    加到:
<span class=&quot;nav-next&quot;><?php next_post_link( '%link', __( 'Next <span class=&quot;meta-nav&quot;>&rarr;</span>', 'twentyeleven' ) ); ?></span>    下面,视不同主题可以放在自己认为合适的位置。
  其中:数字为不同的字号大小,可自行修改。
三、最后根据不同的主题添加适当的样式控制,这里略过。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

 

 

快速回复 返回顶部 返回列表