当前位置:「千越SEO」 / 网站维护 / WordPress前三篇文章与其余文章列表显示不同样式

WordPress前三篇文章与其余文章列表显示不同样式

来源:千越SEO
浏览:21

网站建设过程中需要用到前三篇文章与其余文章显示不同的样式(如下图),实现方法如下:

WordPress前三篇文章与其余文章列表显示不同样式

<div>
<ul>
<?php query_posts( array(
'showposts' => 3,
));
if(have_posts()) : while (have_posts()) : the_post();
?>
<li><a href="<?php the_permalink();?>" target="_blank">
<?php the_title();?>
<img src="<?php echo post_thumbnail_src(); ?>" alt="<?php the_title(); ?>">
<p><?php echo mb_strimwidth(strip_tags(apply_filters('content', $post->post_content)), 0, 70,"..."); ?></p>
</a></li>
<?php endwhile; endif; wp_reset_query(); ?>
</ul>
</div>
<div>
<ul>
<?php
$args_post = array(
'posts_per_page' => 10,
'ignore_sticky_posts' => 1,
);
$latest_post_query = new WP_Query($args_post);
if($latest_post_query->have_posts()) : $i=0; while ($latest_post_query->have_posts()) : $i++; $latest_post_query->the_post();
?>
<?php if($i>3&&$i<18){ ?>
<li><a href="<?php the_permalink(); ?>" target="_blank"><?php the_title(); ?></a></li>
<?php } ?>
<?php endwhile; endif; wp_reset_query();?>
</ul>
</di>

以上代码分为两个部分,一部分是调用最新发布的3篇文章,可以单独设置样式。后一部分,是从第4篇最新发布文章开始调用,如此一来就可以实现前3篇文章与后面的文章列表显示不同样式。

本文地址:https://www.seoo.net/maint/1326.html
  • qq
  • 发稿微信咨询
  • 扫一扫,微信咨询