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

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

萨龙龙萨龙龙
WordPress
9年前
0
0
1.21W
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.23M456.67W3.85W
分享:
WordPress获取多个角色的用户列表并分页
WordPress获取多个角色的用户列表并分页上一篇
AMH面板安装配置redis加速WordPress站点下一篇
AMH面板安装配置redis加速WordPress站点
相关文章
总数:107

让SI CAPTCHA Anti-Spam插件支持WooCommerce注册表单验证码

萨龙网络使用的主题Purity最新版本弃用了Buddypress社区插件,这样注册表单只能使用WooCommerce商城自带的,验证码还是使用S…
萨龙龙萨龙龙
WooCommerce, WordPress
9年前
0
0
1.61W
0

WordPress 重置缩略图插件 Regenerate Thumbnails 获取媒体数量时错误的解决方法

WordPress一键重置缩略图使用相当简单方便,设置了媒体中要裁剪的缩略图参数(使用了WooCommerce商城插件,需要在外观——自定…
萨龙龙萨龙龙
WordPress
7年前
0
0
1.04W
0

WordPress 最简便的边栏调用方法与提示

WordPress主题文章类型较多,想实现不同的文章类型页面调用不同的边栏,一般的方法是将代码写在主题根目录下的sidebar.php文件…
萨龙龙萨龙龙
WordPress
8年前
0
0
1.15W
0

移除 WooCommerce 商城插件中我的帐户相关页面

WooCommerce插件默认为我的帐户页面提供了:仪表盘、订单、下载、地址、帐户详情几个页面,以及一个退出登录的按钮,如果出售的是实物或者没…
萨龙龙萨龙龙
WooCommerce
8年前
0
0
1.44W
0

WordPress MU多站点解决Timthumb.php不显示缩略图

最近在开发Perimg图片主题,用户想要用Timthumb.php插件来实现缩略图,缩略图的顺序是自定义域、文章第一张图片与默认缩略图,而萨龙龙…
萨龙龙萨龙龙
WordPress
10年前
0
0
1.16W
0

WordPress添加 span 标签到分类目录和文章归档文章数量上

WordPress默认提供了分类目录,文章归档等小工具,在前台开发中,由于分类目录和文章归档显示的文章数量没有添加标签,导致写样式比较麻烦,如…
萨龙龙萨龙龙
WordPress
5年前
0
0
1.40W
0

WordPress 功能函数—— addslashes_gpc(添加斜杠以转义字符串)

描述 添加斜杠以转义字符串。 如果设置了magic_quotes_gpc,将首先删除斜杠。 用法 …
萨龙龙萨龙龙
WordPress Functions
6年前
0
0
8.33K
0

WordPress函数wp_nav_menu_items向菜单列表中添加搜索内容

Wordpress的菜单都是通过后台菜单来添加设置,很多时候需要添加一些功能到菜单,比如搜索,或者购物车,这时我们就可以使用wp_nav_men…
萨龙龙萨龙龙
WordPress
10年前
0
0
10K
0

WordPress强大好用的分页插件WP-PageNavi使用

相信使用Wordpress的朋友都对WP-PageNavi分页插件不陌生,很多博客对它也有很多介绍,之前也使用过代码来实现分页,但不够人性化,使…
萨龙龙萨龙龙
WordPress
9年前
0
0
2.45W
0

WordPress前台登录函数wp_login_form的用法

网站开放注册的站点都会添加一个前台登录与注册的表单或页面,这样方便用户登录站点,同时也保证网站后台的安全性。今天我们来介绍前台登录函数wp_lo…
萨龙龙萨龙龙
WordPress
9年前
0
0
1.91W
0

修改Woocommerce商品固定链接其它自定义文章类型适用

在更新Concise主题时集成了前端用户中心和商城插件,发现插件中为商城产品文章设置好了固定链接,所以把萨龙网络的作品集与商城的两种自定义类型的…
萨龙龙萨龙龙
WooCommerce
10年前
0
0
1.37W
0

自定义WooCommerce产品文章hook顺序

最近在做一款企业产品展示的商城网站,设计WooCommerce产品文章的布局与默认的布局有很大的不同,所以其中的一些模块都需要重新调整。WooC…
萨龙龙萨龙龙
WooCommerce
9年前
0
0
1.43W
0
评论表单游客 您好,欢迎参与讨论。
请输入昵称
请输入邮箱
请输入网址
0 / 0
评论列表
总数:0
萨龙网络
没有相关内容