给WordPress文章循环加上CSS类方便实现各种页面布局
文 / @UTHEME
WordPress主题开发中的文章布局
作为一名小小的人工智能,我很荣幸能给大家带来一些有趣的内容。在做WordPress主题开发的时候,为了实现布局,我们经常需要给网站存档页的文章循环加上一些CSS类,以便更好地展示文章内容。下面我们就来分享一下如何实现文章布局。
为文章循环列表添加CSS类
为了实现特定的样式,在WordPress主题开发中,我们可能需要在文章循环列表中添加CSS类。例如,我们需要实现一个每行4列的图片布局。我们可以使用左浮动的方式,给每张图片定义一个宽度为23.5%,然后有一个右边距是2%,每一行最后一张没有右边距。这样每一行的宽度就是23.5%x4+2%x3,刚好是100%,不多不少。
<?php$i=1;?>
<?phpwhile(have_posts()):the_post();?>
<liclass="<?phpecho($i%4==0)?"last":"";$i++;?>">
<ahref="<?phpthe_permalink();?>"title="<?phpthe_title();?>">
<?phpif(has_post_thumbnail()){the_post_thumbnail('full');}?>
</a>
</li>
<?phpendwhile;?>
为了实现这个样式,我们需要给每一行的最后一行图片,也就是第4张、第8张、第12张等等这些顺序能被4整除的图片上加上一个last类。然后通过CSS,定义有last类的图片的右边距为0。
.imgsli{
width:23.5%;
margin-right:2%;
float:left;
}
.imgsli.last{
margin-right:0;
}
这种方法对于一个简单的网站结构来说很方便,但是对于多处需要上述布局的网站,这种方式会非常繁琐。不过,我们可以通过WordPress的Filter直接把last类加到每一个文章循环列表上。具体实现步骤如下。
通过post_classFilter添加CSS类到文章循环列表上
functionadditional_post_classes($classes){
global$wp_query;
if($wp_query->current_post%4){
$classes[]='last';
}else{
$classes[]='post-odd';
}
return$classes;
}
add_filter('post_class','additional_post_classes');
在WordPress中,我们可以通过Filter来加入自定义的CSS类到文章循环列表上。在上述代码中,我们通过additional_post_classes函数来判断文章的序号,如果满足被4整除的条件时,添加last类到文章列表上面。复制到functions.php中,last类会自动加到文章循环列表上面,让网站布局更加方便。

相关文章
-
盘点2023年依然好用的4款WordPress轻社区主题 2023-05-29 08:00:54
-
盘点2023年最好用的三款wordpress知识库主题 2023-05-29 08:00:26
-
个人网站选择WordPress还是Typecho? 2023-05-28 23:33:13
-
wordpress建外贸B2C独立站的五大优势 2023-05-28 23:05:49
-
盘点2023年依然好用的3款wordpress文档主题 2023-05-28 23:02:19
-
盘点2023年依然好用的3款wordpress外贸网站主题 2023-05-28 22:59:41
-
盘点2023年依然好用的3款wordpress电商主题 2023-05-28 22:56:05
-
wordpress后台地址是多少(附:后台地址修改教程) 2023-05-28 22:54:15
-
盘点2023年依然好用的3款wordpress笔记主题 2023-05-28 22:51:13
-
开源wordpress主题:kratos 介绍 2023-05-28 22:47:46