最近打算做一个类似微信内容的主题,微信在发送多图文的时候第一篇为大缩略图,列表为小缩略图,本文将介绍如何输出文章列表样式,使第一篇文章演示与其他的不同。

在首页模板index.php中添加循环内容,查询最新的文章

<?php
$args = array('posts_per_page' => '1',);//定义查询内容
$query = new WP_query ( $args );//开始查询
if ( $query->have_posts() ) { 
while ( $query->have_posts() ) : $query->the_post(); //开始循环
 ?>
 
<article id="post-<?php the_ID(); ?>" <?php post_class( 'first-post' ); ?>><!--为第一条添加一个first-post样式 -->
    <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
 
    <?php if ( has_post_thumbnail() ) { ?>
        <a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail( 'medium', array(
                'class' => 'left',
                'alt'   => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
            ) ); ?>
        </a>
    <?php } ?>
     
    <section class="entry-content">
        <?php the_content(); //输出的是文章的内容?>
    </section>  
                 
    <footer class="entry-footer">
        <?php twentyfifteen_entry_meta(); ?>
        <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
    </footer>
     
</article>
<!-- #post-## --> 
<?php
endwhile;
 //结束循环. 
rewind_posts();
} ?>

循环结束后的rewind_posts()非常重要,如果不添加,那么后面的循环将无法进行。

与第一个循环非常相似,但不是使用WP_Query,它只是访问主查询。在第一个查询下添加第二个循环

<?php while ( have_posts() ) : the_post(); ?>
 
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
 
    <?php if ( has_post_thumbnail() ) { ?>
        <a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail( 'medium', array(
                'class' => 'left',
                'alt'   => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt ))
            ) ); ?>
        </a>
    <?php } ?>
     
    <section class="entry-summary">
        <?php the_excerpt(); //输出的是文章的摘要?><a href="<?php the_permalink(); ?>">Further information</a>.
    </section><!-- .entry-summary -->
                 
    <footer class="entry-footer">
        <?php twentyfifteen_entry_meta(); ?>
        <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>
    </footer><!-- .entry-footer -->
     
</article><!-- #post-## -->
 
<?php //结束循环
endwhile; ?>

两个循环有两处不同,

1.分别输出了的为文章内容和文章摘要;

2.第一个循环添加了一个样式,第二个没有。

当然这只是演示中的,实际应用中可以根据自己的需要修改。

删除重复出现的文章

此刻,如果你检查你的主博客页面你会看到你的最新文章显示两次。可以使用pre_get_posts解决这个问题。

functions.php文件中添加文章查询偏移的函数

//在首页偏移主查询
function offset_main_query ( $query ) {
     if ( $query->is_home() && $query->is_main_query() ) {
         $query->set( 'offset', '1' );
    }
 }
add_action( 'pre_get_posts', 'offset_main_query' );

该函数只是在首页设置偏移为1

修订置顶文章

当有置顶文章的时候,如果要置顶文章显示在最上面,并以区别于其他文章的展现样式,可以修改第一个循环里面的查询内容

$args = array(
    'posts_per_page' => '1',
    'ignore_sticky_posts' => true
);

这样就会将最新的一篇文章以不同样式展现,然后依次按发表时间展示置顶文章和普通文章

修订分页显示

你会发现,当进入到其他分页后还是显示最新发表的文章,我们可以继续使用pre_get_posts解决这个问题,在functions.php文件修改上面步骤中添加的函数

function offset_main_query ( $query ) {
     if ( $query->is_home() && $query->is_main_query() && !$query->is_paged()) {
         $query->set( 'offset', '1' );
         $query->set( 'ignore_sticky_posts', '1' );
    }
 }

这里就是在函数中添加了is_paged()标签。此外还可以在第一个循环里面的条件中添加'paged' =>false来解决这个问题。

小结

通过这里示例可以了解WP_Query类和pre_get_posts钩子对输出内容的控制,可以定义不同的输出类型,解决置顶文章和分页显示的问题。

本文参考:http://code.tutsplus.com/tutorials/use-two-loops-to-output-your-first-blog-post-differently--cms-23656由本站翻译,未经许可禁止转载。