在 WordPress 中,你可以通过一些方法来强化和自定义默认编辑器(通常是 TinyMCE 编辑器)的快速工具栏(工具按钮)。

通过这些方法,你可以增加、删除或修改工具栏中的按钮,甚至添加自定义按钮。

常见方式

1. 使用 TinyMCE 插件进行工具栏定制

WordPress 默认使用 TinyMCE 编辑器,你可以通过 functions.php 文件或插件自定义其工具栏按钮。

添加自定义按钮到工具栏

你可以通过 mce_buttonsmce_buttons_2 过滤器来添加或移除按钮。这些过滤器可以让你指定哪些按钮出现在工具栏的主区域或第二区域。

functions.php 中添加以下代码:

function custom_tinymce_buttons($buttons) {
// 这是工具栏 1
array_push($buttons, ‘separator’, ‘fontselect’, ‘fontsizeselect’);
return $buttons;
}
add_filter(‘mce_buttons’, ‘custom_tinymce_buttons’);

function custom_tinymce_buttons_2($buttons) {
// 这是工具栏 2
array_push($buttons, ‘separator’, ‘alignleft’, ‘aligncenter’, ‘alignright’);
return $buttons;
}
add_filter(‘mce_buttons_2’, ‘custom_tinymce_buttons_2’);

这个例子在第一个工具栏(mce_buttons)中添加了字体选择器和字体大小选择器,在第二个工具栏(mce_buttons_2)中添加了对齐按钮。

解释:

separator 是一个分隔符,用于在工具栏按钮之间插入空白空间或视觉分隔,目的是让按钮组看起来更加有序和易于区分。

2. 自定义编辑器按钮(添加自定义功能)

如果你希望添加完全自定义的按钮(例如:插入短代码、插入特定的 HTML、或执行一些 JavaScript 代码),你可以通过 TinyMCE 插件 API 来实现。

以下是一个在编辑器工具栏中添加自定义按钮的例子:

function custom_add_tinymce_button($buttons) {
// 在按钮列表中加入自定义按钮
array_push($buttons, ‘separator’, ‘my_custom_button’);
return $buttons;
}
add_filter(‘mce_buttons’, ‘custom_add_tinymce_button’);

// 定义自定义按钮的功能
function custom_tinymce_button_script($init_array) {
$init_array[‘setup’] = ‘function(editor) {
editor.addButton(“my_custom_button”, {
text: “My Button”,
icon: false,
onclick: function() {
editor.insertContent(“[my_custom_shortcode]”);
}
});
}’;
return $init_array;
}
add_filter(‘tiny_mce_before_init’, ‘custom_tinymce_button_script’);

上面的代码实现了一个名为 “My Button” 的按钮,点击该按钮会在编辑器中插入 [my_custom_shortcode] 短代码。你可以根据需要修改按钮的功能。

3. 使用插件自定义编辑器

如果你不想手动编辑代码,WordPress 也有一些插件可以帮助你轻松定制编辑器工具栏:

  • TinyMCE Advanced:这个插件让你通过图形界面自定义编辑器的工具栏,选择和排序按钮,甚至创建新的工具栏。它非常适合不熟悉代码的用户。

  • WP Edit:另一个功能强大的插件,允许你全面控制编辑器的工具栏、添加自定义按钮,并支持高级功能。

 

4. 自定义编辑器的样式

你还可以通过为编辑器自定义样式来加强编辑体验。

例如,你可以为编辑器添加自定义的 CSS 样式,使编辑器内的内容呈现特定的格式。

function custom_editor_styles() {
add_editor_style(‘path/to/your/custom-style.css’);
}
add_action(‘admin_init’, ‘custom_editor_styles’);

5. 修改编辑器配置

你可以进一步调整编辑器的行为。

例如,通过 tiny_mce_before_init 过滤器,可以修改 TinyMCE 编辑器的初始化配置,启用或禁用一些功能。

function modify_tinymce_init($init_array) {
// 启用一些额外的功能或禁用不需要的功能
$init_array[‘plugins’] = ‘fullscreen,media,link’; // 启用全屏、媒体和链接插件
return $init_array;
}
add_filter(‘tiny_mce_before_init’, ‘modify_tinymce_init’);

作者 admin

百度广告效果展示