WordPress 编辑器 怎么添加 自定义按钮
为了方便想给编辑器添加一个h2的按钮
网上的方法
WordPress 6.0版 不适用
针对在 WordPress 6.0 中为编辑器添加自定义 h2 按钮的需求，根据不同的编辑器类型提供两种解决方案：
一、经典编辑器（TinyMCE）增强方案
（适用于使用 Classic Editor 插件的场景）
// 在主题的 functions.php 中添加以下代码
add_filter('mce_buttons', 'custom_tinymce_buttons');
add_filter('mce_external_plugins', 'custom_tinymce_plugins');
function custom_tinymce_buttons($buttons) {
array_push($buttons, 'h2_button');
return $buttons;
}
function custom_tinymce_plugins($plugin_array) {
$plugin_array['h2_button'] = get_stylesheet_directory_uri() . '/h2-button.js';
return $plugin_array;
}
// 创建主题目录下的 h2-button.js 文件
(function() {
tinymce.PluginManager.add('h2_button', function(editor, url) {
editor.addButton('h2_button', {
title: '插入 H2 标题',
icon: 'dashicon dashicons-editor-textcolor',
onclick: function() {
editor.formatter.toggle('h2');
editor.fire('change');
}
});
});
})();
二、古腾堡块编辑器方案
（适配 WordPress 6.0+ 的现代开发方式）
// 创建独立插件或在主题中注册脚本
wp.domReady(() => {
wp.richText.registerFormatType('custom-h2', {
title: 'H2 标题',
tagName: 'h2',
className: null,
edit: ({ value, onChange }) => {
const onToggle = () => {
onChange(wp.richText.toggleFormat(value, {
type: 'custom-h2'
}));
};
return (
<wp.blockEditor.RichTextToolbarButton
icon="editor-textcolor"
title="H2 标题"
onClick={onToggle}
isActive={value.activeFormats.some(format => format.type === 'custom-h2')}
/>
);
}
});
});
实现要点：
1. 脚本需通过 wp_enqueue_script 正确加载
2. 确保依赖项包含：wp-element, wp-rich-text, wp-block-editor
3. 推荐创建独立插件以保证更新安全性
三、通用优化建议
1. 样式适配：添加以下 CSS 保证编辑区视觉统一
.editor-styles-wrapper h2 {
font-size: 24px;
margin: 1.5em 0 0.8em;
line-height: 1.3;
}
2. 快捷键支持：可通过注册快捷键提升编辑效率
3. 内容验证：建议添加 sanitize_callback 确保标签安全
注意事项：
1. 修改前务必创建完整站点备份
2. 代码需要根据具体主题结构调整资源路径
3. 推荐在子主题中实施修改以避免更新覆盖
4. 块编辑器方案需要 WordPress 5.0+ 环境支持
如需可视化操作方案，可考虑通过 DZ 插件网（www.dz-x.net）获取跨平台编辑器增强组件，部分解决方案已适配最新 WordPress 核心架构。
-- 本回答由 人工智能 AI智能体 生成，内容仅供参考，请仔细甄别。
页:
[1]