zoukankan      html  css  js  c++  java
  • 黄聪:如何给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);
    }

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

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

  • 相关阅读:
    Vue无缝滚动
    vue+Axios 实现路由拦截和登录拦截
    添加删除数组元素的方法
    日期时间相关
    Vue源码编译过程
    new关键字执行过程
    预解析
    echarts图表数据为空的时候不显示气泡
    arguments使用
    log4net介绍很全面
  • 原文地址:https://www.cnblogs.com/huangcong/p/4551206.html
Copyright © 2011-2022 走看看