如何为 WordPress 循环中的首篇文章添加专属 CSS 类

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《如何为 WordPress 循环中的首篇文章添加专属 CSS 类 》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

在 WordPress 主循环中，直接使用局部变量计数器无法跨模板文件传递状态，导致 $postCount 始终为 1；正确做法是利用 post_class 过滤器，通过 $wp_query->current_post 判断当前文章索引，安全、可靠地为第一篇文章动态添加自定义类。

在 WordPress 主循环中，直接使用局部变量计数器无法跨模板文件传递状态，导致 `$postCount` 始终为 1；正确做法是利用 `post_class` 过滤器，通过 `$wp_query->current_post` 判断当前文章索引，安全、可靠地为第一篇文章动态添加自定义类。

WordPress 的主循环（The Loop）采用模板分离机制——index.php 负责逻辑控制，而 content.php（或 content-post.php 等）负责内容渲染。由于 PHP 变量作用域限制，你在 index.php 中定义的 $postCount = 0 和递增操作，不会自动传递到被 get_template_part() 加载的 content.php 中；同理，在 content.php 内重复声明或递增也无效，因为每次调用都是独立执行，无状态延续。

✅ 正确且符合 WordPress 最佳实践的解决方案是：钩挂 post_class 过滤器，利用全局 $wp_query 对象的 current_post 属性（从 0 开始计数）精准识别首篇文章。

以下是推荐实现方式：

// 将以下代码添加至主题的 functions.php 文件中
add_filter( 'post_class', 'wps_first_post_class' );
function wps_first_post_class( $classes ) {
    global $wp_query;
    // current_post 从 0 开始：0 表示第一篇，1 表示第二篇……
    if ( 0 === $wp_query->current_post ) {
        $classes[] = 'first'; // 可替换为你需要的类名，如 'featured-post'
    }
    return $classes;
}

随后，在你的 content.php 模板中，无需手动管理计数器，直接使用 WordPress 原生函数输出 class：

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        <?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>
    </header>
    <div class="entry-content">
        <?php the_excerpt(); ?>
    </div>
</article>

此时，首篇文章的

/* 示例：首篇文章加粗标题 + 左侧边框 */
article.first .entry-title {
    font-weight: 700;
}
article.first {
    border-left: 4px solid #0073aa;
    padding-left: 1rem;
}