引言: 选择经典编辑器而非Elementor的理由
有些时候，内容编辑的目标非常明确：快速、稳定、可控地完成排版，并在关键字句上做醒目的强调。经典编辑器（Classic Editor）与TinyMCE的组合，正适合这类工作节奏。它的界面简洁，命令直观，输出的HTML结构清晰，不会引入过多与内容无关的标记，更便于长期维护和全站统一风格。
与此对比，Elementor侧重页面搭建与布局设计，适合复杂的落地页或视觉化模块。当你只想在段落中高亮一句话，用它就显得“动静太大”。编辑者往往只需要一个可靠的“样式下拉菜单”，几个定制的文字样式即可。
写作优先, 干净可靠。
如果你的站点是多作者协作、重文本内容、强调可读性和可维护性，那么选择经典编辑器，能让文本样式的管理回归简单而一致的轨道。安装官方的Classic Editor插件后，还可以继续使用TinyMCE的扩展能力，实现“GB Highlight”这类统一的高亮格式。
方案概览: 用Code Snippets为TinyMCE添加自定义样式
思路很直接：通过WordPress提供的过滤器，向TinyMCE的初始化配置中添加自定义styleformats，同时确保工具栏出现“样式”下拉菜单。为避免修改主题文件，可用Code Snippets插件集中管理代码片段，启用与停用都更便利。
styleformats的工作原理与数据结构
styleformats是TinyMCE识别的样式定义集合。它接收一个JSON字符串，内部包含若干条样式对象，每条对象描述一个可用的“样式项”：显示名称（title）、应用方式（inline或block）、附加类名（classes）、是否包裹元素（wrapper）。
例如，一个名为“GB Highlight”的样式，指定inline为mark，classes为gb-highlight，表示选中文本会被渲染为<mark class=”gb-highlight”>…</mark>，保持行内语义，不会打断段落结构。这种方式语义清楚，检索方便，也便于CSS集中控制视觉效果。
显示Styles下拉菜单的两个关键过滤器
要让TinyMCE识别样式定义，需要通过tiny_mce_before_init把styleformats写入初始化数组；要让编辑器出现“样式”下拉菜单，需要通过mce_buttons_2把styleselect按钮插入到第二行工具栏里。这两个环节缺一不可。
对应地，代码结构一般包含两段：一段负责注入styleformats，另一段把styleselect推入按钮数组。这样，在可视化编辑器的工具栏里就能看到“样式”，点开后即可选择“GB Highlight”。
操作步骤: 添加GB Highlight代码片段
在Code Snippets中新建并启用片段
步骤概览如下：
1) 安装并启用Code Snippets插件。
2) 后台进入“Snippets”→“Add New”，为片段命名，例如“GB Highlight”。
3) 将两段函数与过滤器注册的代码粘贴进去：一个函数enable_gb_highlight_style通过tiny_mce_before_init注入style_formats；另一个函数show_styleselect_dropdown通过mce_buttons_2在工具栏添加styleselect。
function enable_gb_highlight_style($init_array) {
$style_formats = [
[
'title' => 'GB Highlight',
'inline' => 'mark',
'classes' => 'gb-highlight',
'wrapper' => false,
],
];
$init_array['style_formats'] = json_encode($style_formats);
return $init_array;
}
add_filter('tiny_mce_before_init', 'enable_gb_highlight_style');
function show_styleselect_dropdown($buttons) {
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('mce_buttons_2', 'show_styleselect_dropdown');
4) 选择代码运行范围，通常选择“在后台运行”即可。
5) 保存并激活。
完成后，无需改动主题文件，也无需接触TinyMCE的底层打包。片段随时可停用或编辑。
检查可视化编辑器中的样式下拉菜单
打开任意文章或页面，确保处于“可视化”模式。第二行工具栏中应出现“样式”下拉菜单。光标置于正文，选中一段文字，打开下拉菜单，可以看到“GB Highlight”选项。若能看到并可正常应用，高亮功能的逻辑部分就正确了。
下一步是CSS。
视觉样式: 定义GB Highlight的CSS
在外观→自定义→额外CSS处，添加针对mark.gb-highlight的样式。例如：
mark.gb-highlight {
background-color: #fffa9e;
padding: 2px 4px;
border-radius: 3px;
font-weight: bold;
}
保存并发布。回到编辑器查看预览，文字应呈现柔和的黄色底色、微小内边距与圆角边界，更容易脱颖而出。
CSS属性逐项解析: 背景、内边距、圆角、 粗体
背景色background-color：fffa9e是一种偏浅的黄色，强调而不刺眼。你可以根据品牌色系进行微调，但应避免色彩太深导致文本难读。
内边距padding：2px 4px让背景块比文字略大，产生“浮起”的视觉效果，也防止背景紧贴字形边缘。
圆角border-radius：3px有助于减弱“硬边”的机械感，令高亮更友好。
字体weight：加粗可增强强调力度，尤其在浅色背景上更清晰。当然，如果主题正文已经偏粗，可移除加粗以保持统一。
更好的可读性与无障碍对比度建议
高亮不应牺牲可读性。建议进行颜色对比测试，确保文本与背景满足可读性门槛。参考WCAG的“对比度最低标准”。
相关规范可查阅W3C说明：WCAG 2.1 Contrast Minimum。若你的站点面向广泛用户，尤其需要考虑弱视用户的阅读体验。
使用技巧：在编辑器中高亮文本的最佳路径
选择与应用GB Highlight的实际流程
最稳妥的流程是：先完成段落撰写，再用鼠标选中关键词或关键短句，点击“样式”→“GB Highlight”。它会以内联方式包裹文本，不会破坏段落结构。
若与链接并存，通常先插入链接，再为这段文字应用“GB Highlight”。这样更直观，也能保持可点击区域与高亮区域一致。
清除样式与常见误操作的修正
误点了不想高亮的词句？选中后点击“清除格式”或再次从“样式”中切换，就能移除<mark>。若遇到嵌套或异常包裹，可切到“文本”模式，手动查看并删除多余的<mark class=”gb-highlight”>。
一个常见误操作是把高亮应用到整段甚至跨多个段落。请保持粒度适中，只包裹需要强调的短语。简洁更有效。
兼容与排错：常见问题清单
样式选项未出现的排查思路
先确认几点：
1) Code Snippets插件是否启用，相关片段是否激活。
2) 你正在使用经典编辑器界面，且用户资料中未禁用“可视化编辑器”。
3) 编辑器第二行工具栏可见。某些编辑器增强插件可能自定义了工具栏布局，检查是否把styleselect隐藏了。
4) 检查tiny_mce_before_init与mce_buttons_2过滤器是否被其他插件覆盖。可适当提高addfilter的优先级，例如20或更高。
5) 清理浏览器缓存与站点缓存，再次打开编辑页面。
与主题或插件冲突时的处理
若控制台有报错或按钮消失，逐个停用可疑插件测试。与编辑器增强类插件（如高级TinyMCE扩展）同时使用时，可能重复定义styleformats。可在该插件的设置中合并或关闭相应选项，或仅保留一方的配置。
主题层面，若后端注入过自定义TinyMCE设置，也可能产生覆盖。检查主题的functions.php是否存在相关过滤器，协调为统一输出。
与Gutenberg并存的设置提示
如果站点启用了区块编辑器，也可以安装Classic Editor插件并将“默认编辑器”设为“经典编辑器”，或在区块编辑器中插入“经典”区块使用TinyMCE。在“经典”区块内，样式下拉菜单同样可以显示并生效。
更多信息可参考官方文档：Block Editor 文档 与 Classic Editor 插件。
进阶扩展：自定义更多高亮风格
多色高亮与命名规范示例
可以一次性定义多种高亮方案，例如“GB Highlight Yellow”“GB Highlight Green”“GB Highlight Blue”，通过不同classes指向不同CSS：
.gb-highlight–yellow，.gb-highlight–green，.gb-highlight–blue
命名上建议采用统一前缀gb-highlight，后加语义性后缀，便于团队识别与维护。styleformats中每个title清晰标注颜色名称，更友好。
按角色或文章类型限定生效
如果只想在某些文章类型或特定角色下启用，可以在注册过滤器前做条件判断。例如仅在post类型启用，或仅对具备编辑权限的用户开放。这样能避免在不需要的后台界面里增加额外按钮。
安全与性能：实践建议
使用Code Snippets的优缺点与备份策略
使用插件集中管理片段，带来的好处是可视化、可开关、可导出。代价是多一个插件依赖，并且片段存储在数据库中。建议定期导出Snippets备份，在上线前先于测试环境验证。
大型站点可以把片段版本化管理，必要时配合变更记录。遇到问题随时停用片段，影响面小。
把代码放入子主题functions的替代方案
若不希望依赖插件，也可把两段函数与过滤器注册写入子主题的functions.php。注意只在后台加载相关逻辑，并避免与主题或其他插件重复定义。更新主题时，子主题不会被覆盖，更安全。
子主题与functions.php的官方资料可参考：Child Themes 与 Theme Functions。
内容策略：高亮对阅读与SEO的影响
强调关键信息的节奏控制
高亮是视觉引导。它引导扫读者迅速定位要点，提高段落的“可扫读性”。适合标出结论、数据、术语与行动提示。常规密度可控制在每屏1-3处，越关键越靠前。
出于展示目的，本文有5处高亮，密度略高，实操中可酌处。
短句更适合高亮。不要把整段都打成色块，这会破坏阅读节奏。把高亮放在段落核心位置，读者会自然停顿并吸收信息。
避免过度高亮的写作准则
过度使用会造成视觉疲劳，甚至干扰链接识别。若同时存在链接与高亮，保持色彩与下划线的区分，避免用户误判。标题通常不建议高亮，以免与列表或导航样式冲突。
在全站层面，统一颜色语义。例如，黄色用于提示，绿色用于成功或通过，蓝色用于信息性标注。统一的语义习惯能让读者更快理解内容层级。
参考与延伸阅读
WordPress Classic Editor与TinyMCE指南
Classic Editor 插件
tinymcebeforeinit 钩子
mcebuttons2 钩子
TinyMCE styleformats 文档
Code Snippets插件与安全实践
Code Snippets 插件
WordPress 备份基础
WordPress 官方文档