WordPress editor-style 配置教程：后台编辑样式与前台一致

引言：在后台排好的版，发布后全变了

写文章时把标题设成 28px、行高 1.6、引用块加了左边框，编辑区看着很舒服。点发布，前台一看：标题 22px、行距紧、引用块没有边框。于是来回切前台后台反复微调，一篇文章能折腾半小时。这种「编辑器与前台不一致」的问题，本质上是主题的编辑器样式根本没配置。

WordPress 的区块编辑器有自己一套默认排版样式，如果主题不声明，编辑器就用这套默认值渲染内容区，跟你的主题样式毫无关系。解决它只需要两步：add_theme_support( 'editor-styles' ) 加 add_editor_style()。但实际落地时还有不少坑：路径写法、theme.json 的优先级、区块编辑器把内容放进 iframe 后带来的差异、深色模式下要另配一份。本文把这些讲透。

原理分析：两套编辑器、三种样式来源

先要区分「经典编辑器」和「区块编辑器」。经典编辑器（TinyMCE）通过 add_editor_style() 加载样式表进 iframe；区块编辑器则要求主题先声明 add_theme_support( 'editor-styles' )，add_editor_style() 才会对区块编辑器生效。只写后者不写前者，区块编辑器里是看不到效果的——这是最常见的「配了没反应」的原因。

theme.json 是 WordPress 5.8 引入的全局样式机制，它的 styles 节点会生成 CSS 变量并同时作用于前台和编辑器。如果主题同时用了 theme.json 和 add_editor_style()，theme.json 里定义的规则优先级更高，你会发现编辑器样式表里写的字号被 theme.json 覆盖。排查这类冲突时，要先用浏览器检查元素看是哪条规则在生效。

新版本的区块编辑器把内容区渲染在 iframe 里，这带来一个实际影响：编辑器外层的样式不会泄漏进内容区，但 @media 断点是按 iframe 的宽度计算的，而不是浏览器窗口宽度。你在编辑器里看到的响应式效果，可能与真实前台有偏差，需要靠手动缩放预览来验证。

保姆级实操

1. 声明主题支持：在 after_setup_theme 钩子里加 add_theme_support( 'editor-styles' )。
2. 注册编辑器样式表：用 add_editor_style() 引入，可以传数组引入多个。
3. 写针对性规则：编辑器样式表只需覆盖内容区排版（字号、行高、间距、引用、表格），不要放布局类规则。
4. 对齐 theme.json：如果主题有 theme.json，把排版变量统一到一处，避免两处打架。
5. 补充界面样式：需要给编辑器侧边栏、区块工具栏加样式时，用 enqueue_block_editor_assets。
6. 深色模式另配：启用 dark-editor-style 并注册深色编辑器样式表。
7. 验证：后台新建文章，逐个插入标题、段落、列表、引用、表格、代码块，与前台同一篇文章截图对比。

<?php
// 子主题 functions.php
add_action( 'after_setup_theme', 'mimangfei_editor_styles_setup' );
function mimangfei_editor_styles_setup() {
    // 关键：缺少这一行，add_editor_style() 对区块编辑器无效
    add_theme_support( 'editor-styles' );

    // 可选：让编辑器支持深色背景下的排版预览
    add_theme_support( 'dark-editor-style' );

    // 可选：对齐宽屏、全宽对齐方式
    add_theme_support( 'align-wide' );

    // 引入编辑器样式表，注意用相对主题根目录的路径
    add_editor_style( 'assets/css/editor-style.css' );
    add_editor_style( 'assets/css/editor-style-dark.css' );
}

/* assets/css/editor-style.css：只写内容排版，不写页面布局 */
body {
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: #1f2328;
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px;
}

.wp-block-post-title,
h1, h2, h3 {
    line-height: 1.3;
    margin: 1.6em 0 0.6em;
    font-weight: 600;
}

h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

.wp-block-quote {
    border-left: 3px solid #0969da;
    padding-left: 1em;
    color: #57606a;
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
    border: 1px solid #d0d7de;
    padding: 8px 12px;
}

<?php
// 需要给编辑器界面本身加样式时（侧边栏、工具栏），用这个钩子
add_action( 'enqueue_block_editor_assets', 'mimangfei_block_editor_ui_css' );
function mimangfei_block_editor_ui_css() {
    wp_enqueue_style(
        'mimangfei-editor-ui',
        get_stylesheet_directory_uri() . '/assets/css/editor-ui.css',
        array(),
        wp_get_theme()->get( 'Version' )
    );

    $css = '.editor-styles-wrapper { --mmf-content-width: 720px; }';
    wp_add_inline_style( 'mimangfei-editor-ui', $css );
}

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
        "typography": {
            "fontSizes": [
                { "slug": "small", "size": "14px", "name": "小" },
                { "slug": "medium", "size": "16px", "name": "中" },
                { "slug": "large", "size": "20px", "name": "大" }
            ]
        }
    },
    "styles": {
        "typography": { "lineHeight": "1.75" },
        "blocks": {
            "core/quote": {
                "border": { "left": { "width": "3px", "color": "#0969da" } }
            }
        }
    }
}

常见踩坑

1. 只写 add_editor_style() 没写 add_theme_support( 'editor-styles' )：区块编辑器里完全不生效，这是第一号原因。
2. 路径写成绝对 URL：add_editor_style() 接受的是相对主题根目录的路径，传完整 URL 会导致样式不加载。
3. 把前台布局样式塞进编辑器样式表：写了 .site-header、.sidebar 之类，编辑器里没有这些元素，规则全部空转，还增大文件。
4. 案例：某站配置完编辑器样式，标题字号死活不生效，检查元素发现被 body { font-size: var(--wp--preset--font-size--medium) } 覆盖。原因是主题的 theme.json 里定义了预设字号，优先级高于编辑器 CSS 中的 h2 规则。最后把字号统一写进 theme.json 的 styles.blocks，两边才一致。教训：有 theme.json 时，排版类规则优先放 theme.json，编辑器样式表只补 theme.json 表达不了的部分。
5. iframe 里的断点失真：编辑器内容区是 iframe，媒体查询按 iframe 宽度计算。预览响应式效果要用编辑器自带的桌面/移动预览切换，而不是拖动浏览器窗口。
6. 经典编辑器插件共存：装了 Classic Editor 插件时，add_editor_style() 会同时作用于 TinyMCE，部分现代 CSS（如 :is()）在旧 TinyMCE 环境不解析，需要写降级规则。
7. 缓存导致改了没反应：编辑器样式表会被浏览器强缓存，改完看不到效果时先强制刷新，或给文件路径加版本号。
8. 深色编辑器样式表忘了关：注册了 editor-style-dark.css 但没启用 dark-editor-style，文件永远不会被加载，白白维护。

总结

配置编辑器样式的判断标准是：在后台写完一段内容，发布后前台应当几乎不需要再微调。行动清单：after_setup_theme 里加 editor-styles 支持 → add_editor_style() 引入相对路径的样式表 → 只写内容排版不写页面布局 → 有 theme.json 时把排版规则统一到 theme.json → 界面样式走 enqueue_block_editor_assets → 深色另配一份 → 新建测试文章逐区块对比。同步好编辑器之后，下一步就该处理 主题对文章内区块的默认样式美化，把引用、表格、代码块这些区块在前台的实际观感一并补齐。