首页 » 建站技术 » WordPress » 浏览内容

增加WordPress文章字体大小及背景色的选择按钮


2011-01-12 13:39:38 7,588 1 发表评论 字体: 作者:C.K.
标签: WordPress备忘

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

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

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

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

    id="zoom"

    上面。

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

    二、把下面代码:

    <span>字体:<a href="javascript:doZoom(18)"></a> <a href="javascript:doZoom(14)"></a> <a href="javascript:doZoom(12)"></a></span>

    加到:

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

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

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

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

    1 2

      网站统计 Statistics

      • 创建时间: 2005年1月3日 距今4947 天
      • 日志总数: 2461
      • 评论总数: 630
      • 标签总数: 654
      • 链接总数: 273
      • 最后更新: 2017-7-1 18:16:33
      • 您是本站第 13720991 位访客

      广告区 Guǎng Gào