Andreas Hecht 24. Oktober 2018

WordPress: Moderne Theme-Entwicklung mit Action Hooks

Richtig gute WordPress-Themes zu entwickeln ist eine echte Herausforderung. Doch auch das vermeintlich einfache Anpassen bereits vorhandener 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:

Storefront WooCommerce Theme

Willkommen in der neuen und klaren Welt des Themings.

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:

WordPress Action Hooks Theme Datei

Theming mit Action Hooks auf die Spitze getrieben. Mehr muss eine Theme-Datei nicht enthalten.

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:

So sollte eine gute Dokumentation aussehen.

So sollte eine gute Dokumentation aussehen. Sogar der betreffende Ordner und die Dateien sind angegeben.

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:

Die single.php des Storefront-Theme veranschaulicht gut die Möglichkeiten der Hooks.

Die single.php des Storefront-Theme veranschaulicht gut die Möglichkeiten der Hooks.

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:

Die template-homepage.php Datei von Storefront.

Die Homepage-Datei des Storefront-Themes.

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.

Die share.php mit dem Action Hook, indem wir unsere Share-buttons einhaken.

Die share.php mit dem Action Hook, indem wir unsere Share-buttons einhaken.

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:

Share-Buttons an der richtigen Stelle ohne die Template-Datei angefasst zu haben. Perfekt!

Share-Buttons an der richtigen Stelle ohne die Template-Datei angefasst zu haben. Perfekt!

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:

(Artikelbild: Depositphotos)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

4 Kommentare

  1. Hallo Andreas,

    vielen Dank für Deinen sehr hilfreichen Artikel. Wie würde man denn bei der Verwendung eines Child-Themes vorgehen?

    Ohne Action-Hooks verändere ich am Template zum Beispiel die header.php und lade diese dann in mein Child-Theme-Order.

  2. Hallo Andreas,

    guter Artikel, vor allem wenn man bestehende WordPress-Sites übernehmen und beackern muss. Speziell WooCommerce hat mir da in der Vergangenheit schon einiges abverlangt.

    Neue Projekte erstelle ich gerne mit Grav oder Django/Wagtail, je nach Anforderungen und Voraussetzungen des Kunden weil die MVC-Unterteilung eindeutiger ist und der Aufwand für Twig-/Djangotemplates überschaubar bleibt. Auch Performance und Sicherheit sehe ich hier besser abgedeckt.

    Für budgetkritische Projekte mit weniger individuellen Ansprüchen (z.B. Website Weinbauer + Minishop) passt WordPress nach wie vor gut.
    Einen richtig fetten Webshop würde ich eher stand alone (z.B. ShopWare) umsetzen, da übersteigt WooCommerce manchmal meine Schmerzgrenze.

  3. Hallo Anna,

    WordPress 4.9 hat einige Dinge im Code-Bereich geändert, vielleicht auch diese Funktion. Über Beitragsbild => Beschriftung solltest Du eine anständige Caption bekommen können.

    • Hallo Andreas, vielen Dank für die schnelle Antwort.
      Ich hatte in meinem CSS einen Fehler, der jahrelang nicht gestört hat, aber WordPress 4.9 ist wohl strenger geworden (der Browser war nicht schuld).

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück