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

后台文章编辑框添加按钮，可以通过下面的代码实现 。把这个代码放到主题functions.php文件里。

//增强编辑器开始 ，将代码放到function.php文件中

function add_editor_buttons($buttons) {

$buttons[] = 'fontselect'

$buttons[] = 'fontsizeselect'

$buttons[] = 'outdent'

$buttons[] = 'indent'

$buttons[] = 'copy'

$buttons[] = 'paste'

$buttons[] = 'cut'

$buttons[] = 'backcolor'

return $buttons

}

add_filter("mce_buttons_3", "add_editor_buttons")

具体添加哪些按钮，可参照下面这些。wordpress编辑器按钮调用的Key：

1.剪切（cut）复制（copy）粘贴（paste）撤销（undo）重做（redo）居中（justifycenter）

2.加粗（bold）斜体（italic）左对齐（justifyleft）右对齐（justfyright）

3.两端对齐（justfyfull）插入超链接（link）取消超链接（unlink）插入图片（image）

4.清除格式（removeformat）下划线（underline）删除线（strikethrough）

5.锚文本（anchor）新建文本（newdocument）

6.字体颜色（forecolor）字体背景色（backcolor）

7.格式选择（formmatselect）字体选择（fontselect）字号选择（fontsizeselect）

8.样式选择（styleselect）无序列表（bullist）编号列表（numlist）

9.减少缩进（outdent）缩进（indent）帮助（wp_help）

10打开HTML代码编辑器（code）水平线（hr）清除冗余代码（cleanup）

11.上标（sub）下标（sup）特殊符号（charmap）插入more标签（wp_more）

12.插入分页标签（wp_page）

13.隐藏按钮显示开关（wp_adv）

14.隐藏按钮区起始部分（wp_adv_start）

15.隐藏按钮区结束部分（wp_adv_end）

16.拼写检查（spellchecker）

在 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

}

})

wp独立站安装立即购买按键方法如下。

1、使用WPSimplePay添加立即购买按钮(无需电子商务插件)，可以使用WPSimplePay将简单的立即购买按钮添加到任何页面、帖子或小部件就绪区域。

2、WPSimplePay允许您向任何WordPress博客或网站添加直接购买按钮。

---