如何在 WordPress 文章列表中显示分类和发布日期

本文详解如何修改 wordpress 自定义短代码函数，在文章摘要列表中同时展示文章标题、特色图像、发布日期及所属分类，提升内容可读性与 seo 友好度。

在 WordPress 主题或插件开发中，常需通过自定义查询动态展示某类文章（如“旅行”类）。原始代码已实现标题与特色图像的输出，但缺少关键元信息——发布日期和所属分类。以下为优化后的完整解决方案，兼顾功能性、可维护性与前端表现力。

✅ 修正要点与增强逻辑

1. 修复变量初始化问题：原代码中 $string 未初始化，可能导致 PHP 警告（如 Undefined variable），应显式声明为 ''；
2. 修正 get_the_post_thumbnail() 参数错误：$post_id 在循环中未定义，应使用 get_the_ID() 或直接省略（函数默认当前全局 $post）；
3. 安全输出分类名称：使用 wp_kses_post() 过滤 HTML，防止 XSS 风险；
4. 结构化元信息展示：为日期和分类添加语义化 标签并赋予 CSS 类，便于样式控制；
5. 逻辑顺序优化：将“无文章”提示移至 while 循环之后，避免误显（原代码中该提示位于 else 分支外，逻辑错误）。

✅ 优化后完整代码（推荐使用）

function wpb_postsbycategory() {
    // 初始化输出字符串
    $string = '';

    // 查询指定分类下的最新5篇文章
    $the_query = new WP_Query( array(
        'category_name' => 'travel',
        'posts_per_page' => 5,
        'post_status'    => 'publish' // 显式限定状态，确保只显示已发布文章
    ) );

    // 检查是否有文章
    if ( $the_query->have_posts() ) {
        $string .= '
';

        while ( $the_query->have_posts() ) {
            $the_query->the_post();
            $string .= '
';
            $string .= '';

            // 输出特色图像（自动适配当前文章ID）
            if ( has_post_thumbnail() ) {
                $string .= get_the_post_thumbnail( get_the_ID(), array( 50, 50 ), array( 'class' => 'post-thumb' ) );
            }

            // 输出标题
            $string .= '' . esc_html( get_the_title() ) . '';

            // 输出发布日期（带格式化标签）
            $string .= ' — ' . esc_html( get_the_date( 'Y-m-d' ) ) . '';

            // 输出分类列表（多分类以逗号分隔）
            $categories = get_the_category();
            if ( ! empty( $categories ) ) {
                $category_names = wp_list_pluck( $categories, 'name' );
                $string .= ' in ' . esc_html( join( ', ', $category_names ) ) . '';
            }

            $string .= '
';
        }

        $string .= '
';
    } else {
        $string .= '
暂无相关文章
';
    }

    // 重置主查询数据，避免影响后续模板逻辑
    wp_reset_postdata();

    return $string;
}
add_shortcode( 'categoryposts', 'wpb_postsbycategory' );

⚠️ 使用注意事项

• 安全性强化：所有动态输出均使用 esc_url()、esc_html() 等转义函数，防止恶意脚本注入；
• 日期格式可定制：get_the_date( 'Y-m-d' ) 支持任意 PHP 日期格式符，如 'F j, Y'（→ “January 1, 2024”）；
• 分类显示逻辑：get_the_category() 返回数组，支持多分类；若仅需首分类，可用 reset($categories)->name；
• CSS 样式建议：为 .post-date 和 .post-category 添加样式（如 color: #666; font-size: 0.9em;），提升视觉层次；
• 性能提醒：此函数每次调用均执行一次数据库查询，高流量页面建议配合对象缓存（如 Redis）或静态缓存插件。

✅ 效果预览（HTML 片段）

  

    
      @@##@@
      探索京都古寺
       — 2024-04-12
       in 旅行, 文化
    
  

通过以上改进，您不仅能准确展示文章元数据，还能确保代码健壮、安全且易于维护。将 [categoryposts] 短代码插入任意文章/页面，即可实时渲染带日期与分类的精选列表。

Trenz

AI驱动的社交电商营销平台，专为TikTok Shop设计

下载