欢迎光临
我们一直在努力

WordPress 可视化编辑器添加自定义按钮

之前介绍了 wordpress文本编辑器快速插入短代码 和 wordpress文本编辑器添加按钮

不过一般来说我们常用的是可视化面板写作 而且像我分享php代码(<pre></pre>) 经常要在可视化和文本模式下进行切换 会经常出错

下文讲的是:在默认编辑器的可视化模式下添加自定义按钮

将以下代码复制到主题functions.php里面

1.创建按钮初始函数

add_action('init', 'custom_button');
function custom_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' );
}
}

2.注册按钮

function register_button( $buttons ) {
array_push( $buttons, "|", "video" ); //创建video按钮
array_push( $buttons, "|", "music" ); //创建music按钮,需要添加多个按钮以此形式添加
return $buttons;
}
function add_plugin( $plugin_array ) {
$plugin_array['video'] = get_bloginfo( 'template_url' ) . '/js/video.js'; //对应video按钮js
$plugin_array['music'] = get_bloginfo( 'template_url' ) . '/js/music.js'; //对应music按钮js ,按照本文教程创建相关js文件
return $plugin_array;
}

3.添加短代码

比方说我添加了个video的短代码 (短代码自己完善 这边只做参考)

add_shortcode("video","my_video");
function my_video( $atts, $content=null ) {
return '<div>'.$content.'</div>';
}

4.创建js文件

以创建video.js为例 将创建好的video.js,和video.png一同放进主题 js文件夹

(function() {
tinymce.create('tinymce.plugins.video', {
init : function(ed, url) {
ed.addButton('video', {
title : 'video按钮', //标题自拟
image : url+'/video.png', /图片放在主题js文件夹
onclick : function() {
ed.selection.setContent('');
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('video', tinymce.plugins.video);
})();

其他的js可以按此形式自己添加
当你完成以上步骤的时候 你就可以在可视化模式下看到你所创建的按钮了

 

 

窗外天空
关注公众号『窗外天空』

获取更多建站运营运维新知!
互联网创业、前沿技术......

赞(0) 打赏
文章名称:《WordPress 可视化编辑器添加自定义按钮》
文章链接:https://www.nixonli.com/15.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

请先暂停浏览器上的广告屏蔽插件,或者更换浏览器打开即可!