如何用Elementor Loop Grid在WordPress首页创建无重复作者盒子

一、修正PHP短代码（解决重复作者+显示最新文章） #

你的问题核心是未对作者ID去重，且未查询每个作者的最新文章。以下是修复后的短代码，直接使用即可：

function top_authors_display_shortcode() {
    // 获取所有发布过文章的作者，自动去重，按文章数量降序排列（可按需调整orderby）
    $authors = get_users(array(
        'who' => 'authors',
        'has_published_posts' => true,
        'orderby' => 'post_count',
        'order' => 'DESC',
        'number' => 10 // 控制显示的作者数量，按需修改
    ));

    $output = '<div class="top-authors-grid">';

    foreach ($authors as $author) {
        // 1. 作者头像（尺寸可调整，比如96）
        $author_avatar = get_avatar($author->ID, 96);
        // 2. 作者姓名
        $author_name = esc_html($author->display_name);
        // 3. 作者所有文章链接
        $author_posts_link = get_author_posts_url($author->ID);
        // 4. 获取该作者最新发布的文章
        $latest_post = get_posts(array(
            'author' => $author->ID,
            'post_status' => 'publish',
            'numberposts' => 1,
            'orderby' => 'date',
            'order' => 'DESC'
        ));
        $latest_post_title = !empty($latest_post) ? esc_html($latest_post[0]->post_title) : '暂无文章';
        $latest_post_link = !empty($latest_post) ? get_permalink($latest_post[0]->ID) : '#';

        // 拼接作者盒子HTML结构（可自定义类名适配Elementor样式）
        $output .= '<div class="author-box">
            <a href="' . esc_url($author_posts_link) . '" class="author-avatar">' . $author_avatar . '</a>
            <h3 class="author-name"><a href="' . esc_url($author_posts_link) . '">' . $author_name . '</a></h3>
            <p class="latest-post">最新文章：<a href="' . esc_url($latest_post_link) . '">' . $latest_post_title . '</a></p>
        </div>';
    }

    $output .= '</div>';
    return $output;
}
add_shortcode('top_authors', 'top_authors_display_shortcode');

代码说明： #

• 用get_users直接获取作者列表，自带去重效果，彻底避免循环文章导致的重复作者问题
• 通过get_posts针对每个作者ID查询最新发布的单篇文章，确保显示最新标题
• 所有输出都做了esc_html/esc_url转义，符合WordPress安全规范

二、配合Elementor Loop Grid可视化编辑（可选） #

如果想通过Elementor的Loop Grid可视化调整样式，可按以下步骤操作：

1. 创建自定义查询，选择「用户」作为数据源，设置筛选条件：
   • 勾选「仅显示发布过文章的用户」
   • 排序方式选择「文章数量（降序）」或「最新文章（降序）」
2. 在Loop Grid模板中添加动态内容：
   • 作者头像：使用Elementor动态标签「用户头像」
   • 作者姓名：使用「用户显示名称」，链接设置为「用户文章归档」
   • 作者所有文章链接：直接给姓名/头像绑定「用户文章归档」动态链接
   • 最新文章标题：添加自定义动态标签，代码如下：

     function get_author_latest_post_title() {
         $author_id = get_the_author_meta('ID');
         $latest_post = get_posts(array(
             'author' => $author_id,
             'post_status' => 'publish',
             'numberposts' => 1,
             'orderby' => 'date',
             'order' => 'DESC'
         ));
         return !empty($latest_post) ? '<a href="' . get_permalink($latest_post[0]->ID) . '">' . esc_html($latest_post[0]->post_title) . '</a>' : '暂无文章';
     }
     add_action('elementor/dynamic_tags/register_tags', function($dynamic_tags) {
         class AuthorLatestPostTitle_Tag extends \Elementor\Core\DynamicTags\Tag {
             public function get_name() { return 'author-latest-post-title'; }
             public function get_title() { return '作者最新文章标题'; }
             public function get_group() { return 'user'; }
             public function get_categories() { return array(\Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY); }
             protected function _register_controls() {}
             public function render() { echo get_author_latest_post_title(); }
         }
         $dynamic_tags->register_tag(new AuthorLatestPostTitle_Tag());
     });
     

   添加后，在Elementor编辑器的动态标签列表里就能找到「作者最新文章标题」，直接拖入模板即可。

三、样式自定义示例 #

你可以通过自定义CSS调整作者盒子的布局，比如实现网格排列：

.top-authors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}
.author-box {
    text-align: center;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 8px;
}
.author-avatar img {
    border-radius: 50%;
}

内容的提问来源于stack exchange，提问作者mohammad yousefi