新闻视频类Yewan主题的首页文章布局是不规则,文章的布局多样化,这是如何实现的?其实是很简单的,我们在循环中进行判断,每一篇文章都可以输出不同的样式。有些CMS主题分类文章第一篇是有缩略图和摘要,其它文章只有标题,实现的方式是先获取第一篇文章,然后再获取其它文章列表同时排除第一篇文章,这样增加了PHP代码的量,通过判断就很方便实用。
默认的代码
在循环中判断文章是第N篇就需在循环中添加“$count = 1;
”变量,在循环主体中判断第N篇就可以这样写:
- <?php if ($count == n) :{ ?>
- <?php } $count++; ?>
案例代码
Yewan主题首页的判断只是对缩略图进行了不同的输出,我们要添加三个不同的缩略图函数,你也可以添加其它不同的内容,最后的代码如下:
- <?php
- $args=array(
- 'post_type'=> 'post',
- 'posts_per_page' => 4,
- 'ignore_sticky_posts' => 1
- );
- $temp_wp_query = $wp_query;
- $wp_query = null;
- $wp_query = new WP_Query( $args );
- if ( $wp_query->have_posts() ) : $count = 1;
- while ( $wp_query->have_posts() ) : $wp_query->the_post();?>
- <!-- 缩略图 -->
- <?php if($count==1 ) { ?>
- <?php post_thumbnail_width(); ?><!--横排缩略图-->
- <?php }else if($count==2 ) { ?>
- <?php post_thumbnail_height(); ?><!--竖排缩略图-->
- <?php }else { ?>
- <?php post_thumbnail(); ?><!--普通缩略图-->
- <?php } $count++; ?>
- <!-- 缩略图end -->
- <?php endwhile; endif; ?>
然后我们通过CSS来美化文章列表,因为缩略图是不规则,所以布局只好使用position: absolute;
来对文章的布局进行定位,同时对移动端进行判断,只输出一种样式的缩略图。
原文地址
本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!