wordpress如何给编辑器增加自定义按钮？-自学控

什么是wordpress编辑器自定义按钮？就是编辑器切换到文本模式时，上面一排快捷输入按钮。小白也有使用一款免费的主题叫乐趣公园的git主题。他的编辑器自定义按钮相当多，多达几十个，简直让人眼光缭乱，给大家截图看一下：

不过太复杂了，也影响到写文章的速度，尤其才上手的时候，想要找某个快捷键，硬是半天找不到。自定义个7、8个常用的代码，还是可以的。

那么，怎么来给编辑器增加按钮呢？

1、在wordpress主题文件夹下打开function.php文件，在里面添加一个函数，代码如下：

//添加编辑器快捷按钮
add_action('admin_print_scripts', 'my_quicktags');
function my_quicktags() {
    wp_enqueue_script('my_quicktags', get_stylesheet_directory_uri() . '/js/my_quicktags.js', array(
        'quicktags'
    ));
};

2、在上面函数的路径“/assets/js/my_quicktags.js”下增加一个同名js文件“my_quicktags.js”。这个路径可以自由设置，代码相应更改即可。然后在这个js文件里添加快捷代码或者短语，下面是小白我常用的一些，大家可以参考：

QTags.addButton( 'h3', 'h3标签', "<h3>", "</h3>" );
QTags.addButton( 'h4', 'h4标签', "<h4>", "</h4>" );
QTags.addButton( 'pic', '插入图片', '<a href="url"><img class="aligncenter" src="url" alt="" /></a>');
QTags.addButton( 'hrU', '图片分隔线', '<p><img src="/wp-content/uploads/dw-uploads/hr_unique.jpg" title="图片分割线" alt="图片分割线" </p>' );
QTags.addButton( 'blueq', '蓝色引用', '<blockquote><span style="color: #0000ff;">','</span></blockquote>' );
QTags.addButton( 'redb', '红色加粗', '<strong><span style="color: #ff0000;">','</span></strong>' );
QTags.addButton( 'nextpage', '分页', '<!--nextpage-->' );
QTags.addButton( 'tixing', '播放提示', '<span style="color: #ff00ff;">（如若视频空白、无法播放，请点此：<a href="URL" target="_blank" rel="noopener">高清完整版</a>）</span>' );
QTags.addButton( 'cankao', '参考文章', '（详情参考这篇文章：<a href="URL" target="_blank" rel="noopener">参考文章</a>）' );
QTags.addButton( 'altsx', 'all属性', ' alt="data" ' );

大家可以根据上面的代码进行修改，diy自己想要的快捷功能。

另外一种方法：也可以将js代码写在functions.php里面，如下图：

// 添加HTML按钮
function appthemes_add_quicktags() {
?> 
<script type="text/javascript"> 
QTags.addButton( '按钮名字', '按钮名字', '\n代码开头', '代码结尾\n' ); //按钮实现的功能
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );