导航菜单
路很长,又很短
博主信息
昵   称:Cocodroid ->关于我
Q     Q:2531075716
博文数:308
阅读量:826611
访问量:80952
至今:
×
云标签 标签球>>
云标签 - Su的技术博客
博文->>首页 博主的更多博文>>
wordpress教程 可视化编辑器添加自定义按钮
Tags : wordpress,自定义按钮发表时间: 2015-07-30 19:57:28

之前介绍了 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('[v ideo]' + ed.selection.getContent() + '[/v ideo]');
                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('video', tinymce.plugins.video);
})();

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


转自:http://www.iippcc.com/


打赏
打赏
关注公众号
公众号
类别:网站| 阅读(1019)| 赞 (0)
评论
暂无评论!
发表评论
昵  称:

验证码:

内  容:

    同时赞一个 赞