如何给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;
    }
});
复制代码

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




本文转自黄聪博客园博客,原文链接:http://www.cnblogs.com/huangcong/p/4551206.html,如需转载请自行联系原作者

相关文章
程序技术好文:自定义GridLookUpEdit编辑器
程序技术好文:自定义GridLookUpEdit编辑器
|
4月前
|
JavaScript 开发工具 C++
探索 Visual Studio Code:开发者的多功能编辑器
Visual Studio Code(VS Code)是由微软开发的一款免费、开源的轻量级代码编辑器,支持 Windows、Linux 和 macOS。它内置了对多种编程语言的支持,并提供了代码高亮、智能补全、调试和 Git 集成等功能。VS Code 的强大之处还在于其丰富的插件生态系统,通过安装插件可以进一步扩展功能。此外,用户还可以通过定制设置来自定义编辑器的行为和外观,从而提升开发效率。本文将详细介绍 VS Code 的核心特性、推荐插件及定制化设置方法。
|
3月前
|
前端开发 开发者
大模型代码能力体验报告之贪吃蛇小游戏《二》:OpenAI-Canvas-4o篇 - 功能简洁的文本编辑器加一点提示词语法糖功能
ChatGPT 的Canvas是一款简洁的代码辅助工具,提供快速复制、版本管理、选取提问、实时编辑、代码审查、代码转写、修复错误、添加日志和注释等功能。相较于 Claude,Canvas 更加简单易用,但缺少预览功能,适合一般开发者使用。
|
5月前
|
缓存 前端开发
ProFlow 流程编辑器框架问题之创建一个自定义节点如何解决
ProFlow 流程编辑器框架问题之创建一个自定义节点如何解决
60 1
|
5月前
|
自然语言处理 机器人 API
【Azure 机器人】微软Azure Bot 编辑器系列(4) : 使用语言生成功能[LG: Language Generation] (The Bot Framework Composer tutorials)
【Azure 机器人】微软Azure Bot 编辑器系列(4) : 使用语言生成功能[LG: Language Generation] (The Bot Framework Composer tutorials)
|
5月前
|
自然语言处理 机器人 API
【Azure 机器人】微软Azure Bot 编辑器系列(3) : 机器人对话流中加入帮助和取消按钮功能 (The Bot Framework Composer tutorials)
【Azure 机器人】微软Azure Bot 编辑器系列(3) : 机器人对话流中加入帮助和取消按钮功能 (The Bot Framework Composer tutorials)
|
6月前
|
搜索推荐
wordpress网站添加一个临时维护功能
wordpress网站添加一个临时维护功能
58 3
|
6月前
自定义WordPress首页显示文章数
自定义WordPress首页显示文章数
26 1
|
7月前
|
UED
ONLYOFFICE 桌面编辑器 8.1重磅来袭:全新功能提升您的办公效率
ONLYOFFICE 桌面编辑器 8.1重磅来袭:全新功能提升您的办公效率
|
6月前
|
PHP 数据安全/隐私保护
WordPress网站添加输入密码才能访问功能
为你的网站添加 php 输入密码访问网站功能,这个功能其实很简单,在应用中的场景也是往往为内部或是个人使用的页面里面,在登陆的时候可以弹出一个窗口,做隐私保护,以下的代码可以满足大家的这个功能,同时可以在代码里自定义密码。同时只要在现有代码的上下添加好加密的代码就可以。记得要调整一下默认密码。不然会被入侵的。
76 0