WordPress: Moderne Theme-Entwicklung mit Action Hooks

Richtig gute Minimal WordPress-Themes zu entwickeln ist eine echte Herausforderung. Doch auch das vermeintlich einfache Anpassen bereits vorhandener WordPress Themes kann schnell für graue Haare sorgen.

Immer häufiger arbeiten Entwickler in den Template-Dateien mit Action Hooks, um die einzelnen Dateien und die darin verwendeten Funktionen übersichtlich und klar zu halten. Da recht wenig Informationsmaterial über die Arbeit mit Action Hooks existiert, stoßen besonders Anfänger und Fortgeschrittene schnell an das Ende ihres Lateins.

WordPress Action Hooks – eine Einführung

Damit es dir nicht auch so ergeht, beschäftigen wir uns heute mit den Action Hooks und ihren Vorteilen, damit dir Frustrationen erspart bleiben.

Solltest du einen WooCommerce Shop eröffnen wollen, denkst  du vielleicht über eine Anpassung des beliebten Storefront-Themes auf deine Bedürfnisse nach. Nach dem Öffnen der Template-Datei für die Anzeige der Startseite erwartet dich dieser Anblick:

Wie du siehst, sind keinerlei Loops in dieser Datei zu finden. Auch andere Theme-Dateien von Storefront sind so gestaltet. Allerdings könnte man diese Dateien noch weiter bereinigen und es auf die Spitze treiben:

Ein einziger Action Hook sorgt hier für die Darstellung der Inhalte der Startseite.

<?php do_action( 'homepage' ); ?>

Das Prinzip der WordPress Action Hooks

Das zugrunde liegende Prinzip ist recht einfach, du kennst es bereits. Denn dein WordPress bietet dir einige bereits vordefinierte Hooks, die auch fleißig genutzt werden. Da wären zum Beispiel:

<?php
//Altbekannte Action Hooks: 

wp_head();

wp_footer();

the_content();

the_excerpt();

?>

Das Prinzip ist gleich: Funktionen werden in diese Hooks »eingehakt« und dadurch entweder ausgeführt oder dargestellt. Genauso funktionieren auch die eigenen, selbst definierten Action Hooks. Doch was genau ist der Vorteil dieser Art der Entwicklung?

Der große Vorteil dieser Art von Theme-Entwicklung

Du fragst dich nun bestimmt, was genau der Vorteil dieser Art der Entwicklung ist. Die Antwort darauf ist eindeutig. Denn neben der klaren und einfachen Übersichtlichkeit der einzelnen Templates bietet sich ein weiterer unschlagbarer Vorteil:

Für eine individuelle Überarbeitung und dem Hinzufügen eigener Funktionen zu einem bestehenden Theme muss keine einzige Theme-Datei mehr angefasst werden. Die bislang große Fehlerquelle der eigens angepassten Theme-Dateien entfällt komplett.

Modifikationen und eigene Funktionen können über die Action Hooks direkt in die Templates eingefügt werden, ohne diese Dateien ändern zu müssen. Eigene Funktionen können wie von Zauberhand direkt an den gewünschten Stellen erscheinen. Ich fasse zusammen:

• Klare Strukturen
• Absolute Übersichtlichkeit
• Alle Funktionen an einer Stelle
• Keine Anpassung der einzelnen Theme-Dateien nötig
• Absolute Update-Sicherheit für den User

So arbeitest du mit WordPress Action Hooks

Einmal verstanden ist die Arbeit mit den Action Hooks recht einfach. Du definierst deinen eigenen Hook, programmierst deine Funktion und hakst sie in den Hook ein. Einen eigenen Hook zu erstellen ist einfach, die Funktion dafür heißt do_action(). Doch bevor wir uns damit beschäftigen, gibt es noch einige Dinge zu beachten.

Schritt 1: Darauf solltest du achten

Der wichtigste Punkt ist die Übersichtlichkeit. Du solltest alle Template-Funktionen in einer Datei sammeln. Die functions.php ist allerdings nicht die richtige Datei für diese Zwecke. Erstelle eine eigene Datei für diesen Job, in der du alle Funktionen sammelst, die für die Darstellung des Themes sorgen.

Als gutes Beispiel darf dir hierbei das Storefront-Theme dienen, alle Template-Funktionen wirst du in im Ordner /inc in der Datei storefront-template-functions.php finden. Ich rate dir, auch eine solche Datei anzulegen. Ein Ordner /inc ist der richtige Platz für diese Datei.

Du musst allerdings WordPress noch von der Existenz der Datei unterrichten. Eine Zeile Code in der functions.php sorgt dafür, das deine Datei geladen wird:

<?php require_once( get_stylesheet_directory(). '/inc/template-functions.php' ); ?>

Dokumentiere deinen Code anständig

Sehr wichtig ist die gute Dokumentation deines Codes. Gehe davon aus, dass sich auch andere Menschen in deinem Code eventuell zurechtfinden müssen. Selbst wenn das nicht der Fall ist, wirst du nach einem Jahr Probleme haben, dich in deinem Theme zurechtzufinden.

Eine gute Dokumentation sorgt für einen perfekten Überblick zu jeder Zeit. Ich habe diese Anforderung so gelöst:

Schritt 2: WordPress Action Hook definieren

Innerhalb der Klammern definierst du deinen Hook, der zum Beispiel wie folgt heißen könnte:

<?php do_action( 'startseite' ); ?>

Wenn du einzelne Worte trennen musst, nutze dafür Unterstriche statt Bindestriche.

<?php do_action( 'startseite_loop' ); ?>

Diesen Hook platzierst du nun dort in der Theme-Datei, wo du die Funktionen haben möchtest. Du bist nicht limitiert hierbei, sondern kannst deine Action Hooks fast überall einsetzen. Zum Beispiel vor dem Inhalt, nach dem Inhalt, vor und nach der Überschrift oder den Kommentaren. Ein Beispiel ist die single.php von Storefront:

Schritt 3: Die Arbeit mit den WordPress Action Hooks

Als Beispiel nehmen wir uns wieder die Startseite des Storefront-Themes vor. Du wirst schnell feststellen, dass die Arbeit mit den Hooks leicht verständlich ist. Hier noch einmal der Hook der Startseite:

<?php do_action( 'homepage' ); ?>

Schreibe nun deine Funktionen wie gehabt in die Datei, die du dir dafür angelegt hast.

<?php

if ( ! function_exists( 'storefront_homepage_content' ) ) {
	/**
	 * Display homepage content
	 * Hooked into the `homepage` action in the homepage template
	 *
	 * @since  1.0.0
	 * @return  void
	 */
	function storefront_homepage_content() {
		while ( have_posts() ) {
			the_post();

			get_template_part( 'content', 'homepage' );

		} // end of the loop.
	}
}

Danach wird deine Funktion an die betreffende Stelle mittels Einhaken befördert:

<?php

add_action( 'homepage', 'storefront_homepage_content', 10 );

Deine Funktion wird jetzt auf der Startseite erscheinen. Zuerst schreibst du den Action Hook, danach den Namen deiner Funktion in den add_action() Tag hinein. So einfach ist das.

Schritt 4: Ein Hook, viele Funktionen

Doch wie positioniert man viele Funktionen mit nur einem Hook? Das Geheimnis sind die Prioritäten. Je niedriger die Zahl der Priorität, desto weiter oben erscheint die Funktion. Schauen wir uns noch mal das Template genau an:

Sieben Funktionen teilen sich einen Action Hook. Möglich machen das die Prioritäten, die hinter jeder eingehakten Funktion erscheinen. Hier im Beispiel von Priorität 10 bis hin zu Priorität 70.

Diese Zahlen bestimmen die Reihenfolge der ausgeführten Funktionen. Die 10 erscheint ganz oben, die 70 dementsprechend ganz unten. Die Prioritäten vergeben wir mit dem add_action() Tag:

<?php

// Die 10 ist die Priorität
add_action( 'homepage', 'storefront_homepage_content', 10 );

Funktionen einfach dazwischenschieben

So einfach kannst du die Anzeige deiner Datei steuern und im Fall unseres Beispiels auch Funktionen in die Datei an beliebiger Stelle einschieben. Setze für deine Funktion einfach eine »Zwischenpriorität« ein.

<?php

add_action( 'homepage', 'deine-eigene-funktion', 15 );

Deine eigene Funktion wird durch die Priorität nun zwischen dem Storefront Homepage Content und den Produkt-Kategorien angezeigt.

WooCommerce: Share Buttons einfügen ohne Templatemodifikation

Jeder WooCommerce-Shop Betreiber möchte die wichtigen Share-Buttons auf der Anzeige eines einzelnen Produkts einfügen. Dank der Action Hooks ist das eine Sache von wenigen Minuten. Die betreffende Datei, in die wir unsere Share-Buttons einhaken, ist die share.php.

Viele Share-Button-Plugins bieten neben der automatischen Integration der Share-Buttons in das Theme auch die manuelle Möglichkeit, die Buttons korrekt zu platzieren. Dies geschieht zumeist über einen Shortcode. Für die manuelle Integration in die Theme-Datei sieht der Shortcode so aus:

<?php echo do_shortcode('[dein-button-plugin]'); ?>

Für den Einbau in die Ansicht eines einzelnen Produkts würde die nötige Funktion so aussehen:

<?php
/**
 * Share-Buttons einfügen auf der Seite eines einzelnen Produkts
 */
function share_for_woocommerce() {
    
    echo do_shortcode('[dein-button-plugin]');
}
add_action( 'woocommerce_share', 'share_for_woocommerce' );

Da nur eine einzige Funktion eingehakt wird, ist die Angabe von Prioritäten nicht nötig.

Das Ergebnis:

Fazit

WordPress Action Hooks sind eine wirklich gute Möglichkeit, die einzelnen Dateien eines Themes übersichtlich und klar strukturiert zu halten. Eine gute Dokumentation des Codes zusammen mit einer durchdachten Ordner- und Template-Struktur bietet immense Vorteile, denn so finden sich auch andere Entwickler schnell zurecht.

Zudem ist dieses moderne Theming sehr benutzerfreundlich, denn es müssen zum Anpassen eines Themes keinerlei Dateien geändert werden. Auch mein Evolution WordPress Framework benutzt ausschliesslich Action Hooks.

Mehr zu WordPress:

• 10 WordPress-Plugins, die jeder Seitenbetreiber haben sollte
• Minimal WordPress-Themes
• WordPress aufräumen für mehr Performance – 11 Praxis-Tipps für dich

(Artikelbild: Depositphotos)