wordpress如何给编辑器增加自定义按钮?

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

不过太复杂了,也影响到写文章的速度,尤其才上手的时候,想要找某个快捷键,硬是半天找不到。自定义个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' );

未经允许不得转载:自学控 - 自己建站也轻松 » wordpress如何给编辑器增加自定义按钮?

分享到: 更多 (0)
avatar
自己建站,一点一滴积累经验。

自学控[zixuekong.com]

关于本站
切换注册

登录

忘记密码 ?

切换登录

注册