在很多dedecms老版本的模板中存在一个文章字体大小调节的功能,点击大中小文章字号即可以对应比例的调整。这个应用在早期的pc浏览器体验很好,但是相对于现在浏览器功能自己完备的今天,浏览器已经有了可以成比例放大的功能,甚至已经衍生出强制设置所有文章字号大小的功能。那对于用户体验来说,这个功能是很有必要性的,无论它的浏览平台多么完善这都是一个不可获取的功能。下面大挖分享给大家一下怎么把这个可能移植给wordpress主题,其实很简单,我们在免插件的情况下,调整两段代码就可以轻易的实现文章字体大小调节功能
打开我们的主题文章内容页面,通常是single.php(具体根据您的主题文件结构查找)找到
1 |
<?php get_header(); ?> |
(即头部调用函数)在下面添加这段代码
1 2 3 4 5 |
<script type="text/javascript"> function SetFont(size){ document.getElementById("logPanel").style.fontSize=size } </script> |
同时在您想要添加调节字体大小功能按钮的位置以下代码:
1 |
字体大小: <a href="javascript:SetFont('12px')" accesskey="1">小</a> <a href="javascript:SetFont('14px')" accesskey="2">中</a> <a href="javascript:SetFont('16px')" accesskey="3">大</a> |
最后在您的wordpress主题文章主内容的div里面添加一个id属性id=”logPanel”,这样来写
1 |
<div id="logPanel" class="content"> 显示文章内容代码</div> |
这样整体就实现了文章字体大小调节的功能。