您的浏览器需要启用 JavaScript 才能正常访问此网站。
萨龙网络
登录
首页-WordPress文章-WordPress-正文

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

萨龙龙萨龙龙WordPress10年前001.32W
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年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1422.43M457.21W4.42W
加载中…
分享:
Wordpress获取多个角色的用户列表并分页
Wordpress获取多个角色的用户列表并分页上一篇
AMH面板安装配置redis加速WordPress站点下一篇
AMH面板安装配置redis加速WordPress站点
相关文章
总数:115

在WooCommerce中添加“立即购买”按钮直接跳转到结算页面

MNews 主题集成了 WooCommerce 商城插件,有些用户要求增加一个『立即购买』按钮,这篇文章介绍下如何在WooCommerce中添加…
萨龙龙萨龙龙WooCommerce8年前003.26W0

Woocommerce一个很漂亮的购物系统

Woocommerce,一个wordpress的电子商务扩展插件,一个很漂亮的可以帮你卖任何东西的工具,这是插件在wordpress后台插件中的…
萨龙龙萨龙龙WooCommerce12年前001.64W0

WordPress 判断是否在循环中的函数 in_the_loop

WordPress 主题开发中,很多时间需要在文章与列表中进行判断从而输出不同的内容,比如文章分类,只想在列表中显示,文章中不显示。列表页面可直…
萨龙龙萨龙龙WordPress7年前001.15W0

WordPress通过分类ID获取分类名称与链接

在Wordpress主题开发的过程中,尤其是CMS主题分类的布局,通过后台选项(萨龙龙使用的都是Redux开源框架)选择分类,前台通过调用分类的…
萨龙龙萨龙龙WordPress10年前001.96W0

WordPress 使用 wp_set_password 重置用户密码

当 WordPress 管理员忘记密码或需要重置用户密码时,可以使用 wp_set_password 函数来实现。该函数将为指定用户设置新密码,…
萨龙龙萨龙龙WordPress3年前112.80W0

使用 wp_add_inline_script 函数向 WordPress 站点输出脚本

前面我们介绍了wpadd_inline_style函数的使用,并为主题添加自定义样式切换功能,既然有函数可以向站点输出 css 样式,同时也可以…
萨龙龙萨龙龙WordPress7年前001.64W0

WordPress 从不需要的页面禁用 WooCommerce 样式和脚本

WooCommerce 在每个页面上加载三个核心CSS样式表,并在WordPress站点上安装时发布。可以通过从不需要它的页面和内容中删除样式和…
萨龙龙萨龙龙WooCommerce7年前001.89W0

WordPress 文章查询类 WP_Query 如何获取序列化数组中的文章

还是在开发导航类主题 Slhao 的时候遇到的问题,主题使用 Codestar Framework 专业版选项框架,文章的 Metabox 选项…
萨龙龙萨龙龙WordPress7年前001.31W0

WordPress 功能函数——absint(将值转换为非负整数)

用法 absint( mixed $maybeint ) 将值转换为非负整数。 参数 $maybeint (mixed)(必需)您希望…
萨龙龙萨龙龙WordPress Functions7年前001.20W0

更新至 WordPress5.0版本后古腾堡(Gutenberg)编辑器发布与更新失败的解决方法(只对萨龙网络主题测试)

萨龙网络所有主题都集成了很多优化功能,在 WordPress 更新至5.0版本后,古腾堡(Gutenberg)编辑器发布与更新文章/页面就出现错…
萨龙龙萨龙龙WordPress7年前009.47K0

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

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

WordPress 功能函数—— add_comments_page(将子菜单页添加到评论主菜单上)

描述 此函数具有一个功能,该功能将用于确定菜单中是否包含页面。 连接到处理页面输出的函数也必须检查用户是否具有所需的…
萨龙龙萨龙龙WordPress Functions7年前002.17W0
评论表单游客 您好,欢迎参与讨论。
加载中…
评论列表
总数:0
萨龙网络
没有相关内容