WordPress循环中判断为每篇文章设计不同的样式
新闻视频类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; ?>
[successbox]然后我们通过CSS来美化文章列表，因为缩略图是不规则，所以布局只好使用position: absolute;来对文章的布局进行定位，同时对移动端进行判断，只输出一种样式的缩略图。[/successbox]本文原创，作者：萨龙龙，其版权均为萨龙网络所有。
如需转载，请注明出处：https://salongweb.com/loop-style.html
一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！WordPress 默认提供了分类目录，文章归档等小工具，在前台开发中，由于分类目录和文章归档显示的文章数量没有添加标签，导致写样式比较麻烦，如…很多网站都会插入优酷或其它网站的在线视频到自己的网站中，默认情况下优酷视频的堆叠顺序并不受CSS样式z-index属性的影响，在视频页面有滚动、…WordPress 4.9.8 版本就发布了古滕堡编辑器，很好用，添加文章也比经典编辑器方便很多。在 5.8 版本后又在小工具中增加了古滕堡编辑…WordPress 获取评论所有主题都是使用wp_list_comments()函数，获取每篇文章的评论是相当的方便实用，唯一的不足是不能通过自…自动获取照片的EXIF信息，很多大型的摄影论坛都有这个功能，对于摄影爱好者来说是一个很实用的功能。萨龙龙开发的Deephoto主题和Neatim…萨龙网络已经开发了很多 WordPress 主题，LensNews 主题要创建的页面较多，所以导致很多用户来咨询如何设置用户中心，在最新上线的 …在 Headless WordPress + Nuxt.js 的架构中，WordPress 作为内容后端通过 REST API 提供数据，Nux…WordPress 默认支持多种图片格式包括 .jpg，.jpeg，.png，和.gif，出于安全考虑不能上传可缩放矢量图形（SVG）。SVG是…龙霄主题内置的原生对象存储功能模块，彻底解决了这一痛点。该模块深度集成了阿里云 OSS、腾讯云 COS、七牛云 Kodo 三大主流云存储服务商，…上一篇文章我们介绍了Isotope，功能强大，效果出众的jQuery插件，但是文章中的代码并不能使用在项目中，所以今天通过Wordpress主题…随着大语言模型（LLM）技术的飞速发展，越来越多的 Web 应用开始集成 AI 能力——从智能客服、内容摘要到自动翻译，AI 正在重塑前端开发的…最近开发了一款多功能的新闻视频类Wordpress主题Yewan，客户的网站用户也比较多，要求设计一个按权限（管理员、编辑、作者、投稿者、订阅者…
