网站导航免费论文 原创论文 论文搜索 原创论文 网学软件 学术大家 资料中心 会员中心 问题解答 原创论文 大学论文导航 设计下载 最新论文 下载排行 原创论文 论文源代码
返回网学首页
网学联系
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 编程文档 > 网络知识 > 正文

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

来源:http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 14/06/29

以下是网学网为您推荐的网络知识-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选择器标签名称,可根据不同主题进行修改,前提正文内容所在选择器必须是<div id="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">→</span>'', ''twentyeleven'' ) ); ?></span>  

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

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

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

WordPress v3.5.2 简体中文版下载

界面预览

  • 软件大小:6.28MB
  • 软件类别:国外软件 | 博客系统
  • 软件语言:简体中文
  • 运行环境:PHP/Mysql
  • 软件授权:免费版
  • 更新时间:2013-7-24 16:05:30
  • 相关链接:Home Page

本文转自:http://zmingcx.com/wordpress-theme-font-size.html

网学推荐

免费论文

原创论文

设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
版权所有 QQ:3710167 邮箱:3710167@qq.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2015 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号