Sehr praktisch zum Arbeiten für Redakteure sind Button für eigene angelegte WordPress Shortcodes. Diese können im TinyMCE-Editor wie folgt ergänzt und mit Dashicons verschönert werden.
Der Shortcode für dieses Beispiel lautet:
[update title="Titel des Shortcodes"]Ein Beispieltext im Shortcode[/update]
Das PHP Snippet für die functions.php:
add_action( 'after_setup_theme', 'kfp_child_theme_setup' );
function wby_theme_setup() {
// Important for adding Custom TinyMCE Buttons
add_action( 'init', 'wbq_buttons' );
}
if ( ! function_exists( 'wbq_buttons' ) ) {
function wbq_buttons() {
if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) )
return;
if ( get_user_option( 'rich_editing' ) !== 'true' )
return;
add_filter( 'mce_external_plugins', 'wbq_add_buttons' );
add_filter( 'mce_buttons', 'wbq_register_buttons' );
}
}
if ( ! function_exists( 'wbq_add_buttons' ) ) {
function wbq_add_buttons( $plugin_array ) {
$plugin_array['wbq_buttons'] = get_stylesheet_directory_uri().'/js/dashboard.js';
return $plugin_array;
}
}
if ( ! function_exists( 'wbq_register_buttons' ) ) {
function wbq_register_buttons( $buttons ) {
array_push( $buttons, 'wbq_update' );
return $buttons;
}
}
add_action ( 'after_wp_tiny_mce', 'wbq_tinymce_extra_vars' );
if ( !function_exists( 'wbq_tinymce_extra_vars' ) ) {
function wbq_tinymce_extra_vars() { ?>
<script type="text/javascript">
var tinyMCE_object = <?php echo json_encode(
array(
'update_name' => esc_html__('Update', 'wbq'),
'update_title' => esc_html__('Update Shortcode', 'wbq'),
)
);
?>;
</script><?php
}
}
Das JavaScript Snippet für die dashboard.js (der Dateiname ist nur ein Beispiel) sollte auch nur im Dashboard geladen werden:
// Add Button to TinyMCE editor
(function() {
tinymce.PluginManager.add('wbq_buttons', function( editor, url ) {
editor.addButton( 'wbq_update', {
text: tinyMCE_object.update_name,
icon: 'mce-ico mce-i-icon dashicons-flag',
tooltip: tinyMCE_object.update_title,
onclick: function() {
editor.windowManager.open( {
title: tinyMCE_object.update_title,
body: [
{
type : 'textbox',
name : 'title',
label : 'Title',
tooltip: 'Text',
value : ''
},
{
type : 'textbox',
name : 'text',
label : 'Text',
tooltip: 'Text',
vakue : 'Vakue Cobntent',
multiline: true,
style : 'min-width:300px;'
}, ],
onsubmit: function( e ) {
editor.insertContent( '[update title="' + e.data.title + '"]' + e.data.text + '[/update]');
}
});
},
});
});
})();
Quellen und Links