WordPress添加「列表模式」和「摘要模式」切换

通常WordPress主题首页的文章列表,有两种模式,一般分为显示摘要和图片,另一种就是简单的列表模式,只显示文章和阅读等相关信息,那么能不能让两者自动切换呢?

让首页文章添加列表模式和摘要模式切换

这里我们来给WordPress添加一个功能按钮,使它支持首页文章下的文章模式:列表模式和图文摘要模式相互切换的功能。

效果图如上,这里我们开始代码教程吧。

实现原理

简单的说,这个功能就是通过点击事件来改变CSS,那么一般都是通过JS来实现的。点击一个变换到另外一个,改变CSS,这个就是思路。

js代码

<script>$(document).ready(function(){$("#lb").click(function(){ //定义代码的id,如果这里要修改,下面的调用代码也要对应修改$(".excerpt .focus").addClass("displaynone"); //对应的类名添加额外类,类为.excerpt .focus,添加的CSS类名为displaynone$(".excerpt .note").addClass("displaynone"); //同上$(".ratings").addClass("displaynone"); //同上$(".excerpt").css("padding","10px 10px 10px 25px"); //修改类名为excerpt的padding属性$("#zy").show(); //显示id为zy的标签$("#lb").hide(); //隐藏id为lb的标签});});$(document).ready(function(){$("#zy").click(function(){$(".excerpt .focus").removeClass("displaynone"); //对应的类名添加额外类,类为.excerpt .focus,添加的CSS类名为displaynone$(".excerpt .note").removeClass("displaynone"); //同上$(".ratings").removeClass("displaynone"); //同上$(".excerpt").css("padding","20px 20px 20px 255px"); //修改类名为excerpt的padding属性$("#lb").show(); //显示id为lb的标签$("#zy").hide(); //隐藏id为zy的标签});});</script>

css代码

.displaynone{display:none;}#zy{display:none;}

上面的js和css代码大家加入到全站通用的公共文件就好了,至于dux 的话就直接加入到主题后台的代码栏目里面也行,这里测试的也是dux主题。

调用代码

<span class="list"><span id="lb"><i class="fa fa-list"></i> 列表模式</span><span id="zy"><i class="fa fa-list"></i> 摘要模式</span></span>

将调用代码加到想要添加按钮的地方即可,通常是在index.php文件里面添加。

# 更多WordPress技巧,请关注「WordPress专题