WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › WordPress添加字体切换大小按钮

WordPress添加字体切换大小按钮

PCDotFan10年前

WordPress添加字体切换大小按钮-WP酷

众口难调,网页上正文的字体大小一般在12px~16px之间,然而许多的老年朋友却因为看不到字而苦恼。虽然有网页缩放这一功能,但一是不能用正常的方式阅读网页、二是会让图片因为放大而变得异常模糊。所以最好的方法就是:游客可以直接按下网站上的“放大”“减小”按钮调整网页上的字体大小,现在我们可以将此小功能集成到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:

<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 */
#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;}

 

#调整字体大小
0
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (20)
再想想
  • 洋

    学习了

    10年前
  • 小V

    话说今天下午,把v7v3的导航栏给改成下拉的了~俺自我感觉良好 [招财] 不知道你看着感觉跟以前比咋样 [萌翻]

    10年前
    • WP酷

      @小V 还好的说……如果有点动画效果就更好了~

      10年前
    • 小V

      @WP酷 这个有点难度了。。。需要jquery特效了。。话说我现在的下拉效果完全是css写的,对SEO友好 [哈哈]

      10年前
    • WP酷

      @小V 也对也对,毕竟也没必要为了个特效折腾太多 [嘻嘻]

      10年前
  • 微尘逐风Gavin

    这个真心不错

    10年前
  • 大发

    这个字体还是固定起来吧。。。

    10年前
    • WP酷

      @大发 见到蛮多网站用这个的,只是看起来有点不舒服……

      10年前
  • Mars丶Ge

    lxhzhaocai_org.gif学习了~

    9年前
  • 矛盾体

    在内加入正文调用函数<?php the_content(); ?>后,调整字体对调用函数内的文字无效,怎么解?

    9年前
    • WP酷

      @矛盾体 JS里的entry要按照the_content函数外的div修改

      9年前
    • 矛盾体

      @WP酷 〈div id=”entry“〉测试文字<?php the_content(); ?>〈/div〉

      9年前
    • 矛盾体

      @WP酷 是在外部放的。
      假如我〈div id=”entry“〉测试文字<?php the_content(); ?>〈/div〉,点击调整大小时,“测试文字”会变化大小,但二次嵌套后的<?php the_content(); ?>内部文字就没反应了

      9年前
    • WP酷

      @矛盾体 =-=|||怎么会这样,我觉得应该是里面的p标签没有生效

      9年前
    • 矛盾体

      @WP酷 对,就是,不知道怎么解决。

      9年前
  • 番茄

    折腾看看。

    9年前
  • 学习者

    需要注意的是,上面的entry指的是正文内容的div id,必须根据主题的实际情况进行修改。
    这句话怎么理解?这个id在哪里找?

    9年前
    • wp学习者

      @学习者

      <?php the_content(); ?>

      我的single.php里只有这个,没有你说的div id

      9年前
    • WP酷

      @wp学习者 我说的是在content外层的ID

      9年前
  • 西贝博客

    可不可以默认一种大小,然后逐渐调节大中小呢?

    8年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
添加WordPress登录可见的维护功能
9年前
WordPress无缝集成Google自定义搜索引擎
10年前
36Kr风格简洁多说CSS样式分享
9年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1