给WordPress文章循环加上CSS类方便实现各种页面布局

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类会自动加到文章循环列表上面，让网站布局更加方便。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。