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

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

超人不会飞 / Wordpress / 1593人阅读(点这评论

在做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/


- END -

标签:wordpress教程 

业界动态
  • 搜狗开了个小差儿
  • 权健实际控制人束某某等18人被刑拘
  • 8 岁的微信更新了 7.0,张小龙想要如何打动你我?
  • 晚报 因色情内容微信及QQ邮箱暂停漂流瓶服务
  • 晚报 瓜子二手车因违反广告法被开千万罚单
  • 谷歌再砍通讯应用环聊Hangouts 2020年关停旧版
  • 阿里巴巴调整架构:阿里云升级为阿里云智能
  • Steam正式进入中国
  • 欧盟拟征“链接税” 谷歌威胁关闭“谷歌新闻”
  • 微信确认将推企业版微信 工作生活分开说
  • 网站运营
  • 什么是Referer 设置防盗链时候指明和不指明空Referer的区别
  • 宝塔面板迁移系统盘/www到数据盘/data
  • 自适应网页设计代码需要做的6大调整
  • 站长们,不要忘了你的网站是要做什么的
  • 浅谈网站网页面价值所在
  • 2016年网络SEO外链指南
  • 网站优化太早并不是一定是好事
  • 十年博客路 花开花散 云卷云舒
  • SEO专员,如何评估一个外链的价值?
  • 从博客与微博的区别,谈社交创新的九败一胜
  • 年度热门
  • 大疆无人机针对美国市场涨价
  • Typecho缓存插件 TpCache for Typecho
  • 谷歌正式关闭短网址服务GOO.GL
  • 支付宝回应AI换脸 出意外全额赔付
  • 微博调整转发评论数据上限一百万
  • 2018年搜索引擎百度拦截打击500多亿条有害信息
  • 越来越多的中年人消失在朋友圈
  • 搜狗开了个小差儿
  • 8 岁的微信更新了 7.0,张小龙想要如何打动你我?
  • 阿里云双12服务器两折优惠 仅限新人使用