为了达到更好的体验效果,请使用Chrome、Firefox等现代浏览器浏览本站!

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

wordpress 助推站长 2938℃ 5评论

一般情况下我们希望在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>';
}

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);
}

以上代码定义了JS的存放路径。

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;
    }
});

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

原文 地址:http://www.cnblogs.com/huangcong/p/4551206.html

转载请注明:众推不靠谱 » 给wordpress的编辑器添加一个自定义按钮,并且实现插入功能

喜欢 (1)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5)个小伙伴在吐槽
  1. 如何设置段代码
    光头强2015-07-26 19:42 回复
  2. G头像显示有问题。请贵站及时处理。
    小叶2015-07-26 13:33 回复
    • 嗯 是滴,有时间处理一下,谢谢
      zoo2015-07-26 16:05 回复
  3. 来回访来了。博客不错。继续加油!已经挂上贵站链接
    小叶2015-07-26 13:32 回复
    • 欢迎欢迎,谢谢 :mrgreen:
      zoo2015-07-26 18:17 回复