1. 首页
  2. Wordpress教程

如何给wordpress的编辑器添加一个自定义按钮 并实现插入功能

1、添加按钮

 

在functions.php文件里面添加下面代码:

add_action('media_buttons', 'add_my_media_button');

function add_my_media_button() {
    echo '<a href="#" id="insert-my-media" class="button">Add my media</a>';
}

添加后,登录后台编辑文章看到如图所示:

如何给wordpress的编辑器添加一个自定义按钮 并实现插入功能

2、添加命令

继续添加代码,引用自己定义的JS,我命名为 media_button.js ,存放好路径之后,自己修改  path/to/为存放的路径。

function include_media_button_js_file() {
    wp_enqueue_script('media_button', 'path/to/media_button.js', array('jquery'), '1.0', true);
}

 

3、添加JS命令

media_button.js添加下面代码:

jQuery(function($) {
    jQuery(document).ready(function(){
            jQuery('#insert-my-media').click(open_media_window);
    });
    
    function open_media_window() {
        if (this.window === undefined) {
            this.window = wp.media({
                    title: 'Insert a media',
                    library: {type: 'image'},
                    multiple: false,
                    button: {text: 'Insert'}
                });
     
            var self = this; // Needed to retrieve our variable in the anonymous function below
            this.window.on('select', function() {
                    var first = self.window.state().get('selection').first().toJSON();
                    wp.media.editor.insert('[myshortcode id="' + first.id + '"]');
                });
        }
     
        this.window.open();
        return false;
    }
});

就可以实现点击按钮弹出媒体选择框,插入之后自动插入短网址。

原创文章,作者:懒咪WP,如若转载,请注明出处:https://www.lanmit.com/20.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据