使用两个循环以不同方式输出您的第一篇博客文章

我认为可以肯定地说，如果您是博客作者，则希望突出显示博客上的最新内容，以便人们发现并阅读。 您可以通过多种方式来执行此操作，包括对博客页面上的第一条帖子使用不同的样式以使其突出显示或在侧边栏中突出显示。

在本教程中，我将向您展示如何比使用CSS更进一步：您将输出不同的内容，而不仅仅是简单地样式化第一篇博客文章。 具体来说，第一篇文章将包含标题，特色图片和内容，而其他文章将仅具有标题，特色图片和摘录。

您可以采用这种技术：如果您不想太多细节，可以修改我们将要使用的每个查询中的循环，以使（例如）第一篇文章具有标题，图片和摘录，而其他则具有仅具有标题和图像。 或者，您可以将特色图片留在以后的帖子中。 由你决定。

我们将使用的技术涉及到使用WP_Query类在home.php模板文件中的主查询之前编写一个额外的查询，该文件将驱动博客主页面。 然后，我们将使用pre_get_posts()修改主查询，以使最新的帖子不会输出两次。 我将创建默认的二十十五岁主题的子主题，并为其创建一个home.php文件，以及用于设置子主题的样式表。

您需要什么

要遵循本教程，您需要：

• WordPress的开发安装
• 已安装的二十十五个主题的副本（或者您可以根据需要使用自己的主题）
• 帖子添加到您的网站-我通过导入主题单元测试数据添加了我的大部分内容
• 代码编辑器

设置儿童主题

如果您正在使用“二十一十五”主题，则第一步是设置您的子主题。 在wp-content/themes目录中创建一个新文件夹，并给它命名-我叫mine tutsplus-blog-page-two-loops 。 现在，在该文件夹中创建一个空的style.css文件，并向其中添加以下内容：

/*
Theme Name:     Tuts+ Use Two Loops on Your Main Blog Page
Theme URI:      http://rachelmccollin.co.uk/wptutsplus-taxonomy-archive-list-by-second-taxonomy/
Description:    Theme to support WPTutsPlus tutorial on creating a custom taxonomy archive. Child theme for the Twenty Fifteen theme.
Author:         Rachel McCollin
Author URI:     http://rachelmccollin.co.uk/
Template:       twentyfifteen
Version:        1.0
*/

@import url("../twentyfifteen/style.css");

这告诉WordPress您的主题是“二十一十五”主题的子级，并从该主题导入样式表。 您可能需要编辑一些细节，以反映出这是您的主题这一事实。

为博客页面创建模板文件

由于这是您要修改的主要博客页面，因此需要在子主题中为此创建一个模板文件。 您需要创建的模板文件是home.php ，它可以home.php博客主页面，无论它是否是站点的首页。

在主题文件夹中创建一个名为home.php的文件。

现在，在“二十一十五”中打开index.php文件，并将代码复制到该文件的开头和结尾（即不是循环）。 您的文件将如下所示：

<?php

get_header(); ?>

    <div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
		
			<header>
				<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
			</header>
			
			
            <?php // Previous/next page navigation.
    		the_posts_pagination( array(
			    'prev_text'          => __( 'Previous page', 'twentyfifteen' ),
			    'next_text'          => __( 'Next page', 'twentyfifteen' ),
			    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>',
			) ); ?>
            
		</main><!-- .site-main -->
	</div><!-- .content-area -->

<?php get_footer(); ?>

如果您使用自己的主题，请从主题的index.php文件中复制等效代码，以使页面具有包含元素但没有循环。

添加第一个循环

下一步是创建第一个循环，该循环将完整显示最新帖子。

在home.php文件中的</header>标记下，添加查询的参数：

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

这只会查询最新的帖子。 请注意，您不必包括post类型，并且默认为'post' 。

现在，将循环添加到参数下面：

$query = new WP_query ( $args );
if ( $query->have_posts() ) { ?>

<?php while ( $query->have_posts() ) : $query->the_post(); /* start the loop */ ?>

<article id="post-<?php the_ID(); ?>" <?php post_class( '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><!-- .entry-content -->	
				
	<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 // End the loop.
endwhile;

rewind_posts();

} ?>

此循环输出帖子标题，缩略图（如果有的话）和内容。

请注意，我在post_class()模板标记中添加了一个额外的类.first-post 。 如果您想使用CSS突出显示您的第一篇文章，那么这个额外的类为您提供了一种简便的方法。

在循环之后添加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 // End the loop.
endwhile; ?>

此循环与第一个循环非常相似，但有两个区别：

• 它输出摘录而不是内容。
• 它不包括.first-post类。

现在保存文件。

使用pre_get_posts抵消主查询

目前，如果您查看自己的博客主页面，则会看到您的最新帖子显示了两次。 我们将通过使用pre_get_posts挂钩抵消主查询来解决此pre_get_posts 。

在主题中创建一个名为functions.php的新文件。 或者，如果您正在使用自己的主题并且该主题已经具有功能文件，请打开该文件。

将此代码添加到您的函数文件中：

<?php
// offset the main query on the home page 
function tutsplus_offset_main_query ( $query ) {
     if ( $query->is_home() && $query->is_main_query() ) {
		 $query->set( 'offset', '1' );
	}
 }
add_action( 'pre_get_posts', 'tutsplus_offset_main_query' );

这将过滤主查询，但仅在主页上，添加偏移量1。

现在，保存文件并查看博客主页面：

有问题 因为我的博客上有一个粘性帖子，所以该帖子显示在最新帖子的上方，这不是我想要的。 它还显示最新帖子和粘性帖子的全部内容。

固定粘帖

这很容易纠正。 再次打开home.php文件，并在第一个查询的参数中添加另一个参数：

'ignore_sticky_posts' => true

这将确保WordPress在运行第一个循环时忽略粘性帖子。 您的第一组查询参数现在将如下所示：

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

现在，再次保存文件并检查您的博客页面：

那更好！ 最新的帖子位于顶部，而粘性的帖子位于其下方，仅摘录输出。 如果进一步向下滚动，您会看到其他帖子也只是摘录：

如果要在第二个循环中忽略粘性帖子，可以通过在第二个查询中添加ignore_sticky_posts参数来实现。 我希望粘性帖子能够正常工作，但是我最近的帖子除外，所以我不会。

固定分页

您会注意到，如果导航到博客中帖子的第二页和后续页面（即分页页面），则会显示与第一页相同的帖子，这意味着仅显示十个最新帖子！ 这是因为偏移主查询的分页符已损坏。

幸运的是，通过修改添加到pre_get_posts挂钩中的函数，可以轻松解决此pre_get_posts 。

再次打开您的functions.php文件，然后编辑该函数，使其内容如下所示：

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

我们在这里所做的是添加了is_paged() 条件标记 。 这会检查除第一页以外的分页页面，因此如果访问者正在查看帖子的第二页或后续页面，则返回true。 通过使用!$query->is_paged() ，我们确保仅在未分页页面时才对查询进行偏移。

现在保存文件，然后再次检查。 分页现在可以正常工作。

您会注意到，同一最新帖子仍显示在页面顶部。 这是因为页面使用相同的模板和相同的两个循环。

在我的网站上，我很乐意将其保留为原样，因为我希望最近发布的内容能够非常突出。 但是，如果要更改此设置，则可以在第一个查询中添加一个额外的参数，即'paged' => false 。

摘要

使用带有pre_get_posts钩子的WP_Query类，可以轻松地修改博客主页输出帖子的方式。 在本教程中，您学习了如何：

• 使用WP_Query向您的博客页面添加一个额外的循环以完整输出第一篇文章
• 修改主查询，以使第一篇文章不会输出两次
• 使用粘性帖子和分页修复错误

您可以采用这种技术来显示给定类别的最新帖子，在循环中使用其他内容等等。

翻译自: https://code.tutsplus.com/tutorials/use-two-loops-to-output-your-first-blog-post-differently--cms-23656