Blindtext in WordPress Generieren

German (Deutsch) translation by Andreas Geibert (you can also view the original English article)

Beim Entwickeln einer neuen Wordpress Seite möchte man, bevor man diese veröffentlicht, Beiträge und Seiten oftmals mit Blindtext befüllen. In diesem Tutorial lernst Du, wie Du dies schnell und einfach erledigen kannst, indem Du ein Plugin entwickelst, das Blindtext automatisch generiert.

Das Plugin, das Du erstellen wirst, wird einen Button zum WYSIWYG Editor hinzufügen, der, wenn er angeklickt wird, ein Pop-Up öffnet, das nach der gewünschten Anzahl an Absätzen für den Blindtext fragt. Der Benutzer gibt dann die gewünschte Anzahl ein und der Blindtext wird automatisch eingefügt.

Bitte beachte, dass dieses Plugin die TinyMCE 4.0 Bibliothek verwendet, welche erst kürzlich in WordPress 3.9 integriert wurde. Dies bedeutet, dass das Plugin erst ab WordPress Version 3.9 funktioniert.

Das Plugin erstellen

Schritt 1

Als erstes erstellst Du in Deiner WordPress Installation einen neuen Ordner unter wp-content/plugins und benennst diesen. In diesem Tutorial nenne ich diesen Ordner, und damit auch das Plugin, 'dummy-text-generator'. Weil Du im Code dieses Plugins aber mit relativen Links zu allen Plugin-Dateien arbeiten wirst, kann dieser Name frei gewählt werden.

Schritt 2

Als nächstes erstellst Du in diesem Ordner eine Datei mit dem gleichen Namen des Ordners und fügst dieser Datei die Endung .php hinzu. In meinem Fall also dummy-text-generator.php.

Schritt 3

Nun musst Du WordPress mitteilen, dass Deine neue Datei ein Plugin ist. Dies erreichst Du, indem Du folgenden Code am Anfang Deiner neuen Plugin-Datei einfügst.

<?php
/*
Plugin Name: Dummy Text Generator
Plugin URI: https://code.tutsplus.com
Description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Version: 1.0
Author: Sam Berson
Author URI: http://www.samberson.com
License: GPLv2 or later
*/

Dieser Code teilt WordPress mit, wie Dein Plugin heißt, was es genau macht und in welcher Versionsnummer es vorliegt. Diese Informationen werden auf der Plugin-Seite im WordPress Adminbereich angezeigt.

Schritt 4

In Deinem Plugin-Ordner solltest Du einen weiteren Ordner namens js anlegen, in welchem Du noch eine neue Datei names tinymce-plugin.js anlegst. Diese Datei brauchst Du später noch. Du kannst sie vorerst leer lassen.

Schritt 5

Im letzten Schritt musst Du Dein neues Plugin noch aktivieren. Dies kannst Du unter dem Menüpunkt Plugins im WordPress Adminbereich tun. Jetzt wo Dein Plugin aktiviert ist, können wir mit der eigentlichen Programmierung beginnen.

Funktionen hinzufügen

Dieses Plugin wird folgende Funktionen haben: Prüfen, ob die gerade bearbeitete Seite vom Typ "Seite" oder "Beitrag" ist und wenn ja, die Blindtext Funktionalität überhaupt erst zur Verfügung stellen. Den Button zum WYSIWYG Editor hinzuzufügen. Die benötigten Javascript Dateien für das Plugin einbinden. Und die Funktionen des WYSIWYG Editor Buttons definieren.

Schritt 1

Die erste Funktion prüft, welchen Typ Seite wir im Adminbereich gerade bearbeiten. Ist die Seite vom Typ "Seite" oder "Beitrag", kann sich unser Plugin einklinken und den Blindtext-Button im Editor einblenden.

Diese Funktion fügt auch gleich den Button zum WYSIWYG Editor hinzu. Dies erreichst Du durch folgenden Code, der gleich nach den Plugin-Informationen eingefügt wird.

add_action( 'admin_head', 'add_tinymce_dummytext' );
function add_tinymce_dummytext() {
global $typenow;

    // only on Post Type: post and page
    if( ! in_array( $typenow, array( 'post', 'page' ) ) ) {
        return ;
    }

    add_filter( 'mce_external_plugins', 'add_tinymce_dummytext_plugin' );
    // Add to line 1 form WP TinyMCE
    add_filter( 'mce_buttons', 'add_tinymce_dummytext_button' );
}

Schritt 2

Die zweite Funktion bindet die zuvor erstellte Javascript Datei ein.

// include the js for tinymce
function add_tinymce_dummytext_plugin( $plugin_array ) {

$plugin_array['dummytext_plugin'] = plugins_url( '/js/tinymce-plugin.js', __FILE__ );

    return $plugin_array;
}

Schritt 3

Die letzte Funktion erstellt den neuen Blindtext-Button für den WYSIWYG Editor und fügt dem Editor diesen Button hinzu.

// Add the button key for address via JS
function add_tinymce_dummytext_button( $buttons ) {

array_push( $buttons, 'dummytext_button' );
    // Print all buttons
    //var_dump( $buttons );
    return $buttons;
}

Schritt 4

Du hast nun alle benötigten Funktionen und Aktionen, die Dein Plugin benötigt, erstellt. Deine PHP Datei sollte nun die Plugin-Informationen am Anfang der Datei und die drei eben programmierten Funktionen enthalten. Der komplette Code sollte nun wie folgt aussehen.

<?php
/*
Plugin Name: Dummy Text Generator
Plugin URI: http://code.tutsplus.com
Description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Version: 1.0
Author: Sam Berson
Author URI: http://www.samberson.com
License: GPLv2 or later
*/

add_action( 'admin_head', 'add_tinymce_dummytext' );
function add_tinymce_dummytext() {
global $typenow;

    // only on Post Type: post and page
    if( ! in_array( $typenow, array( 'post', 'page' ) ) ) {
        return;
    }

    add_filter( 'mce_external_plugins', 'add_tinymce_dummytext_plugin' );
    // Add to line 1 form WP TinyMCE
    add_filter( 'mce_buttons', 'add_tinymce_dummytext_button' );

}


// inlcude the js for tinymce
function add_tinymce_dummytext_plugin( $plugin_array ) {

    $plugin_array['dummytext_plugin'] = plugins_url( '/js/tinymce-plugin.js', __FILE__ );

    return $plugin_array;
}


// Add the button key for address via JS
function add_tinymce_dummytext_button( $buttons ) {

    array_push( $buttons, 'dummytext_button' );

    return $buttons;
}

Den Blindtext generieren

Der Blindtext wird nun in der zuvor erstellten Javascript Datei tinymce-plugin.js im Ordner js generiert.

Schritt 1

Wir beginnen damit, dass wir eine neue Funktion schreiben. In dieser Funktion initialisieren wir eine Variable 'dummyContent', die einen HTML Absatz mit etwas "Lorem ipsum" Blindtext zugewiesen bekommt.

( function() {

dummyContent = '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';

Schritt 2

Nun erstellst Du die 'dummytext_plugin' Funktion für den WYSIWYG Editor, die Du zuvor in der PHP Datei definiert hast.

1	tinymce.PluginManager.add( 'dummytext_plugin', function( editor, url ) {

Schritt 3

Der Button erhält dann die Funktionalität, das Popup für die Eingabe der gewünschten Anzahl an Absätzen zu öffnen. Hierzu werden auch die nötigen Felder und Attribute definiert.

// Add a button that opens a window
    editor.addButton( 'dummytext_button', {

            text: 'Dummy Text Generator',
            icon: false,
            onclick: function() {
                // Open window
                editor.windowManager.open( {
                    title: 'Dummy Text Generator',
                    body: [{
                        type: 'textbox',
                        name: 'number',
                        label: 'Number of Paragraphs'
                    }],

Schritt 4

Wir legen nun fest, dass der Blindtext nur eingefügt werden soll, wenn eine gültige Zahl für die Anzahl der Absätze eingegeben wurde.

 onsubmit: function( e ) {
                    if(isNaN(e.data.number)) { alert('Please enter a valid number'); return;}

                        // Insert content when the window form is submitted
                        for (var i = 0; i < e.data.number; i++) {
  					    editor.insertContent( dummyContent );
						}
                    }

Schritt 5

Im letzten Schritt musst Du nur noch alle geschweiften Klammen schließen, die wir vorher in der Javascript Datei geöffnet haben. Danach solltest Du alle Änderungen in der Javascript und PHP Datei speichern.

1	} );
2	}
3	} );
4	} );
5	} )();

Schritt 6

Die fertige, komplette Javascript Datei sieht dann wie folgt aus und Du kannst nun das Plugin testen.

( function() {
dummyContent = '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';

    tinymce.PluginManager.add( 'dummytext_plugin', function( editor, url ) {

        // Add a button that opens a window
        editor.addButton( 'dummytext_button', {

            text: 'Dummy Text Generator',
            icon: false,
            onclick: function() {
                // Open window
                editor.windowManager.open( {
                    title: 'Dummy Text Generator',
                    body: [{
                        type: 'textbox',
                        name: 'number',
                        label: 'Number of Paragraphs'
                    }],
                    onsubmit: function( e ) {
                    	if(isNaN(e.data.number)) { alert('Please enter a valid number'); return;}

                        // Insert content when the window form is submitted
                        for (var i = 0; i < e.data.number; i++) {
						    editor.insertContent( dummyContent );
						}
                    }
                } );
            }
        } );
    } );
} )();

Zusammenfassung

Geschafft! Du hast Dein eigenes Blindtext-Plugin für WordPress unter Einsatz von PHP und Javascript erstellt!

Solltest Du Fragen zu diesem Plugin haben, hinterlasse weiter unten auf der Seite einfach einen Kommentar. Ich werde Dir umgehend antworten.

1	<?php
2	/*
3	Plugin Name: Dummy Text Generator
4	Plugin URI: http://code.tutsplus.com
5	Description: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
6	Version: 1.0
7	Author: Sam Berson
8	Author URI: http://www.samberson.com
9	License: GPLv2 or later
10	*/
11
12	add_action( 'admin_head', 'add_tinymce_dummytext' );
13	function add_tinymce_dummytext() {
14	global $typenow;
15
16	// only on Post Type: post and page
17	if( ! in_array( $typenow, array( 'post', 'page' ) ) ) {
18	return;
19	}
20
21	add_filter( 'mce_external_plugins', 'add_tinymce_dummytext_plugin' );
22	// Add to line 1 form WP TinyMCE
23	add_filter( 'mce_buttons', 'add_tinymce_dummytext_button' );
24
25	}
26
27
28	// inlcude the js for tinymce
29	function add_tinymce_dummytext_plugin( $plugin_array ) {
30
31	$plugin_array['dummytext_plugin'] = plugins_url( '/js/tinymce-plugin.js', __FILE__ );
32
33	return $plugin_array;
34	}
35
36
37	// Add the button key for address via JS
38	function add_tinymce_dummytext_button( $buttons ) {
39
40	array_push( $buttons, 'dummytext_button' );
41
42	return $buttons;
43	}