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

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

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

在做WordPress主题开发的时候,为了帮助实现布局,我们经常需要给网站存档页的文章循环加上一些CSS类,看一下下面的例子,我们需要实现一个每行4列的图片布局,我们使用左浮动的方式,给每张图片定义一个宽度为23.5%,然后有一个右边距是2%,每一行最后一张没有右边距。这样每一行的宽度就是23.5%x4 + 2%x3,刚好是100%,不多不少。

直接在主题中的文章循环列表上添加CSS类

为了实现这个样式,我们需要给每一行的最后一行图片,也就是第4张、第8张、第12张等等这些顺序能被4整除的图片上加上一个last类。

<?php $i=1; ?>
<?php while ( have_posts() ) : the_post(); ?>
    <li class="<?php echo ($i%4 == 0) ? "last": ""; $i++; ?> ">
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
            <?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>
        </a>
    </li>
<?php endwhile; ?>

然后通过CSS,定义有last类的图片的右边距为0。

.imgs li {
  width: 23.5%;
  margin-right: 2%;
  float: left;
}
.imgs li.last{
  margin-right: 0;
}

上面的实现很直观,如果一个网站结构比较简单,只有一个地方需要实现这样的布局,直接使用上面的方法就好了。可是如果网站有多处需要上面的布局,通过上面的方法实现就需要复制很多代码,同样的功能需要复制很多遍,这不是个好办法,直接违反了DRY原则。其实我们可以通过WordPress的Filter 直接把last类加到每一个文章循环列表上。方法如下。

通过post_class Filter添加CSS类到文章循环列表上

function additional_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' );

实现原理很简单,就是在文章输出之前,判断一下文章的顺序,满足被4整除的条件时,添加last类到文章列表上面。复制到functions.php中,last类会自动加到文章循环列表上面,非常方便。

本站提供 WordPress 主题定制开发服务

本站长期承接 WordPress 主题、插件、基于 WooCommerce 的商店商城开发业务。 我们有 8 年 WordPress 开发经验,如果你想 用 WordPress 开发网站, 请联系 QQ: 470266798,或邮箱: 4626395@gmail.com 咨询。

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

  1. 你好!请教一下,怎么给循环输出的5个li 按照顺序加入指定顺序的class呢? $classname[] ={small, small, large, big, wide} 把这五个class类加入的5个li中!谢谢

    1. 循环中加入计数器i,i初始值值为0,然后echo $classname[$i];$i++;这样,第一个就是$classname[0],第二个就是classname[1],以此类推。

      1. 参考这篇文章:https://www.wpzhiku.com/the-deffrient-of-wp_reset_postdata-and-wp_reset_query/

  2. 谢谢搞定!还有个问题在首页我用下面的代码通过ID获取文章,需要怎么修改才能不影响主循环的文章呢?我调用后多少篇,首页就少多少篇文章…
    $posts = get_posts("numberposts=5&post_type=any&include=14233,14236,1372,1425,1417");
    这代码影响了首页的显示…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*