WordPress Loop 首篇文章添加样式类的正确方法

在 WordPress 主循环中，为首页或归档页的首篇文章精准添加专属 CSS 类，常因模板隔离导致手动计数器失效；本文揭示了最可靠、符合官方规范的解决方案——利用 `post_class` 过滤器结合 `$wp_query->current_post` 零基索引判断，无需全局变量或复杂逻辑，即可轻量、健壮地为第一篇文章动态注入自定义类名（如 `first-post`），并支持在任意标准循环场景（首页、分类、搜索等）中稳定生效，让样式定制更语义化、更易维护。

在 WordPress 主循环中，直接使用 PHP 计数器（如 $postCount++）无法在 get_template_part() 加载的模板文件中访问变量，导致计数失效；推荐通过 post_class 过滤器判断当前文章索引，精准为第一篇文章动态添加 CSS 类。

在 WordPress 主循环中，直接使用 PHP 计数器（如 `$postCount++`）无法在 `get_template_part()` 加载的模板文件中访问变量，导致计数失效；推荐通过 `post_class` 过滤器判断当前文章索引，精准为第一篇文章动态添加 CSS 类。

WordPress 的主循环（The Loop）中，模板文件（如 content.php）是通过 get_template_part() 独立加载的，其作用域与主循环所在文件（如 index.php）相互隔离——这意味着在 index.php 中定义的 $postCount 变量不会自动传递到 content.php，即使声明为全局变量也因执行时机和作用域限制而不可靠。

✅ 正确且符合 WordPress 最佳实践的方式是利用内置的 post_class 过滤器。该过滤器在每次输出

// 将以下代码添加到主题的 functions.php 文件中
add_filter( 'post_class', 'wps_first_post_class' );
function wps_first_post_class( $classes ) {
    global $wp_query;
    // 检查是否为循环中的第一个文章（索引为 0）
    if ( $wp_query->current_post === 0 ) {
        $classes[] = 'first-post'; // 可自定义类名，如 'featured'、'hero'
    }
    return $classes;
}

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        <?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>
    </header>
    <div class="entry-content">
        <?php the_excerpt(); ?>
    </div>
</article>

/* 示例：为首篇文章增加边框、阴影或不同背景 */
.first-post {
    border-left: 4px solid #2578b8;
    background-color: #f9fbfd;
    padding-left: 20px;
}