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年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!产品属性可在后台「产品——产品选项——属性」中单独设置(也可在编辑产品时再次添加),有三种类型:文本、颜色和图片,在前台也是以这三种方式来显示。…为了提高网站的访问速度,萨龙网络也将所有的媒体文件放置在二级域名下,WordPress3.5以上的版本,隐藏了后台的媒体(Media)设置页面…网上已经有很多介绍WordPress多语言的插件了,比如Polylang和WPML等强大的多语言插件,但是只是介绍,很快都是能掌握怎…还是在开发导航类主题Slhao的时候遇到的问题,主题使用CodestarFramework专业版选项框架,文章的Metabox选项…WooCommerce后台对管理员的通知『连接您的店铺到WooCommerce.com接受扩展更新和支持』,是3.3.1版本后出来了,新的…描述
WordPress核心执行期间,在特定点执行时或特定事件发生时,Actions是钩子。插件可以指定使用ActionAPI在…描述
您不需要序列化值。如果需要序列化值,则在将其插入数据库之前将其序列化。请记住,资源不能序列化或作为选项添加。
…在WordPress中,我们可以通过向主题中添加CSS文件来为页面和文章添加样式。但是,如果您希望根据文章类型添加自定义样式,该怎么办呢…MNews主题集成了WooCommerce商城插件,有些用户要求增加一个『立即购买』按钮,这篇文章介绍下如何在WooCommerce中添加…一般的Wordpress主题中都有多种自定义文章类型,除了了默认的文章还会有作品、商品等自定义类型的文章,而WordPress默认只能搜索到文章…萨龙网络使用的主题Purity最新版本弃用了Buddypress社区插件,这样注册表单只能使用WooCommerce商城自带的,验证码还是使用S…在开发一些比较独特的主题过程中,需要自定义很多内容,本文是如何为分类添加自定义缩略图。
将如下代码添加到主题functions.php中:…