Wordpress | WordPress Editor Custom Image Shortcode
//functions.php
function customimage_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array(
'url' => '',
'text' => '',
), $atts ) );
$imgurl = $url ? $url : $imgurl;
$content = $text ? $text : $content;
if ( $url ) {
foreach ( $link_attr as $key => $val ) {
if ( $val ) {
$link_attrs_str .= ' ' . $key . '="' . $val . '"';
}
}
return '<figure class="customimage"><img src="' . $imgurl . '"/><figcaption>' . do_shortcode( $content ) . '</figcaption></figure>';
}
}
add_shortcode( 'customimage', 'customimage_shortcode' );
function register_customimage( $buttons ) {
array_push( $buttons, "", "customimage" );
return $buttons;
}
function add_plugin_customimage( $plugin_array ) {
$plugin_array['customimage'] = get_template_directory_uri() . '/js/customimage.js';
return $plugin_array;
}
function my_customimage_shortcode() {
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_customimage' );
add_filter( 'mce_buttons', 'register_customimage' );
}
}
add_action('init', 'my_customimage_shortcode');
// customimage.js
(function() {
tinymce.create('tinymce.plugins.customimage', {
init : function(ed, url) {
ed.addButton('customimage', {
title : 'Custom Image',
image : url+'/customimage.svg',
onclick : function() {
var title = prompt("Text", "Call to Action");
var target = prompt("Target", "_blank");
ed.execCommand('mceInsertContent', false, '[customimage url="'+href+'" text="'+title+'"]');
}
});
},
createControl : function(n, cm) {
return null;
},
getInfo : function() {
return {
longname : "Custom Image",
author : 'Otowui.com',
authorurl : 'https://www.otowui.com',
version : "1.0"
};
}
});
tinymce.PluginManager.add('customimage', tinymce.plugins.customimage);
})();