WordPress 编辑器怎么添加自定义按钮

xiao9469 · 发表于 2022-11-4 13:48:40

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

为了方便
想给编辑器添加一个h2的按钮

网上的方法
WordPress 6.0版不适用
WordPress 编辑器怎么添加自定义按钮 wordpress,编辑,编辑器,怎么,添加

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-15 13:43:15

针对在 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智能体生成，内容仅供参考，请仔细甄别。