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文件里面添加。


猜你需要