WordPress: Javascript-Code interaktiv in einem Post ausführen

Viele WordPress-Blogs behandeln Inhalte aus der Informatik. Naturgemäß müssen dabei häufig mehr oder weniger umfangreiche Quellcode-Abschnitte erläutert werden. Die Anschaulichkeit und Lernförderlichkeit solcher Webseiten kann erheblich gesteigert werden, indem für den Leser die Möglichkeit geboten wird, den betreffenden Code direkt in der Webseite auszuführen und die Resultate zu betrachten. Das ProgrammingWiki verfolgt diesen Ansatz, um u.a. das Erlernen von Programmiersprachen zu erleichtern.

In diesem Beitrag zeige ich, wie mit Hilfe eines selbst entwickelten Plugins auch in WordPress-Posts und -Pages Quellcode interaktiv ausgeführt werden kann. Ich beschränke mich dabei auf Javascript-Code. Das Plugin soll folgende Funktionalität besitzen:

• Es wird ein Shortcode ergänzt, der beim Editieren von Posts und Pages um Javascript-Codeabschnitte gesetzt werden kann.
• Der Shortcode bewirkt, dass die Codeabschnitte beim Rendern der Seite in Textareas eingebettet werden, unter denen sich jeweils ein "Ausführen"-Button befindet.
• Wenn der Nutzer auf den "Ausführen"-Button klickt, wird der Quellcode in der darüber befindlichen Textarea ausgeführt.
• Durch die Verwendung von Textareas kann der Quellcode vom Nutzer temporär (bis zum Neuladen der Seite) modifiziert werden.

Das Plugin, welches ich zu diesem Zweck entwickle, nenne ich js_evalbox’. Zuerst lege ich einen neuen Ordner mit diesem Namen an. In dem Ordner erstelle ich eine neue php-Datei ‘js_evalbox.php’. Für den Aufbau dieser Datei gibt es einige Konventionen, auf die ich nicht näher eingehen werde (es geht u.a. um Lizenzinformationen und Namenskonventionen). Wenn Sie aber vorhaben, ein Plugin zu veröffentlichen, beachten Sie bitte die Hinweise im WordPress Codex.

1. Einbinden des Shortcodes

Um einen neuen Shortcode für den WordPress-Editor zu definieren, rufe ich in der PHP-Datei die WordPress-Funktion 'add_shortcode' auf. Der erste Parameter ist dabei der Name des neuen Shortcodes. Ich nenne ihn 'evalbox'. Als zweiten Parameter muss ich den Namen einer Funktion angeben, in der ich definiere, wie der Inhalt des Shortcodes gerendert werden soll.

add_shortcode( 'evalbox', 'js_evalbox_shortcode' );

Werfen wir einen Blick auf die unten gezeigte Renderfunktion des Shortcodes. Der Inhalt des Shortcodes, d.h. das im WordPress-Editor vom Autor eines Posts eingegebene Javascript-Codeschnipsel, ist in der Variable $content enthalten. In der Variable $atts befinden sich die ggf. angegebenen Attribute bzw. Parameter des Shortcodes. Mein Shortcode soll auf den Parameter 'size' reagieren: Die Höhe der generierten Textarea soll exakt 'size' Pixel betragen. Mit Hilfe der Funktion 'shortcode_atts' wird zunächst ein Standardwert für den Parameter festgelegt (für den Fall, dass vom Postautor kein Parameter angegeben wird). Anschließend erfolgt die Ausgabe des HTML-Codes, der die Textarea mit der gewünschten Höhe und dem gewünschten Inhalt sowie den zugehörigen 'Ausführen'-Button generiert.

Höchstwahrscheinlich wurde der ursprüngliche Inhalt des Shortcodes von WordPress automatisch um Zeilenumbrüche (<br/>-Tags) und Absätze (<p>-Tags) erweitert. Diese Tags stören in der Textarea und müssen daher mit der Funktion 'strip_tags' entfernt werden.

function js_evalbox_shortcode($atts, $content = null ){
	
   $pull_quote_atts = shortcode_atts( array('size' => '100px'), $atts );
	
   return '<div><textarea style="width:100%;height:' . $pull_quote_atts['size'] . '">' . 
         strip_tags($content) . '</textarea><input type=button" 
         value="Ausführen" class="evalbox_button"></div>';
}

2. Implementieren des Ereignis-Handlers für den "Ausführen"-Button

Als nächstes muss definiert werden, was beim Anklicken des Buttons 'Ausführen' passiert. Das Anklicken geschieht auf Clientseite im Browser des Benutzers, daher muss die Ereignisbehandlung im Javascript-Code erfolgen. Ich lege eine neue Javascript-Datei mit dem Namen 'js_evalbox.js' an. Der folgende Javascript-Code basiert auf der jQuery-API.

 jQuery(document).ready(function($) {

   $('.evalbox_button').click(function(){
		
     var content = $(this).prev().val();
	
     eval(content);
		
   });
});

Auf einer Seite können mehrere ausführbare Codeboxen und demzufolge mehrere 'Ausführen'-Buttons vorliegen. Die Buttons selektiere ich daher  über ihren gemeinsamen Klassennamen 'evalbox_button'.

Die ihnen zugeordnete Handlerfunktion liest zunächst den Inhalt der Textarea aus und weist ihn der Variable 'content' zu.  Um an das Textarea-Element heranzukommen, welches dem gerade angeklickten Button zugeordnet ist, verwende ich den Ausdruck '$(this).prev()', der mir das vorhergehende Geschwisterelement (prev) des Buttons (this) liefert. Das vorhergehende Geschwisterelement muss die Textarea sein, daher kann ich mit der Funktion 'val' auf ihren Inhalt zugreifen.

Der Wert der Variable 'content' wird durch die Funktion 'eval' anschließend als Javascript-Code interpretiert und ausgeführt.

Anmerkung zur ready-Funktion: Die Zuweisung des Handlers zu den Buttons mit der Klasse 'evalbox_button' kann erst erfolgen, nachdem das DOM vollständig im Browser geladen wurde (sonst existieren diese Elemente noch nicht und es kommt zu Fehlermeldungen). Den entsprechenden Code übergebe ich daher an die jQuery-Funktion 'ready' (siehe Dokumentation). Der Code wird dadurch nicht sofort ausgeführt, nachdem die Javascript-Datei vom Browser geladen wurde, sondern erst später, sobald das DOM vollständig vorliegt.

Zurück zur PHP-Datei. Damit beim Laden eines Posts oder einer Page meine Javascript-Datei überhaupt an den Client ausgeliefert wird, muss das Skript registriert werden. Dies geschieht über die WordPress-Aktion 'wp_enqueue_scripts':

add_action( 'wp_enqueue_scripts', 'js_evalbox_enqueue_script' );

function js_evalbox_enqueue_script(){

   wp_enqueue_script( 'js_evalbox', plugin_dir_url( __FILE__ ) . 'js_evalbox.js',
                       array('jquery'));
}

Zu beachten ist hier, dass als dritter Parameter von 'wp_enqueue_script' die Bibliothek 'jquery' angegeben wird. Damit wird definiert, dass mein Skript von jQuery abhängig ist. Demzufolge muss das jQuery-Skript von WordPress an den Browser ausgeliefert werden, bevor mein Skript ausgeführt wird.

3. Installation und Test des Plugins

Der Plugin-Ordner, der die PHP- und Javascript-Dateien enthält, muss nun in eine zip-Datei verpackt werden. Diese zip-Datei lässt sich bei WordPress im Plugins-Bereich hochladen und aktivieren.

Zum Testen bearbeite ich einen Post und füge im Editor an beliebiger Stelle folgenden Shortcode ein:

[evalbox size="90px"]
var x = 10;
x = x + 1;
alert(x);
[/evalbox]

Das Ergebnis können Sie hier unten gleich ausprobieren:

Empfehlung: Codieren Sie Anführungszeichen innerhalb der evalbox als &#039; . Zum Beispiel so:

[evalbox size="90px"]
alert('Hallo!');
[/evalbox]

Das Ergebnis ist unten abgebildet. Ohne Codierung werden von WordPress 'falsche' Anführungszeichen in die Textarea eingefügt, sodass beim Evaluieren des Javascript-Codes ein Fehler auftritt.