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

本文详解如何修改 wordpress 自定义短代码函数，在文章缩略图和标题之外，正确显示每篇文章的发布日期和所属分类，同时提供结构化 html 输出与安全渲染建议。

在 WordPress 主题或插件开发中，常需通过自定义查询展示特定分类下的文章列表（如“旅行”类文章）。原始代码已实现基础功能——输出带缩略图和标题的链接列表，但缺少关键元信息：发布日期与所属分类。以下为优化后的完整解决方案，兼顾功能性、可读性与安全性。

✅ 正确获取并显示日期与分类

WordPress 提供了两个核心函数：

• get_the_date()：返回当前文章的发布日期（支持格式参数，如 get_the_date('Y-m-d')）；
• get_the_category()：返回当前文章所有分类对象数组，需进一步处理为可读文本。

原答案中的逻辑存在两处关键问题需修正：

1. $post_id 未定义：在循环内应使用 get_the_ID() 或直接省略（因 get_the_post_thumbnail() 在主循环中默认作用于当前全局 $post）；
2. else 分支位置错误：原代码将 “No Posts Found” 放在 while 循环外但 if ( have_posts() ) 的 else 内，导致无结果时仍会闭合
   ，但实际应置于 if 的 else 块中，确保 HTML 结构完整。

以下是修复并增强后的专业级代码：

WOMBO

使用AI创作美丽的艺术品

下载

function wpb_postsbycategory() {
    // 查询旅行分类下最多5篇文章
    $the_query = new WP_Query( array(
        'category_name' => 'travel',
        'posts_per_page' => 5,
        'post_status'    => 'publish' // 明确限定状态，避免草稿干扰
    ) );

    $string = ''; // 初始化字符串，避免未定义警告

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

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

            // 输出缩略图（自动适配当前文章）
            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() );

            // 发布日期：包裹在语义化 span 中，便于 CSS 控制
            $string .= '' . esc_html( get_the_date( 'M j, Y' ) ) . '';

            // 分类列表：支持多分类，用逗号分隔，并过滤 HTML
            $categories = get_the_category();
            if ( ! empty( $categories ) ) {
                $category_links = array();
                foreach ( $categories as $category ) {
                    $category_links[] = '' 
                                      . esc_html( $category->name ) . '';
                }
                $string .= 'in ' . implode( ', ', $category_links ) . '';
            }

            $string .= '
';
        }

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

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

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

? 安全与最佳实践要点

• URL 转义：使用 esc_url() 包裹所有链接地址，防止 XSS；
• HTML 内容过滤：esc_html() 确保标题、日期等纯文本不执行 HTML；
• 分类链接可点击：为每个分类生成真实链接，提升用户体验与 SEO；
• 语义化标签：用 和 封装元信息，便于前端样式定制；
• 空值判断：检查 $categories 是否为空，避免输出冗余逗号；
• 显式 post_status：排除草稿/私密文章，保障内容可靠性。

? 使用方式

在任意文章、页面或小工具中插入短代码：

[categoryposts]

即可渲染带日期与分类的旅行文章列表。如需切换分类，可扩展为带参数的短代码（如 [categoryposts cat="tech"]），进一步提升复用性。

通过以上改造，您的文章列表不仅信息更完整，也更健壮、安全、易于维护。