您的位置:小众博客 > Wordpress > 正文

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

2015年12月29日 / Wordpress / 2296人阅读(点这评论)

在做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类会自动加到文章循环列表上面,非常方便。

资料来源:http://www.wpzhiku.com/add-css-class-to-wordpress-posts-loop/


标签:wordpress教程 

ABOUT
七牛云存储 衡天主机
一灯学堂,专注互联网前端培训 特卖
最新文章
月度热门
  • 李彦宏老婆马东敏重返百度:让百度走向伟大
  • 年轻人:或死于创业 或死于创业公司
  • 百度回应李彦宏被“限制出境”
  • 热门话题