WordPress主题添加字体巨细切换按钮

[摘要]常常会看到一些网页在显著位置有一个“大、中、小”的字号选择切换按钮，这是个很人性化的设计，利便差异人群的阅读习惯，本文以默认主题Twenty Eleven为例，把该成果集成到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 简体中文版下载

界面预览

本文转自：

分享到