Jquery控制WordPress字体大小进行切换

为了加强用户的阅读体验，我们可以给文章加一个字体大小切换的功能。在做之前先去网上看了下有没有这方面的内容，一看还真不少！基本都是利用Jquery来进行调节的，方法都大同小异，看下面代码。

首先你需要用到的html代码内容(放在single.php文件里面，一般是在标题的下面)：

<span class="changef">
<ul>
<li class="fsmall">小</li>
<li class="fmid">中</li> 
<li class="fbig">大</li> 
</ul>
</span>

然后是js 代码(放在header.php文件里面或者也可以放在js文件里面进行引入)：

<script type="text/javascript">
$(document).ready(function(){
	$('.changef ul li').click(function() {  //使用的是鼠标click点击事件
 
	var class_name = $(this).attr('class'); 
 
        //得到class的名称，也就是上面的fsmall和fmid以及fbig
 
	if (class_name == 'fsmall') //当class里面的名称是fsmall的时候
	{
		fsize = 12; 
 
                //字体大小根据自己的情况来修改
 
		$(this).addClass("current"); 
 
                //在fsmall后台再添加一个class的名称
 
		$('.fmid,.fbig').removeClass("current");
 
                //如果fmid和fbig后面有current这个class名称，则去掉
	}
	if (class_name == 'fmid') //当class里面的名称是fmid的时候
	{
		fsize = 14;
		$(this).addClass("current");
		$('.fsmall,.fbig').removeClass("current");
	}
	if(class_name == 'fbig') //当class里面的名称是fbig的时候
	{
		fsize = 15;
		$(this).addClass("current");
		$('.fsmall,.fmid').removeClass("current");
	}
	$('.entry-content p,.entry-content a').css('font-size',fsize+'px');
 
        //找到文章内容所使用的标签的class属性的名称或者id属性的名称。然后添加字体大小的样式
      });
})
</script>

接下来还需要在添加一些css样式放到主题style.css文件中。

.entry-utility .changef ul li{ float:left; margin:0 3px 0 3px; border:1px dashed #e0e0e0; border-radius:5px; padding:0px 4px 0px 4px; text-align:center; display:block; font-family:"微软雅黑"; cursor:pointer;}
 
/*将文字左浮动排成一排，然后再添加一些其他样式。*/
 
.changef ul li.current {font-weight:bold; color:#FE872A;}
 
/*当你点击小,中,大其中任意的名称的时候，字体会变粗，颜色会改变。*/

您可能感兴趣的文章:

▪ PHP+jQuery+html5实现文章缩略图裁剪

▪ Jquery+Bootstrap实现Collapse菜单源码（手风琴折叠效果）

▪ Html5和Js实现图片上传前即时预览

▪ jQuery全屏滚动插件fullPage.js教程

▪ js+jquery+css3炫酷幻灯片宽屏轮播效果

▪ jQuery hover鼠标经过移开增加删除class

▪ 通过jQuery对 CSS 类进行添加删除切换

▪ Underscore.js去弥补jQuery 没有实现的功能

▪ Html5+Jquery+css3发光动画字体特性（源码）

▪ WordPress引入css/js两种方

Jquery控制WordPress字体大小进行切换

猜你喜欢