WordPress如何自定义设置最新文章的展示效果

以下是几种可实现需求的调整方式，你可以根据自己的技术基础选择：

1. 区块编辑器原生功能调整（无代码基础首选） #

• 进入需要放置最新文章的页面/侧边栏小部件编辑页，添加「最新文章」区块
• 点击区块后在右侧设置面板按需调整参数：
  • 可开启网格布局，设置每行展示的文章列数
  • 自定义是否展示特色图、特色图尺寸、对齐方式
  • 自定义是否展示文章摘要、摘要截取长度
  • 自定义是否展示发布日期、作者、分类等元数据
  • 调整展示的文章总数、排序规则
• 参数调整完成后直接保存即可生效

2. 自定义代码实现高度定制（有代码基础可选） #

如果原生区块的功能无法满足样式需求，可以通过自定义查询+CSS的方式实现100%匹配的效果：

• 你可以在当前使用主题的functions.php文件中添加自定义最新文章查询函数，也可以直接在需要展示的位置插入「自定义HTML」区块，写入对应查询代码：

// 自定义最新文章查询逻辑
$latest_post_query = new WP_Query([
    'post_type' => 'post',
    'posts_per_page' => 6, // 可自定义展示文章数量
    'orderby' => 'date',
    'order' => 'DESC',
    'post_status' => 'publish'
]);

if ($latest_post_query->have_posts()) {
    echo '<div class="custom-latest-post-grid">';
    while ($latest_post_query->have_posts()) {
        $latest_post_query->the_post();
        ?>
        <div class="post-card-item">
            <?php if (has_post_thumbnail()) { ?>
                <div class="post-card-thumb">
                    <?php the_post_thumbnail('medium_large'); ?>
                </div>
            <?php } ?>
            <h4 class="post-card-title"><?php the_title(); ?></h4>
            <div class="post-card-meta">
                <span class="post-date"><?php echo get_the_date('Y-m-d'); ?></span>
                <span class="post-category"><?php the_category(', '); ?></span>
            </div>
            <div class="post-card-excerpt"><?php the_excerpt(); ?></div>
            <a href="<?php the_permalink(); ?>" class="post-card-btn">阅读全文</a>
        </div>
        <?php
    }
    echo '</div>';
    wp_reset_postdata();
}

• 之后进入WordPress后台「外观」-「自定义」-「额外CSS」面板，添加对应样式代码，即可自定义卡片的间距、阴影、圆角、悬停动效等所有视觉细节。

3. 第三方插件扩展 #

如果不想手动写代码，也可以安装正规的文章展示类插件，这类插件一般都自带多种预设的最新文章展示模板，可视化调整参数即可实现需求。

内容的提问来源于stack exchange，提问作者Akash Nayak