萨龙网络
登录
首页-WordPress文章-WordPress-正文

WordPress循环中判断为每篇文章设计不同的样式

萨龙龙萨龙龙
WordPress
9年前
0
0
1.19W
Wordpress循环中判断为每篇文章设计不同的样式新闻视频类Yewan主题的首页文章布局是不规则,文章的布局多样化,这是如何实现的?其实是很简单的,我们在循环中进行判断,每一篇文章都可以输出不同的样式。有些CMS主题分类文章第一篇是有缩略图和摘要,其它文章只有标题,实现的方式是先获取第一篇文章,然后再获取其它文章列表同时排除第一篇文章,这样增加了PHP代码的量,通过判断就很方便实用。

默认的代码

在循环中判断文章是第N篇就需在循环中添加“$count = 1;”变量,在循环主体中判断第N篇就可以这样写:
  1. <?php if ($count == n) :{ ?>
  2. //输出不同的代码
  3. <?php } $count++; ?>

案例代码

Yewan主题首页的判断只是对缩略图进行了不同的输出,我们要添加三个不同的缩略图函数,你也可以添加其它不同的内容,最后的代码如下:
  1. <?php
  2. $args=array(
  3.     'post_type'=> 'post',
  4.     'posts_per_page' => 4,
  5.     'ignore_sticky_posts' => 1
  6. );
  7. $temp_wp_query = $wp_query;
  8. $wp_query = null;
  9. $wp_query = new WP_Query( $args );
  10. if ( $wp_query->have_posts() ) : $count = 1;
  11. while ( $wp_query->have_posts() ) : $wp_query->the_post();?>
  12. <!-- 缩略图 -->
  13. <?php if($count==1 ) { ?>
  14. <?php post_thumbnail_width(); ?><!--横排缩略图-->
  15. <?php }else if($count==2 ) { ?>
  16. <?php post_thumbnail_height(); ?><!--竖排缩略图-->
  17. <?php }else { ?>
  18. <?php post_thumbnail(); ?><!--普通缩略图-->
  19. <?php } $count++; ?>
  20. <!-- 缩略图end -->
  21. <?php endwhileendif; ?>
[successbox]然后我们通过CSS来美化文章列表,因为缩略图是不规则,所以布局只好使用position: absolute;来对文章的布局进行定位,同时对移动端进行判断,只输出一种样式的缩略图。[/successbox]
标签:
本文原创,作者:萨龙龙,其版权均为萨龙网络所有。
如需转载,请注明出处:https://salongweb.com/loop-style.html
萨龙龙

萨龙龙

侠客
一个平平常常的人,热爱生活、旅行和摄影,骑行去过西藏,一直计划再去。14年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1342.19M456.64W3.85W
分享:
WordPress获取多个角色的用户列表并分页
WordPress获取多个角色的用户列表并分页上一篇
AMH面板安装配置redis加速WordPress站点下一篇
AMH面板安装配置redis加速WordPress站点
相关文章
总数:107

Woocommerce+Buddypress+Bbpress商城社区论坛头像本地化

萨龙网络Purity主题是集成了Woocommerce+Buddypress+Bbpress商城社区论坛,因为www.gravatar.com头…
萨龙龙萨龙龙
Bbpress, Buddypress, WooCommerce, WordPress
10年前
0
0
1.76W
0

WordPress多站点社区动态中获取自定义文章类型更新

萨龙网络使用Buddypress社区已经很长一段时间,在社区首页动态中可能获取整个网站的最新文章、用户注册,用户动态内容,而自定义文章类型的发布…
萨龙龙萨龙龙
Buddypress, WordPress
9年前
0
0
1.15W
0

WordPress批量替换自定义域名称

WordPress自定义的强大不言而喻,很多主题都在使用,也为其创建了可视化的选项面板,用户使用都相当的直观、方便。萨龙网络新开发的LensNe…
萨龙龙萨龙龙
WordPress
9年前
0
0
9.07K
0

CSS3 background-attachment:fixed实现滚动视差效果

一直都想设计一个有滚动视差效果的主题,而网上所有的介绍和有视差效果的主题都是使用jQuery来实现,而且由于视差背景图是一张满屏的大小,所以一直…
萨龙龙萨龙龙
WordPress
10年前
0
0
1.49W
0

翻译WordPress强大实用的Redux框架选项

强大、实用的Redux框架我们已经在WordPress强大的开源后台框架ReduxFramework介绍与使用一文中介绍了,今天我们介绍下如何…
萨龙龙萨龙龙
WordPress, 软件系统
9年前
0
0
1.34W
0

为woocommerce商城添加图片延迟(lazyload)加载功能

wordpress图片延迟加载已经不是稀奇的功能,网上有很多类似的文章,添加相当简单方便,woocommerce缩略图图片延迟加载也很方便的可以…
萨龙龙萨龙龙
WooCommerce
10年前
0
0
1.30W
0

WordPress Mega超级大菜单插件Ubermenu

Ubermenu是一个用户友好的、可高度定制响应式的Wordpress超级大菜单插件,工作原理与Wordpress3菜单系统类似,强大到可创建…
萨龙龙萨龙龙
WordPress
10年前
0
0
1.66W
0

WordPress 自定义的评论查询类 WP_Comment_Query 参考文档和使用实例

WordPress获取评论所有主题都是使用wp_list_comments()函数,获取每篇文章的评论是相当的方便实用,唯一的不足是不能通过自…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.63W
0

修改Buddypress中管理员的显示名与用户名区别开提高账户安全

Buddypress社区中有很多地方会直接显示用户登录名,比如用户个人主题中的名称和链接中,所有来访的用户都知道了管理员的用户名,对于小人知道了…
萨龙龙萨龙龙
Buddypress, WordPress
10年前
0
0
1.62W
0

WordPress 主题 MNews Pro 5.2 投稿新增可插入音视频功能

MNewsPro主题已经更新到5.2版本,功能已经很完善,且实用,在文章投稿编辑器有用户提出不能上传视频或者插入视频简码不方便的问题。 …
萨龙龙萨龙龙
WordPress
3年前
0
0
2.48W
0

WordPress 功能函数—— add_blog_option(为指定的博客ID添加新选项)

描述 您不需要序列化值。如果需要序列化值,则在将其插入数据库之前将其序列化。请记住,资源不能序列化或作为选项添加。 …
萨龙龙萨龙龙
WordPress Functions
6年前
0
0
9.44K
0

WordPress 功能函数—— activate_plugins(激活多个插件)

描述 激活多个插件。 当WP_Error返回,但这并不意味着该插件的一个有错误。这意味着一个或多个插件文件路径无效。…
萨龙龙萨龙龙
WordPress Functions
6年前
0
0
8.32K
0
评论表单游客 您好,欢迎参与讨论。
请输入昵称
请输入邮箱
请输入网址
0 / 0
评论列表
总数:0
萨龙网络
没有相关内容