WordPress 5

WordPress-5-Tutorial: Hallo Welt!

Aus Kapitel 18, »Grundwissen für WordPress-Entwickler«, Abschnitt 18.3, »Erste Programmierschritte«, Unterabschnitt 18.3.2, »Hallo Welt!«

Soweit archäologische Funde in Silicon Valley zurückdatierbar sind, ist das allererste, was ein Programmierer seit Tausenden von Jahren in einer neuen Umgebung, einer neuen Programmiersprache oder auf einer neuen Tastatur, programmiert, ein lauter existentialistischer Aufschrei: Hallo Welt! (https://wpbuch.com/hallowelt). So wird »Hallo Welt« auch Ihr erstes Programm auf Ihrer WordPress-Website. Denn das kleine Code-Fragment beweist, dass Sie alle Zügel in der Hand haben, (1) ein vollständig funktionsfähiges Programm zu schreiben und (2) eine benutzerfreundliche Ausgabe erzeugen können.

Ziel

Ausgabe von Hallo Welt! in ein Popup-Fenster, sowohl im Back- als auch Frontend, sobald eine Webseite im Browser geladen wird. Der einfachste Test in einer neuen Programmiersprache/Umgebung ist eine Textausgabe.

Der einfachste Test in einer neuen Programmiersprache/Umgebung ist eine Textausgabe.

Vorgehen

Sie lernen schon jetzt einen der wichtigsten WordPress-Mechanismen kennen, um die Hallo-Welt-Ausgabe in Gang zu setzen: Hooks (dazu gleich mehr im Abschnitt »Nützliche Tweaks«). Das sind klar definierte Einstiegspunkte, an denen Sie Ihr eigenes Programm im gigantischen WordPress-Quelltext »einklinken«. So, wie Ihre Kaumuskulatur aktiviert, wenn sich ein Stück Nahrung zwischen den Zähnen befindet, führt WordPress zu einem bestimmten Ereignis automatisch Ihren Code aus.

Für Hallo Welt! Besteht diese Kauautomatik aus einer einfachen PHP-Funktion, die bei der HTML-Seitenausgabe aufgerufen wird. Innerhalb der PHP-Funktion befindet sich JavaScript-Code, der sofort das Popup mit der Hallo-Meldung öffnet. Ist die Nahrung ausreichend zerkleinert, Ihr Programmcode ausgeführt, fährt die Maschine automatisch mit den nächsten Schritten fort – Gabel, Messer, schneiden etc.

Der PHP/JavaScript-Code kann sich an ganz unterschiedlichen Stellen befinden. Zum Beispiel in der Datei functions.php Ihres aktuellen Themes. Oder, und das macht dieses erste Experiment besonders spannend, in einem eigenen Plugin. Denn Hallo Welt! zeigt, dass die Programmierung eines waschechten Plugins gar nicht aufwendig ist.

Legen Sie einfach im Ordner /wp-content/plugins/ eine neue Datei an. Name: wh-hello-world.php (PHP-Coding-Guideline: Dateinamen: Klein und mit Bindestrichen). Öffnen Sie die Datei in einem Editor und fügen Sie folgenden Code ein:

Statt abtippen: Copy & Paste von https://wpbuch.com/listing-18-1

So klein und schon ein Plugin – »Hallo Welt« ist Proof-of-Concept für den Hook-Mechanismus von WordPress und eine Ausgabe in eine Webseite.

So funktioniert’s

Überraschend wichtig sind die Kommentarzeilen, die mehr als die Hälfte des Quelltexts ausmachen. Der erste Kommentarblock dient dabei einer möglicherweise später zu erstellenden Dokumentation. Wichtiger ist jetzt der zweite Block, in dem PLUGIN NAME, PLUGIN URI, DESCRIPTION, AUTHOR, AUTHOR URI und VERSION definiert werden. Dies sind alles festgeschriebene Schlüsselwörter, die WordPress aus dieser Datei ausliest, um das Plugin verwechslungsfrei zu identifizieren und im Backend mit begleitenden Informationen zu listen. Der nachfolgende Inhalt jeder dieser Textmarker erscheint dann unter PLUGINS INSTALLIERTE PLUGINS. Diesen Kommentarblock zu vergessen, ist aber nahezu unmöglich. Schon wenn der PLUGIN NAME nicht enthalten ist, erscheint das Plugin erst gar nicht in der Liste.

Dann geht es gleich weiter zur Hauptaufgabe des Plugins, der Ausgabe des Texts HALLO WELT!, nichts weiter als die PHP-seitige Ausgabe eines JavaScript-Skripts, das sofort ausgeführt wird. Das HTML-Tag leitet so ein Skript ein. Der JavaScript-Befehl alert() öffnet das Popup-Fenster. Vorsicht mit den Anführungszeichen: »Außen« (PHP) sind es doppelte, »innen« (JavaScript) sind es einfache (Apostroph-Zeichen). Beachten Sie auch das Sonderzeichen \n am Ende der PHP-Ausgabe. Das ist ein Zeilenvorschub (newline), damit diese Ausgabe in genau einer HTML-Zeile erfolgt. \n wird dabei übrigens nur dann richtig ausgegeben, wenn es sich innerhalb einer Zeichenkette mit doppelten Anführungszeichen befindet.

Dank eines passenden Hooks schmiegt sich der Hallo-Welt!-Code irgendwo im gewaltigen Webseiten-Header ein. „\n“ bei der JavaScript-Ausgabe bewirkt am Ende einen Zeilenumbruch, damit das nicht am nächsten HTML-Befehl klebt.

Bis hierher könnten Sie unter oder über die Funktion den Funktionsaufruf mit hello_world(); ergänzen und das Ganze wäre ein normales, handelsübliches PHP-Skript, das sich direkt über die URL https://ihredomain/wp-content/plugins/wp-hello-world.php aufrufen lässt und das Popup einblendet (auf einer leeren HTML-Seite, da das PHP-Skript nichts anderes ausgibt). Mit den zwei Befehlen add_action() kommt nun allerdings WordPress mit ins Spiel.

Bei den ersten Parametern, admin_head und wp_head handelt es sich um Hooks, den Mechanismus, mit dem sich WordPress so einfach erweitern lässt. In diesem Beispiel stehen die beiden Hooks für die Momente, in dem der HTML-Header (1) einer Backend-Webseite (admin) und 2. Einer Frontend-Seite (wp) ausgegeben wird. Der ideale Ort, in den der HTML/JavaScript-Code injiziert wird.

Sobald Sie die Datei speichern, berücksichtigt sie WordPress nun bei jeder Ausführung, bei jedem Laden einer Webseite. Halt, eines noch: Sie müssen das Plugin natürlich noch aktivieren. In der Liste des Admin-MenüsPLUGINS INSTALLIERTE PLUGINS suchen Sie nach WH HELLO WORLD und klicken auf den Link AKTIVIEREN (in den Ordner /wp-content/plugins/ kopierte/erzeugte Plugin-Dateien sind automatisch »installiert«). Nun laden Sie beliebige Front- und Backendseiten neu, um das JavaScript-Popup in Aktion zu sehen. Danach deaktivieren Sie das Plugin wieder, denn die ständigen JavaScript-Popups gehen auf die Nerven.

Egal ob aus dem Internet geladen oder per Hand im Ordner /wp-content/plugins/ erzeugt, alle Plugins müssen aktiviert werden.

Das Buch erhalten Sie bei: