如何用Elementor免费版在WordPress前端添加自定义文章类型

云原生阿岚

2026-8-6

解决Elementor编辑时提示“content area was not found”的问题

核心原因

Elementor依赖WordPress模板中的the_content()函数来挂载编辑器的内容区域，你的自定义主题首页模板大概率缺少这个关键调用，导致编辑时触发报错。

解决方案

1. 修复首页模板的`the_content()`调用

找到自定义主题里的首页模板文件（通常是front-page.php或home.php），确保模板中包含<?php the_content(); ?>代码，且放在主内容容器内。示例结构如下：

<?php get_header(); ?>
<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php the_content(); ?> <!-- 这一行必须保留，Elementor靠它识别编辑区域 -->
    </main><!-- #main -->
</div><!-- #primary -->
<?php get_footer(); ?>

2. 调整自定义文章类型的短代码实现

不要让短代码输出完整的页面结构，只返回自定义内容的片段，避免干扰Elementor的页面布局。示例短代码函数：

function custom_post_type_shortcode() {
    ob_start();
    // 替换成你的自定义文章类型slug
    $args = array('post_type' => 'your_custom_post_type', 'posts_per_page' => 6);
    $query = new WP_Query($args);
    
    if ($query->have_posts()) :
        echo '<div class="custom-posts-grid">';
        while ($query->have_posts()) : $query->the_post();
        ?>
            <div class="custom-post-item">
                <h3><?php the_title(); ?></h3>
                <?php the_excerpt(); ?>
            </div>
        <?php
        endwhile;
        echo '</div>';
        wp_reset_postdata();
    endif;
    
    return ob_get_clean();
}
add_shortcode('custom_posts', 'custom_post_type_shortcode');