本文约 4,463 字，预计阅读 12 分钟。文中命令与配置均经过实测，可直接参考执行。
引言：内容没问题，但没人读完
有博主拿着自己的文章来问：”我这篇写了三千字，数据都在，为什么跳出率 90%？”打开页面一看：全篇没有小标题，二十多个段落里有一半是五六行的长段落，图片直接贴在正文中没有说明文字，代码块是灰色背景配浅灰字，几乎看不清。内容确实不错，但读者扫一眼就走了。
网页阅读和书本阅读完全不同。读者进入页面后的前 5 秒是”扫描式”阅读：看标题有没有他关心的部分、看段落是否易读、看有没有图或代码块帮助理解。如果这些信号都不理想，再好的内容也不会被读完。排版规范的价值就在于：让每一篇文章都满足同样的可读性下限，不依赖作者当天状态。而且规范一旦落到主题 CSS 和编辑器样式里，就是”自动生效”的，不需要每篇手动调整。
原理分析：排版规范的三个技术支点
第一个支点是标题层级。一篇文章只应有一个 H1（文章标题，由主题输出），正文里从 H2 开始，H3 用于 H2 之下的细分，不要跳级（H2 直接跳 H4 会让屏幕阅读器和搜索引擎的层级解析混乱）。
第二个支点是前后台一致。如果编辑器里的样式和前台不一致，作者在后台看到的排版就是”假的”。解决办法是 add_theme_support( 'editor-styles' ) 配合 add_editor_style() 加载同一套内容样式。
第三个支点是媒体与代码的可控性。图片要指定 srcset（WordPress 自动生成），代码块要有横向滚动与等宽字体，表格在窄屏要能滚动而不是撑破布局。
| 元素 | 规范 | 常见错误 |
|---|---|---|
| H2 | 每段核心内容一个小标题，3–6 个 | 全文无小标题 |
| 段落 | 3–5 行，一段一个意思 | 一段写满一屏 |
| 列表 | 并列关系用列表，≥3 项 | 用顿号堆一串 |
| 图片 | 宽度统一，配图注 | 尺寸混乱、无图注 |
| 代码块 | 标注语言，可横向滚动 | 无高亮、无标注 |
| 表格 | 窄屏可滚动 | 撑破移动端布局 |
保姆级实操
步骤 1：在主题里声明编辑器样式支持。 放在子主题 functions.php 的 after_setup_theme 钩子里。
add_action( 'after_setup_theme', 'mimangfei_editor_support' );
function mimangfei_editor_support() {
add_theme_support( 'editor-styles' );
add_theme_support( 'wp-block-styles' );
add_theme_support( 'responsive-embeds' );
// 限定字号，避免作者随手用 48px 大标题
add_theme_support( 'editor-font-sizes', array(
array( 'name' => '小', 'size' => 14, 'slug' => 'small' ),
array( 'name' => '正文', 'size' => 16, 'slug' => 'normal' ),
array( 'name' => '大', 'size' => 20, 'slug' => 'large' ),
) );
add_editor_style( 'assets/css/editor.css' );
}
步骤 2：写一份前后台共用的内容样式。 前台与编辑器引入同一份 content.css，保证所见即所得。
.entry-content {
font-size: 16px;
line-height: 1.8;
color: #2c3033;
}
.entry-content p {
margin: 0 0 1.2em;
}
.entry-content h2 {
font-size: 22px;
margin: 2em 0 .8em;
padding-left: 12px;
border-left: 4px solid #2563eb;
}
.entry-content h3 {
font-size: 18px;
margin: 1.6em 0 .6em;
}
.entry-content ul,
.entry-content ol {
margin: 0 0 1.2em 1.4em;
padding: 0;
}
.entry-content li {
margin-bottom: .4em;
}
.entry-content img {
max-width: 100%;
height: auto;
border-radius: 6px;
}
.entry-content figcaption,
.wp-caption-text {
font-size: 13px;
color: #7a8288;
text-align: center;
margin-top: .5em;
}
.entry-content pre {
background: #1e2227;
color: #e6e6e6;
padding: 16px;
border-radius: 6px;
overflow-x: auto;
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
font-size: 14px;
line-height: 1.6;
}
.entry-content blockquote {
border-left: 4px solid #d1d5db;
margin: 1.5em 0;
padding: .5em 1em;
color: #5b636b;
background: #f8fafc;
}
@media (max-width: 640px) {
.entry-content { font-size: 15px; }
.entry-content h2 { font-size: 19px; }
}
步骤 3：约束编辑器可选字号与颜色。 加上 disable-custom-font-sizes 与调色板限制，从源头避免风格跑偏。
add_theme_support( 'disable-custom-font-sizes' );
add_theme_support( 'editor-color-palette', array(
array( 'name' => '主色', 'slug' => 'primary', 'color' => '#2563eb' ),
array( 'name' => '强调', 'slug' => 'accent', 'color' => '#f59e0b' ),
array( 'name' => '正文', 'slug' => 'text', 'color' => '#2c3033' ),
) );
add_theme_support( 'disable-custom-colors' );
步骤 4：给代码块统一加语言标签。 用前端脚本读取 class="language-xxx" 并在右上角显示语言名，比手动写更可靠。
document.addEventListener( 'DOMContentLoaded', function () {
document.querySelectorAll( '.entry-content pre > code' ).forEach( function ( code ) {
const match = code.className.match( /language-([a-z0-9+#-]+)/i );
if ( ! match ) {
return;
}
const pre = code.parentNode;
pre.style.position = 'relative';
const label = document.createElement( 'span' );
label.className = 'code-lang';
label.textContent = match[1];
pre.appendChild( label );
} );
} );
步骤 5：制定一份写作时的自检清单。 发布前逐条过：小标题 3–6 个且层级不跳级、单段不超过 5 行、并列项用列表、每张图有图注、代码块标注语言、全文至少一处表格或引用。
常见踩坑
- 只用加粗代替小标题，读者无法扫描文章结构，搜索引擎也拿不到层级。
- 段落之间用
<br>空行，主题换肤后间距全部乱掉（应靠p的 margin 控制）。 - 图片上传原图，单张 3MB，移动端加载十几秒。
- 代码块用了浅灰底浅灰字，对比度不足，手机上看不清。
- 表格列数过多在手机上撑破容器，页面出现横向滚动条。
- 案例：某博主在编辑器里用”标题 4″当正文小标题、用”标题 5″当次级小标题，全站 60 篇文章层级从 H4 起步。SEO 插件提示”缺少 H2″，结构化数据里也没有章节锚点。批量替换 HTML 后，Google 搜索结果里才出现”跳至章节”的锚点链接。
- 复制 Word 内容直接粘贴，带入大量内联样式和
。 - 编辑器样式没配，后台看到的是窄栏无样式，前台却是宽栏，行宽判断失真。
总结
排版的验收标准很朴素：把文章页面缩到手机宽度截一张图，看行宽是否在 30–40 字之间、图片是否溢出、代码块是否可读。行动清单：① 全文只一个 H1，正文从 H2 起且层级连续；② 段落 3–5 行；③ 前后台共用一份内容样式；④ 限制编辑器字号与颜色选项；⑤ 图片统一宽度并配图注；⑥ 代码块标注语言且可横向滚动。排版之外，配合 博客归档页与标签体系设计、个人博客内容定位 与 WordPress 图片优化 一起做，效果更完整。
