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

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

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

1. <script type="text/javascript">
2. function doZoom(size) {
3. var zoom = document.all ? document.all['primary'] : document.getElementById('primary');
4. zoom.style.fontSize = size + 'px';
5. }
6. </script>

加到第12行：

1. <div id="primary">

上面。

注：primary为正文内容所在的id选择器标签名称，可根据不同主题进行修改，前提正文内容所在选择器必须是

1. <div id="primary">

形式，采用

1. <div class="primary">

控制将失效。

二、把下面代码：

1. <div class="font">
2. <a href="javascript:doZoom(12)">小</a>
3. <a href="javascript:doZoom(13)">中</a>
4. <a href="javascript:doZoom(18)">大</a>
5. </div>

加到：

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

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

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

Tags：WordPress   主题   添加   字体   大小

转载：感谢您对Jerbo个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源Jerbo个人博客”。/web/wordpress/227.html

很赞哦！ ()