WordPress为自带编辑器添加自定义功能按钮

2025-09-30 14:38:44

1、WordPress默认的编辑器是TinyMCE编辑器,其提供可视化和html两种编辑模式。我们将从这两种模式介绍起。

WordPress为自带编辑器添加自定义功能按钮

WordPress为自带编辑器添加自定义功能按钮

1、HTML编辑模式下添加按钮,是比较简单的。

但每次编辑文章时,需要手动切换到HTML编辑模式下,

2、先使用FTP下载functions.php文件,使用专门的编辑软件打开php文件(注意不要使用记事本打开编辑,可能导致乱码)

WordPress为自带编辑器添加自定义功能按钮

3、// 添加HTML按钮

function appthemes_add_quicktags() {

?> 

<script type="text/javascript"> 

QTags.addButton( '按钮名字', '按钮名字', '\n代码开头', '代码结尾\n' ); //按钮实现的功能

</script>

<?php

}

add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

--------------------------------------------------------------------------------

把以上代码添加进去即可,你也可以根据以上格式修改自己需要的功能按钮键。需要注意的是一定是要在?>的前面加入。

WordPress为自带编辑器添加自定义功能按钮

4、然后上传functions.php文件。实现效果如图所示:

WordPress为自带编辑器添加自定义功能按钮

1、由于TinyMCE编辑器JS代码中已经集成了分页功能,我们要做的只是添加按钮即可。

2、TinyMCE编辑器JS源代码一般在/public_html/wp-includes/js目录下。你也可以自己在里面查询。根据源代码去添加自己需要功能。

WordPress为自带编辑器添加自定义功能按钮

3、题外话不说,依旧还是要打开functions.php文件。

4、// 编辑器加入分页按钮功能

add_filter('mce_buttons','wysiwyg_editor');

function wysiwyg_editor($mce_buttons) {

$pos = array_search('wp_more',$mce_buttons,true);

if ($pos !== false) {

$tmp_buttons = array_slice($mce_buttons, 0, $pos+1);

$tmp_buttons[] = 'wp_page';

$mce_buttons = array_merge($tmp_buttons, array_slice($mce_buttons, $pos+1));

}

return $mce_buttons;

}

--------------------------------------------------------------------------------

把以上代码添加进去即可,需要注意的是一定是要在?>的前面加入。

WordPress为自带编辑器添加自定义功能按钮

5、然后上传functions.php文件。实现效果如图所示:

WordPress为自带编辑器添加自定义功能按钮

1、依旧还是要打开functions.php文件。

2、add_filter( 'mce_external_plugins', 'add_plugin' );   

add_filter( 'mce_buttons', 'register_button' );   

function register_button( $buttons ) {   

    array_push( $buttons, "|", "myadvert" );    //添加 一个myadvert按钮   

    return $buttons;   

}   

function add_plugin( $plugin_array ) {   

   $plugin_array['myadvert'] = get_bloginfo( 'template_url' ) . '/js/myadve     rt.js';      //myadvert按钮的js路径   

   return $plugin_array;   

}  

--------------------------------------------------------------------------------

把以上代码添加进去即可,需要注意的是一定是要在?>的前面加入。如果你还需要添加其他按钮,可以直接在里面加入即可

WordPress为自带编辑器添加自定义功能按钮

3、准备JS文件,由于add_plugin函数中引入了js,根据路径创建好js文件,以myadvert.js为例

4、(function(tinymce) {   

    tinymce.create('tinymce.plugins.myadvert', { //注意这里有个 myadvert   

        init : function(ed, url) {   

            ed.addButton('myadvert', { //注意这一行有一个 myadvert   

                title : '隐藏',  

image : url+'/TIM.png', //注意图片的路径 url是当前js的路径   

                onclick : function() {   

                     ed.selection.setContent('[reply][/reply]'); //这里是你要插入到编辑器的内容,你可以直接写上广告代码  

                }   

            });   

        },   

     createControl : function(n, cm) {   

          return null;   

        },   

    });   

    tinymce.PluginManager.add('myadvert', tinymce.plugins.myadvert); //注意这里有两个 myadvert   

})(window.tinymce);  // JavaScript Document

--------------------------------------------------------------------------------

创建myadvert.js,添加以上代码。然后上次到指定路径下即可,包括按钮图标。

WordPress为自带编辑器添加自定义功能按钮

5、然后上传functions.php文件。实现效果如图所示:

WordPress为自带编辑器添加自定义功能按钮

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢