首先对于B2Pro主题的经典编辑器用户来说，后台插入代码真的费劲，因为主题已经不再对经典编辑器做更好的适配，区块编辑器已成主流，因此经典编辑器的菜单栏根本没有插入代码的按钮，只能手打标签或者代码模式点按标签按钮。
本教程旨在解决 WordPress 经典编辑器插入代码时的常见痛点，其他主题也可使用：
- 代码不换行：长代码会把页面撑变形。
- 空行丢失：代码中间的空行在保存后消失。
- 标签混乱：搞不清什么时候用 <code>，什么时候用 <pre>。
- 我们将通过开发一个简单的 TinyMCE 插件，实现：点击按钮弹出窗口。
- 默认模式：生成 <pre><code>…</code></pre>，完美保留代码空行和格式（用于代码高亮插件）。
- 普通模式：生成 <code>…</code>，自动处理换行符，防止代码变成一行（用于简短代码）。
- 自动转义：自动将代码中的 < > 等符号转义为 HTML 实体，防止代码被浏览器执行。
添加教程
第一步：修改 functions.php 注册插件
在子主题的 functions.php 文件最末尾（?> 之前）添加以下代码。
这段代码的作用是告诉 WordPress：“我要加载一个 TinyMCE 插件，并且在工具栏上加一个按钮”。
/**
* 为经典编辑器添加“插入代码”按钮
*/
// 1. 注册 TinyMCE 插件 JS 文件
add_filter('mce_external_plugins', 'chunnel_register_code_plugin');
function chunnel_register_code_plugin($plugins) {
$plugins['chunnel_code'] = get_stylesheet_directory_uri() . '//cdn.chunnel.cn/Assets/js/tinymce-code.js';
return $plugins;
}
// 2. 在工具栏第一行添加按钮
add_filter('mce_buttons', 'chunnel_add_code_button');
function chunnel_add_code_button($buttons) {
array_push($buttons, 'chunnel_code');
return $buttons;
}第二步：创建 JS 交互逻辑文件
这是功能的核心。在子主题目录下新建文件：
/b2child/Assets/js/tinymce-code.js
如果 Assets 或 js 文件夹不存在，请先自行创建。
将以下代码复制进去：
(function() {
tinymce.create('tinymce.plugins.ChunnelCode', {
init: function(editor, url) {
// 添加工具栏按钮
editor.addButton('chunnel_code', {
title: '插入代码片段',
text: '[Code]', // 按钮显示的文字
icon: 'code', // 使用 TinyMCE 自带的 code 图标
onclick: function() {
// 打开弹窗
editor.windowManager.open({
title: '插入代码',
body: [
{
type: 'textbox',
name: 'code_content',
label: '请粘贴代码',
multiline: true,
minWidth: editor.getParam('code_dialog_width', 600),
minHeight: editor.getParam('code_dialog_height', 400),
spellcheck: false, // 关闭拼写检查
style: 'font-family: Consolas, Monaco, monospace; font-size: 14px;'
},
{
type: 'checkbox',
name: 'use_pre',
label: '启用代码高亮 (<pre><code>)',
checked: true // 默认选中
}
],
onsubmit: function(e) {
var rawCode = e.data.code_content;
// 1. 移除首尾的空白行（防止上下多余的空行）
rawCode = rawCode.replace(/^\n+|\n+$/g, '');
// 2. HTML 实体转义（关键！防止 < > 被浏览器解析）
var escapedCode = rawCode
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
var html = '';
// 3. 根据勾选状态包裹标签
if (e.data.use_pre) {
// 模式 A：<pre><code>...</code></pre>
// 保留换行符 \n，HTML 的 <pre> 标签会自动识别换行并显示
// 注意：如果你的代码高亮插件用的是 class="prism" 或 "hljs"，请修改下面的 prettyprint linenums，此处为B2主题后台高亮设置，所属类名linenums
html = '<pre class="prettyprint linenums"><code>' + escapedCode + '</code></pre>';
} else {
// 模式 B：<code>...</code>
// <code> 是行内元素，不识别 \n。
// 为了适配“代码换行”和“中间空行”，我们把 \n 替换成 <br>
var visualCode = escapedCode.replace(/\n/g, "<br>");
html = '<code>' + visualCode + '</code>';
}
// 4. 插入到编辑器
editor.insertContent(html);
}
});
}
});
},
createControl: function(n, cm) {
return null;
},
getInfo: function() {
return {
longname: 'Chunnel Insert Code',
author: 'Chunnel',
version: '1.0'
};
}
});
// 注册插件
tinymce.PluginManager.add('chunnel_code', tinymce.plugins.ChunnelCode);
})();注意：如果你的网站使用的是 Prism.js 或 Highlight.js 等高亮插件，请将代码中的 prettyprint 替换为你插件对应的类名（如 language-php、hljs 等）。
使用方法与效果
清理缓存：清理浏览器缓存或强制刷新（Ctrl+F5）。
找到按钮：进入后台 -> 文章 -> 写文章。在经典编辑器的第一行工具栏，你会看到一个名为 [Code] 的按钮。
插入代码：
点击按钮，弹出窗口。
粘贴你的代码。
默认勾选状态（适用于大段代码）：
将生成 <pre class=”prettyprint linenums”><code>…</code></pre>。
即使代码中间有空行，保存后也会完美保留。
取消勾选状态（适用于简短文字内的代码）：
将生成 <code>…</code>。
程序会自动将回车换行符转换为 <br>，防止代码变成一行，保持可读性。
发布：点击插入按钮后，代码会按照你设定的格式进入编辑器，发布到前台即可完美展示。
常见问题
- Q: 我点击按钮没反应？
- A: 请检查是否安装了“经典编辑器”插件，或者主题设置里是否切换为了古腾堡编辑器。此功能仅适用于经典编辑器。
- Q: 我的前台代码没有高亮颜色？
- A: 此教程只负责生成正确的 HTML 结构。前台高亮需要你额外安装代码高亮插件（如 WP-GeSHi-Highlight、Prism.js 等）。如果你用的是 Prism，记得把第二步 JS 里的 prettyprint 改成 language-xxx。
© 版权声明
本文采用 知识共享署名-非商业性使用 4.0 国际许可协议（CC BY-NC 4.0） 进行许可
转载必须 注明原作者+原文链接，不得篡改来源
仅限非商业用途，禁止用于盈利性场景（广告/付费专栏等）
可修改衍生，衍生作品需同步遵循本协议
不得删除或修改本文版权声明及核心信息
本站部分文章可能为网络转载，转载已尽力标注原作者及来源，旨在分享优质内容；若涉及版权争议或侵权，请联系我们及时删除，感谢理解与配合。
商用需授权 | 官方协议：CC BY-NC 4.0 全文
