在WordPress可视化编辑器里添加短代码按钮


给 WordPress 编辑器添加短代码,一般都在“文本”里添加,使用时需要切换。现在给大家介绍一个在 WordPress 可视化编辑器里添加短代码按钮,这样对小白客户比较友好,不用切换到“文本”再添加短代码。
先看效果:

在WordPress可视化编辑器里添加短代码按钮

下面介绍如何折腾:

1、写好短代码

function shortcode_qts_pdf( $atts, $content = null ) {
	extract(shortcode_atts(array("datasrc"=>""),$atts));
  	return '<div id="pdf_viewer"></div>';
}
add_shortcode( 'qts_pdf', 'shortcode_qts_pdf' );

2、初始化函数

function register_button( $buttons ) {
	array_push( $buttons, "|", "pdf" );  //创建pdf按钮
//	array_push( $buttons, "|", "music" ); //创建music按钮,需要添加多个按钮以此形式添加
	return $buttons;
}
function add_plugin( $plugin_array ) {
	$plugin_array['pdf'] = MAO_ADD . '/mao_static/js/qts-admin-pdf.js';  //对应video按钮js
//	$plugin_array['music'] = MAO_ADD . '/js/music.js';  //对应music按钮js ,按照本文教程创建相关js文件
	return $plugin_array;
}
add_action('init', 'custom_button');
function custom_button() {
	//判断用户是否有编辑文章和页面的权限
	if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
		return;
	}
	//判断用户是否使用可视化编辑器
	if ( get_user_option('rich_editing') == 'true' ) {
		add_filter( 'mce_external_plugins', 'add_plugin' );
		add_filter( 'mce_buttons', 'register_button' );
	}
}

3、js代码

qts-admin-pdf.js 文件:

(function() {
	tinymce.create('tinymce.plugins.pdf', {
		init: function(ed, url) {
			ed.addButton('pdf', {
				// 按钮标题,鼠标悬浮的时候会显示
				title: '插入PDF',
				// 按钮图片
				image: url + '/qts_pdf.svg',
				onclick: function() {
					ed.selection.setContent('[qts_pdf datasrc=""]' + ed.selection.getContent() + '[/qts_pdf]');
				}
			});
		},
		createControl: function(n, cm) {
			return null;
		},
	});
	tinymce.PluginManager.add('pdf', tinymce.plugins.pdf);
})();

<< WordPress 上传图片媒体后自动重命名为时间+随机数 开启 WordPress 隐藏的“全部设置”选项 >>


没有账号? 忘记密码?

社交账号快速登录