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

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

黄聪:如何给wordpress的编辑器添加一个自定义按钮,并且实现插入功能的更多相关文章

  1. rails使用bootstrap3-wysiwyg可视化编辑器并实现自定义图片上传插入功能

    之前在rails开发中使用了ckeditor作为可视化编辑器,不过感觉ckeditor过于庞大,有很多不需要的功能,而且图片上传功能不好控制不同用户可以互相删除图片,感觉很不好.于是考虑更改可视化编辑 ...

  2. 黄聪:实用WordPress SQL查询方法

    为所有文章和页面添加自定义字段 这段代码可以为WordPress数据库内所有文章和页面添加一个自定义字段. 你需要做的就是把代码中的‘UniversalCutomField‘替换成你需要的文字,然后把 ...

  3. 为jEasyUi的日期控件添加一个“清空”按钮----通过修改1.4的easyui.min.js

    为 jQuery EasyUI 1.4 的datebox或datetimebox添加一个清空按钮 使用场景:为用户指定了日期的格式,且日期可以为空 修改语言包easyui-lang-zh_CN.js ...

  4. 黄聪:让WordPress主题支持语言本地化(使用poedit软件实现中文翻译功能)

    如果你的WordPress主题要提交到WordPress官方主题库,使用者来自世界各地的多种语言,那么,你就要让你的WordPress主题支持语言本地化,方便使用者进行语言翻译和制作语言包. 让Wor ...

  5. UEditor百度编辑器,工具栏上自定义添加一个普通按钮

    添加一个名叫“hougelou”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“hougelou”字符串,然后找到labelMap数组,对 ...

  6. UEditor百度编辑器,工具栏自定义添加一个普通按钮

    根据网上前辈提供的,还真的不错,下面也整理一下 添加一个名叫“macros”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“macros” ...

  7. 黄聪:如何使用Add-on SDK开发一个自己的火狐扩展

    火狐开放了扩展的开发权限给程序员们,相信很多人都会希望自己做一些扩展来方便一些使用. 我最近做一些项目也需要开发一个火狐扩展,方便收集自己需要的数据,因此研究了几天怎么开发,现在已经差不多完成了,就顺 ...

  8. CKEditor在线编辑器增加一个自定义插件

    CKEditor是一个非常优秀的在线编辑器,它的前身就是FCKEditor,CKEditor据官方说是重写了内核的,但功能和性能比FCKEditor更为强大和优越.记得07年的时候第一次接触FCKEd ...

  9. Tkinter小技巧:如何为窗口右上角的‘x’添加一个自定义的响应函数

    不废话,直接上代码 import tkinter as tk from tkinter import messagebox main_window = tk.Tk() main_window.geom ...

随机推荐

  1. 微软.NET Core RC2正式发布,横跨所有平台

    .NET官方博客宣布了<Announcing .NET Core RC2 and .NET Core SDK Preview 1>,正式如期发布了.NET Core RC2, 现在可以放心 ...

  2. DB1:数据库的创建和文件的修改

    在SQL Server中,使用Create Database创建数据库,使用Alter Database命令,能够修改数据库的数据文件和日志文件. 一,创建数据库 1,在创建数据库时,最佳实践是: 创 ...

  3. [APUE]文件和目录(中)

    一.link.unlink.remove和rename 一个文件可以有多个目录项指向其i节点.使用link函数可以创建一个指向现存文件连接 #include <unistd.h> int ...

  4. 问题记录:EntityFramework 一对一关系映射

    EntityFramework 一对一关系映射有很多种,比如主键作为关联,配置比较简单,示例代码: public class Teacher { public int Id { get; set; } ...

  5. php报错 ----> Call to undefined function imagecreatetruecolor()

    刚才在写验证码的时候,发现报错,然后排查分析了一下,原来是所用的php版本(PHP/5.3.13)没有开启此扩展功能. 进入php.ini 找到extension=php_gd2.dll ,将其前面的 ...

  6. WebGIS中等值线前端生成绘制简析

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 等值线是GIS制图中常见的功能,一般有两种思路:一种是先进行插 ...

  7. [原] KVM 虚拟化原理探究(5)— 网络IO虚拟化

    KVM 虚拟化原理探究(5)- 网络IO虚拟化 标签(空格分隔): KVM IO 虚拟化简介 前面的文章介绍了KVM的启动过程,CPU虚拟化,内存虚拟化原理.作为一个完整的风诺依曼计算机系统,必然有输 ...

  8. 中国CIO最关心的八大问题(下)

    中国CIO最关心的八大问题(下) 从调研数据还可以看出,在企业级IT建设与投资上,CIO们并非是一群狂热的技术信徒,他们更多的是从企业发展阶段.信息化程度.技术成熟度.ROI等方面进行综合评估. 五. ...

  9. Java企业实训 - 01 - Java前奏

    前言: 虽然个人专攻.NET方向,不过由于个人是干教育行业的,方方面面的东西,不能说都必须精通,但肯定多少都会涉及到. 一个菜鸟学员,从啥都不会,经过一步步学习,最后到企业上手掌管一个模块甚至一个项目 ...

  10. 第11章 Linux服务管理

    1. 服务分类 (1)Linux的服务 ①Linux中绝大多数的服务都是独立的,直接运行于内存中.当用户访问时,该服务直接响应用户,其好处是服务访问响应速度快.但不利之处是系统中服务越多,消耗的资源越 ...