WordPress: Hinzufügen von Shortcode-Button im TinyMCE

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

WordPress Dashicons: Icon-Set für das Dashboard

Dashicons ist die offizielle Icon-Schrift für das WordPress Dashboard seit Version 3.8 und bietet ein umfangreiches Icon-Set (Menüs, Medien, Pfeile, Social Media oder Produkte) zur freien Verwendung in Plugins, Widgets, Einstellungen oder für Button in dem TinyMCE.

WordPress Dashicons im Frontend

Die WordPress Dashicons können ebenso im Frontend verwendet werden. Dazu müssen diese für das Frontend mit dem Hook wp_enqueue_scripts() eingebunden werden.

function wbq_include_dashicons_font(){
    wp_enqueue_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'wbq_include_dashicons_font', 100 );

Dieses Snippet kann in der functions.php verwendet werden.

Beispiele

Adding an icon to a header, with the dashicons-before class. This can be added right to the element with text.

<h2 class="dashicons-before dashicons-smiley">A Cheerful Headline</h2>

Adding an icon to a header, with the dashicons class. Note that here, you need extra markup specifically for the icon.

<h2><span class="dashicons dashicons-smiley"></span> A Cheerful Headline</h2>

Quellen und Links

Wie stelle ich WordPress auf das deutsche Zeit- und Datumsformat um?

Das Datums- und Zeitformat sowie die Zeitzone wird im Backend von WordPress konfiguriert.

Sie finden diesen Punkt im Adminbereich unter Einstellungen > Allgemein > Zeitzone/Datumsformat/Zeitformat. Sollten die vorgegebenen Formate nicht ausreichen, können Sie diese anpassen. Welche Variablen dafür zur Verfügung stehen, wird auf PHP-Funktion date() erklärt. Wird nach dem Einstellen, dass Datum und die Uhrzeit auf der Webseite nicht richtig dargestellt, müssen die Dateien des Themes angepasst werden.