WordPress页面中the_content()与get_the_content()无样式问题排查

1. 引入WordPress默认内容样式 #

WordPress编辑器（Gutenberg/经典编辑器）生成的内容依赖官方内置样式库，你的自定义主题未加载这些样式，才会出现元素有类但无对应样式的情况。

• 在主题根目录创建functions.php文件，添加以下代码加载官方样式：

<?php
function my_theme_load_styles() {
    // 加载Gutenberg块编辑器默认样式
    wp_enqueue_style('wp-block-library');
    // 若使用经典编辑器，可额外加载对应样式
    // wp_enqueue_style('classic-editor-styles');
    
    // 加载自定义主题样式文件
    wp_enqueue_style('my-theme-main', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_load_styles');
?>

2. 修正文章内容调用逻辑 #

放弃手动调用wpautop()或apply_filters('the_content', get_the_content())，直接使用the_content()——它会自动触发所有WordPress内置格式化逻辑（包括自动换行、短代码解析、样式类注入），代码示例：

<?php
// 获取最新发布的单篇文章（若需固定某篇，可添加'p' => 文章ID参数）
$single_post_query = new WP_Query(array(
    'posts_per_page' => 1,
    'post_status' => 'publish'
));

if ($single_post_query->have_posts()) :
    while ($single_post_query->have_posts()) : $single_post_query->the_post(); ?>
        <article <?php post_class(); ?>>
            <h1><?php the_title(); ?></h1>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
    <?php endwhile;
    wp_reset_postdata();
endif;
?>

3. 排查并修复CSS重置问题 #

如果你的style.css中有全局重置代码（如* { margin:0; padding:0; }），检查是否过度清除了基础元素样式，可手动补充必要的排版样式：

/* 段落基础样式 */
.entry-content p {
    margin-bottom: 1.5em;
    line-height: 1.6;
}

/* 图片自适应样式 */
.entry-content img {
    max-width: 100%;
    height: auto;
    margin: 1em 0;
}

/* 列表样式 */
.entry-content ul, .entry-content ol {
    margin-left: 1.8em;
    margin-bottom: 1.5em;
}
.entry-content li {
    margin-bottom: 0.6em;
}

4. 验证效果 #

刷新首页后，通过浏览器开发者工具确认：

• wp-block-library样式文件已成功加载（查看Network面板的CSS资源）
• 文章元素（如p.wp-block-paragraph、figure.wp-block-image）已应用对应样式规则

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