WordPress主题开发（ 八）之—— 模板循环详细用法

WordPress 主题开发教程手册 — 模板循环

WordPress 主题开发中，模板循环是一个非常关键的概念，它负责默认机制来输出文章内容。模板循环会遍历当前页面获取的所有文章，然后使用主题中的模板标签将它们格式化并输出。

模板循环的应用

WordPress 的模板循环功能非常灵活，可以应用于多种情况，包括但不限于：

1. 在网站首页展示多个文章模块。
2. 在文章详情页面显示内容和评论。
3. 在侧边栏中展示最新文章或热门文章。在这里插入代码片
4. 显示特定文章类型或分类的数据。
5. 根据特定条件获取数据并在文章模块中显示。

深入了解模板循环

让我们更深入地了解模板循环的基本用法：

<?php 
if (have_posts()) : 
    while (have_posts()) : the_post(); 
        // 在此处显示文章内容
    endwhile; 
endif; 
?>

上面的代码首先检查是否有文章需要循环，如果有，就逐篇显示文章内容。

• have_posts() 函数用于检查当前页面是否有文章需要显示。
• 只要 while 循环中的条件逻辑为真，循环就会一直执行下去。

在主题中使用模板循环

通常情况下，模板循环应该放在 index.php 或其他用于显示文章的模板文件中。由于我们不希望在每篇文章中都显示网站页头，所以循环代码应该放在 get_header() 之后。

<?php 
get_header();

// 循环代码从这里开始
if (have_posts()) : 
    while (have_posts()) : the_post(); 
        // 在此处显示文章内容
    endwhile; 
endif; 

get_sidebar();
get_footer();
?>

如上所示，模板循环必须以 if 和 while 语句开头，并以 endwhile 和 endif 语句结束。文章内容的模板标签应该位于循环开始语句和结束语句之间。

如果当前页面没有文章，我们可以显示一个 404 错误信息，这个信息应该位于 endwhile 和 endif 语句之间，如下所示。

<?php
get_header();

if (have_posts()) : 
    while (have_posts()) : the_post();
        the_content();
    endwhile;
else :
    _e('抱歉，未找到您需要的文章。', 'textdomain');
endif;

get_sidebar();
get_footer();
?>

模板循环中的模板标签

在模板循环中，我们可以使用各种模板标签来显示不同的文章内容和信息。以下是一些常用的模板标签：

• the_ID()：显示文章或页面 ID。
• the_meta()：显示文章或页面的自定义字段
• the_title()：显示文章标题。
• the_post_thumbnail()：显示文章的缩略图。
• the_excerpt()：显示文章摘要。
• the_category()：显示当前文章所属的分类。
• the_author()：显示文章作者。
• the_content()：显示文章正文内容。
• the_time()：显示文章发布时间。
• the_tags()：显示文章的标签。
• next_post_link()：显示在当前文章之后 发布的文章的链接
• previous_post_link()：显示在当前文章之前发布的文章的链接

通过这些模板标签，我们可以根据需要自定义文章的展示方式。

使用条件标签控制文章显示

在显示文章时，我们可以使用条件标签来控制文章是否在满足某些条件的情况下显示。这使我们可以更灵活地定制文章的呈现方式。

示例

下面让我们看一些 WordPress 模板循环的实际应用示例。

基本示例 - 文章列表页

大多数网站都有文章列表页面，以下示例是一个简单的列表页面，它首先检查是否有文章，如果有，则显示文章标题、缩略图和摘要，如果没有，则显示提示消息。

<?php 
if (have_posts()) : 
    while (have_posts()) : the_post(); 
        the_title('<h2>', '</h2>'); 
        the_post_thumbnail(); 
        the_excerpt();
    endwhile; 
else: 
    _e('抱歉，未找到您需要的文章。', 'textdomain'); 
endif; 
?>

文章详情页

在 WordPress 中，每篇文章都有自己的详情页面，以下示例演示如何在详情页面上显示文章的标题和内容。

<?php 
if (have_posts()) : 
    while (have_posts()) : the_post(); 
        the_title('<h1>', '</h1>'); 
        the_content();
    endwhile; 
else: 
    _e('抱歉，未找到您需要的文章。', 'textdomain'); 
endif; 
?>

根据分类不同显示不同样式

在这个示例中，我们首先显示每篇文章的标题、发布时间、作者、正文和分类。然后，我们使用 in_category() 函数来为分类 ID 为 3 的文章显示不同的样式。

<?php
// 开始循环
if (have_posts()) : 
    while (have_posts()) : the_post();
        // 判断文章是否在分类 3 中，如果是，添加 CSS 类 "post-category-three". 否则，添加 CSS 类 "post".
        if (in_category(3)) : ?>
            <div class="post-category-three">
        <?php else : ?>
            <div class="post">
        <?php endif; 

        // 显示文章标题
        the_title('<h2>', '</h2>'); 

        // 显示该文章作者存档的链接
        printf(__('作者 %s', 'textdomain'), get_the_author_posts_link());

        // 显示文章内容
        ?>
        <div class="entry">
            <?php the_content() ?>
         </div>

        <?php
        // 显示逗号分隔的文章分类
        _e('文章分类 ', 'textdomain'); the_category(', '); 

        // 关闭 div
       ?>
       </div>

    <?php 
    // 结束循环，下面是没有文章

时显示的内容
    endwhile; 

else :
    // 如果没有文章，显示提示消息
     _e('抱歉，未找到您需要的文章。', 'textdomain');
 
// 结束判断和循环
 endif;

主循环

主循环是 WordPress 中的一个关键概念，在访问 WordPress 站点时，WordPress 会根据访问的页面自动创建一个文章查询和循环，将其存储在全局变量 $wp_query 中。这个全局变量负责管理页面上的文章数据。我们可以直接在页面模板中循环 $wp_query 中的数据来输出文章。

以下是主循环的示例：

if (have_posts()) : 
    while (have_posts()) : the_post();
        the_title();
    endwhile;
endif;

if ( $wp_query->have_posts() ) : 
    while ( $wp_query->have_posts() ) : $wp_query->the_post();
        the_title();
    endwhile;
endif;

实际上，为了代码简洁性，WordPress 隐藏了全局主循环变量 $wp_query。

多个循环

在某些情况下，我们可能需要使用多个循环来在同一页面中显示不同的文章内容。例如，在页面顶部显示文章标题列表，然后在页面底部显示文章内容。在这种情况下，我们需要重新开始循环，并使用 rewind_posts() 函数来实现。

我们可以使用 rewind_post() 函数让循环从循环中的第一个元素重新开始，当我们需要在一个页面中循环同一个查询时，这个函数非常有用。

以下是使用 rewind_posts() 函数重新开始循环的示例：

<?php
// 开始第一次循环
if (have_posts()) : 
    while (have_posts()) : the_post();
        the_title();
    endwhile;
endif;

// 使用 rewind_posts() 重新开始循环
rewind_posts();

// 开始第二次循环
while (have_posts()) : the_post();
    the_content();
endwhile;
?>

新建查询和文章循环

有时，我们需要在同一页面上显示不同的文章集合，例如，在页面左侧显示所有文章，右侧显示特定分类（例如 “example-category”）中的文章。在这种情况下，我们需要创建一个新的文章查询，然后循环遍历这个新的查询结果。以下是示例代码：

<?php
// 显示所有文章
if (have_posts()) : 
    while (have_posts()) : the_post(); 
        the_title(); 
        the_content(); 
    endwhile; 
else :
    _e('抱歉，未找到您需要的文章。'); 
endif;
wp_reset_postdata();                                                        

// 创建一个新的文章查询，获取分类 "category_name" 中的文章。
$secondary_query = new WP_Query('category_name=example-category');        

// 循环新的查询结果
if ($secondary_query->have_posts()) {
    echo '<ul>';
    while ($secondary_query->have_posts()) : $secondary_query->the_post();
        the_title('<li>', '</li>');
    endwhile;
    echo '</ul>';
}
wp_reset_postdata();
?>

如上例所示，首先我们展示主循环中的结果，然后使用 WP_Query 类查询指定分类中的文章。

请注意，上面示例中的第二个循环和主循环之间有一个区别：前者使用了 wp_reset_postdata() 函数来重置文章数据。

重置多个文章循环

在循环中，文章数据存储在全局变量 $post 中。在结束循环时，我们需要重置这个全局变量，否则可能会导致一些难以调试的问题。根据循环的方式，有三个函数可用于重置循环：

• wp_reset_postdata()
• wp_reset_query()
• rewind_posts()

使用 wp_reset_postdata() 重置文章数据

当使用 WP_Query 创建自定义查询或使用多个循环时，应该使用 wp_reset_postdata() 来重置文章数据。这个函数将全局变量 $post 还原到主查询中的当前文章。如果按照 WordPress 开发的最佳实践来进行，wp_reset_postdata() 是重置循环的最常见方式。

以下是使用 WP_Query 创建自定义查询和循环后，使用 wp_reset_postdata() 重置文章数据的示例代码：

<?php 
// WP_Query 所使用的参数 
$args = array('posts_per_page' => 3); 

// 调用 WP_Query 创建文章查询
$the_query = new WP_Query($args); 

if ($the_query->have_posts()) : 
    // 开始循环
    while ($the_query->have_posts()) : $the_query->the_post(); 
        the_title(); 
        the_excerpt(); 
    // 结束循环
    endwhile; 
else : 
    _e('抱歉，未找到您需要的文章。', 'textdomain'); 
endif; 

wp_reset_postdata(); 
?>

使用 wp_reset_query() 重置主循环和文章数据

由于 query_posts() 函数创建的循环是主循环，因此在使用了这个函数创建查询后，我们必须使用 wp_reset_query() 来重置查询和文章数据。如果使用 WP_Query 创建查询，我们可以使用 wp_reset_query() 来重置文章数据，因为该函数已经包含了 wp_reset_postdata()。

但是，最佳做法是对使用 WP_Query 创建的文章循环使用 wp_reset_postdata() 来重置文章数据，而不是使用 query_posts()。

需要注意的是，query_posts() 创建的主循环会替换当前页面的主循环，使用这个函数可能会引发一些副作用，因此最好避免使用它。