WP笔记

为WordPress默认编辑器添加自定义按钮

WordPress的默认编辑器是TinyMCE,TinyMce本身是款很强大的编辑器,只是WP中并没有开启它的全部功能。这不是坏事,并不是所有功能都是你需要的,你需要的可能也不在其中。学会如何开启高级功能,如何添加自定义按钮就够了。

开启高级功能很简单,装一些现成的插件,例如TinyMCE Advanced,本文主要介绍如何添加一些自定义按钮。

如何突出显示内容

在编辑文章时,有时候想让一部分内容突出显示,例如这部分是代码,或者这部分是引用,或者只是单纯的想搞个与众不同的样式。

用HTML,我们通常是这么实现的

<div class="div_style1">需要突出的内容 需要突出的内容 需要突出的内容</div>
<div class="div_style1">需要突出的内容 需要突出的内容 需要突出的内容</div>
<div class="div_style1">需要突出的内容 需要突出的内容 需要突出的内容</div>

 

在主题的style.css中为定义div_style1这个样式,例如这样

.div_style1 {
	background:#FFFFCC;
	border:1px solid #CCCCCC;
	color:#666666;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	padding:5px 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

产生的样式如下图所示

突出显示内容

你可以手动在编辑器中输入这段div结构,很不方便对不对。那么就把这段div代码定义为一个shortcode,当在编辑器输入

[mydiv]…[/mydiv]

被mydiv标签包围的部分就会被自动替换成<div class="div_style1">…</div>,如下图所示

insert shortcode

如何为TinyMCE添加自定义按钮

现在,我们要把“插入shortcode [mydiv]…[/mydiv]”的功能做成一个TinyMCE按钮,用鼠标选择要突出的内容,点击这个按钮,就能使内容自动被[mydiv]标签包围。步骤如下:

Step 1. 通过钩子函数添加我们的自定义功能

打开主题的functions.php文件,添加如下代码

//Hook into WordPress
add_action('admin_init', 'mydiv_button');

将自定义函数mydiv_button勾到admin_init这个钩子上,当用户访问管理员界面时,我们的自定义函数就会执行。

admin_init is triggered before any other hook when a user access the admin area

Step 2. 编写初始化函数mydiv_button

function mydiv_button() {

   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
     return;
   }

   if ( get_user_option('rich_editing') == 'true' ) {
     add_filter( 'mce_external_plugins', 'add_plugin' );
     add_filter( 'mce_buttons', 'register_button' );
   }
}

这段函数的大体意思如下:

  • 检测用户是否有编辑posts或者page的权限,如果没有,停止执行,返回
  • 将我们的自定义函数挂载到两个钩子函数上(mce_external_plugins和mce_buttons),这两个钩子是WordPress为TinyMCE初始化增加的,第一个钩子在TinyMCE加载插件时执行,第二个在编辑器按钮被加载之前执行。

If “get_user_option(‘rich_editing’)” 为 true, 这个条件使得按钮只在所见即所得模式下显示。

Step 3. 注册按钮 Register Button

function register_button( $buttons ) {
	array_push( $buttons, "|", "mydiv" );
	return $buttons;
}

向按钮数组中添加新的按钮,可以用“|”将按钮划分到一个新组中

Step 4. 注册TinyMCE Plugin

function add_plugin( $plugin_array ) {
   $plugin_array['mydiv'] = get_bloginfo( 'template_url' ) . '/myeditor/mybuttons.js';
   return $plugin_array;
}

将按钮插件的代码映射到主题目录/myeditor/mybuttons.js文件中,该文件的代码如下所示

(function() {
    tinymce.create('tinymce.plugins.mydiv', {
        init : function(ed, url) {
            ed.addButton('mydiv', {
                title : 'My Div',
                image : url+'/mydiv.png',
                onclick : function() {
                     ed.selection.setContent('[mydiv]' + ed.selection.getContent() + '[/mydiv]');

                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('mydiv', tinymce.plugins.mydiv);
})();
  • 代码首先调用create函数创建一个新的TinyMCE Plugin,调用插件的名字和初始化函数
  • 在init函数中,ed指向编辑器的实例,url指向插件的地址,这里指向的是mybotton.js文件的地址
  • 通过onclick事件绑定按钮的响应时间,并通过setContent和getContent方法创建我们需要的格式
  • 最后,将我们的自定义插件添加到TinyMCE的Plugin Manager中,注意使用的名字,如果名字错误将导致按钮无法加载

image参数指定按钮的图片,该图片要放在与mybuttons.js相同的目录下,这里就是在myeditor文件夹下

Step 5.定义shortcode

//the shortcode
add_shortcode("mydiv","my_div");
function my_div( $atts, $content=null ) {
	return '<div class="div_style1">'.$content.'</div>';
}

这段代码只是简单的返回我们需要的结构,你可以做更复杂的处理。

Step 6.定义CSS Class

将文章开头的css代码拷贝到主题的style.css文件中,就大功告成了。在文章中编写内容,然后点击按钮,就可以加入shortcode,产生突出显示的效果。

添加按钮成功

选择按钮图标

很多网站提供png图标下载,例如

http://www.iconarchive.com

选择一款自己喜欢的图标,添加到TinyMCE中吧。

7条评论

    1. 博主,我发现一个错误。
      第二步中:
      Step 2. 编写初始化函数mydiv_button
      初始化函数 是不是写错呢?应该是
      function mydiv_button()

      1. 多谢你留言,让我又发现了一篇因代码高亮插件而悲剧了的文章,你说的对,我确实写错了,文章我更新了一下,这篇文章很久之前写的,那时候不明白更换代码高亮插件可以毁掉文章里的代码,现在写大段代码都尽量提供一个php文件下载。
        如果你有兴趣可以看下我另一篇关于定制tinyMCE的文章
        https://www.solagirl.net/how-to-customize-wp-tinymce.html

评论已关闭。