自定义WordPress主题忽略文章/页面内容格式问题修复

核心原因 #

自定义主题默认不会自动加载Gutenberg编辑器的块样式库，导致wp-column-block这类块元素缺少对应CSS规则，最终布局堆叠失效。

修复步骤 #

1. 在functions.php中引入Gutenberg块样式库 #

打开主题的functions.php文件，添加以下代码注册并加载官方块样式：

function enqueue_block_styles() {
    // 加载Gutenberg核心块样式
    wp_enqueue_style( 'wp-block-library' );
    // 加载块主题样式（适配前端展示的补充样式）
    wp_enqueue_style( 'wp-block-library-theme' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_block_styles' );

这种方式由WordPress自动处理资源路径，兼容性更强。

2. 开启主题对Gutenberg的支持 #

在functions.php中添加主题支持声明，确保主题兼容块编辑器特性：

add_theme_support( 'wp-block-styles' ); // 启用默认块样式
add_theme_support( 'align-wide' ); // 支持宽对齐/全宽对齐布局

3. 规范内容输出方式 #

将singular.php中的<?php echo get_the_content(); ?>替换为标准输出函数：

<?php the_content(); ?>

the_content()会自动处理块标记的样式关联，比直接输出get_the_content()的结果更规范。

4. 清除缓存验证 #

修改代码后，清除WordPress缓存、浏览器缓存，刷新前端页面查看列布局是否恢复正常。

额外补充（若仍有异常） #

如果部分块样式还是缺失，可以通过浏览器开发者工具定位缺失的CSS类，在主题的style.css中手动补充基础规则，比如列布局的核心样式：

.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.75em;
    gap: 2em;
}
.wp-block-column {
    flex: 1;
    min-width: 250px;
}
@media (max-width: 768px) {
    .wp-block-columns {
        flex-direction: column;
    }
}

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