Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Andreas Hecht 24. Oktober 2018

WordPress: Moderne Theme-Entwicklung mit Action Hooks

Richtig gute WordPress-Themes zu ent­wi­ckeln ist eine ech­te Herausforderung. Doch auch das ver­meint­lich ein­fa­che Anpassen bereits vor­han­de­ner Themes kann schnell für graue Haare sor­gen.

Immer häu­fi­ger arbei­ten Entwickler in den Template-Dateien mit Action Hooks, um die ein­zel­nen Dateien und die dar­in ver­wen­de­ten Funktionen über­sicht­lich und klar zu hal­ten. Da recht wenig Informationsmaterial über die Arbeit mit Action Hooks exis­tiert, sto­ßen beson­ders Anfänger und Fortgeschrittene schnell an das Ende ihres Lateins.

WordPress Action Hooks – eine Einführung

Damit es dir nicht auch so ergeht, beschäf­ti­gen wir uns heu­te mit den Action Hooks und ihren Vorteilen, damit dir Frustrationen erspart blei­ben.

Solltest du einen WooCommerce Shop eröff­nen wol­len, denkst  du viel­leicht über eine Anpassung des belieb­ten Storefront-Themes auf dei­ne Bedürfnisse nach. Nach dem Öffnen der Template-Datei für die Anzeige der Startseite erwar­tet dich die­ser Anblick:

Storefront WooCommerce Theme

Willkommen in der neu­en und kla­ren Welt des Themings.

Wie du siehst, sind kei­ner­lei Loops in die­ser Datei zu fin­den. Auch ande­re Theme-Dateien von Storefront sind so gestal­tet. Allerdings könn­te man die­se Dateien noch wei­ter berei­ni­gen und es auf die Spitze trei­ben:

WordPress Action Hooks Theme Datei

Theming mit Action Hooks auf die Spitze getrie­ben. Mehr muss eine Theme-Datei nicht ent­hal­ten.

Ein ein­zi­ger Action Hook sorgt hier für die Darstellung der Inhalte der Startseite.

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

Das Prinzip der WordPress Action Hooks

Das zugrun­de lie­gen­de Prinzip ist recht ein­fach, du kennst es bereits. Denn dein WordPress bie­tet dir eini­ge bereits vor­de­fi­nier­te Hooks, die auch flei­ßig genutzt wer­den. Da wären zum Beispiel:

<?php
//Altbekannte Action Hooks: 

wp_head();

wp_footer();

the_content();

the_excerpt();

?>

Das Prinzip ist gleich: Funktionen wer­den in die­se Hooks »ein­ge­hakt« und dadurch ent­we­der aus­ge­führt oder dar­ge­stellt. Genauso funk­tio­nie­ren auch die eige­nen, selbst defi­nier­ten Action Hooks. Doch was genau ist der Vorteil die­ser Art der Entwicklung?

Der große Vorteil dieser Art von Theme-Entwicklung

Du fragst dich nun bestimmt, was genau der Vorteil die­ser Art der Entwicklung ist. Die Antwort dar­auf ist ein­deu­tig. Denn neben der kla­ren und ein­fa­chen Übersichtlichkeit der ein­zel­nen Templates bie­tet sich ein wei­te­rer unschlag­ba­rer Vorteil:

Für eine indi­vi­du­el­le Überarbeitung und dem Hinzufügen eige­ner Funktionen zu einem bestehen­den Theme muss kei­ne ein­zi­ge Theme-Datei mehr ange­fasst wer­den. Die bis­lang gro­ße Fehlerquelle der eigens ange­pass­ten Theme-Dateien ent­fällt kom­plett.

Modifikationen und eige­ne Funktionen kön­nen über die Action Hooks direkt in die Templates ein­ge­fügt wer­den, ohne die­se Dateien ändern zu müs­sen. Eigene Funktionen kön­nen wie von Zauberhand direkt an den gewünsch­ten Stellen erschei­nen. Ich fas­se zusam­men:

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

So arbeitest du mit WordPress Action Hooks

Einmal ver­stan­den ist die Arbeit mit den Action Hooks recht ein­fach. Du defi­nierst dei­nen eige­nen Hook, pro­gram­mierst dei­ne Funktion und hakst sie in den Hook ein. Einen eige­nen Hook zu erstel­len ist ein­fach, die Funktion dafür heißt do_action(). Doch bevor wir uns damit beschäf­ti­gen, gibt es noch eini­ge Dinge zu beach­ten.

Schritt 1: Darauf solltest du achten

Der wich­tigs­te Punkt ist die Übersichtlichkeit. Du soll­test alle Template-Funktionen in einer Datei sam­meln. Die functions.php ist aller­dings nicht die rich­ti­ge Datei für die­se Zwecke. Erstelle eine eige­ne Datei für die­sen Job, in der du alle Funktionen sam­melst, die für die Darstellung des Themes sor­gen.

Als gutes Beispiel darf dir hier­bei das Storefront-Theme die­nen, alle Template-Funktionen wirst du in im Ordner /inc in der Datei storefront-template-functions.php fin­den. Ich rate dir, auch eine sol­che Datei anzu­le­gen. Ein Ordner /inc ist der rich­ti­ge Platz für die­se Datei.

Du musst aller­dings WordPress noch von der Existenz der Datei unter­rich­ten. Eine Zeile Code in der functions.php sorgt dafür, das dei­ne Datei gela­den wird:

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

Dokumentiere deinen Code anständig

Sehr wich­tig ist die gute Dokumentation dei­nes Codes. Gehe davon aus, dass sich auch ande­re Menschen in dei­nem Code even­tu­ell zurecht­fin­den müs­sen. Selbst wenn das nicht der Fall ist, wirst du nach einem Jahr Probleme haben, dich in dei­nem Theme zurecht­zu­fin­den.

Eine gute Dokumentation sorgt für einen per­fek­ten Überblick zu jeder Zeit. Ich habe die­se Anforderung so gelöst:

So sollte eine gute Dokumentation aussehen.

So soll­te eine gute Dokumentation aus­se­hen. Sogar der betref­fen­de Ordner und die Dateien sind ange­ge­ben.

Schritt 2: WordPress Action Hook definieren

Innerhalb der Klammern defi­nierst du dei­nen Hook, der zum Beispiel wie folgt hei­ßen könn­te:

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

Wenn du ein­zel­ne Worte tren­nen musst, nut­ze dafür Unterstriche statt Bindestriche.

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

Diesen Hook plat­zierst du nun dort in der Theme-Datei, wo du die Funktionen haben möch­test. Du bist nicht limi­tiert hier­bei, son­dern kannst dei­ne Action Hooks fast über­all ein­set­zen. 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 ver­an­schau­licht gut die Möglichkeiten der Hooks.

Schritt 3: Die Arbeit mit den WordPress Action Hooks

Als Beispiel neh­men wir uns wie­der die Startseite des Storefront-Themes vor. Du wirst schnell fest­stel­len, dass die Arbeit mit den Hooks leicht ver­ständ­lich ist. Hier noch ein­mal der Hook der Startseite:

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

Schreibe nun dei­ne Funktionen wie gehabt in die Datei, die du dir dafür ange­legt 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 dei­ne Funktion an die betref­fen­de Stelle mit­tels Einhaken beför­dert:

<?php

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

Deine Funktion wird jetzt auf der Startseite erschei­nen. Zuerst schreibst du den Action Hook, danach den Namen dei­ner Funktion in den add_action() Tag hin­ein. So ein­fach ist das.

Schritt 4: Ein Hook, viele Funktionen

Doch wie posi­tio­niert man vie­le Funktionen mit nur einem Hook? Das Geheimnis sind die Prioritäten. Je nied­ri­ger die Zahl der Priorität, des­to wei­ter 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 tei­len sich einen Action Hook. Möglich machen das die Prioritäten, die hin­ter jeder ein­ge­hak­ten Funktion erschei­nen. Hier im Beispiel von Priorität 10 bis hin zu Priorität 70.

Diese Zahlen bestim­men die Reihenfolge der aus­ge­führ­ten Funktionen. Die 10 erscheint ganz oben, die 70 dem­entspre­chend ganz unten. Die Prioritäten ver­ge­ben wir mit dem add_action() Tag:

<?php

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

Funktionen einfach dazwischenschieben

So ein­fach kannst du die Anzeige dei­ner Datei steu­ern und im Fall unse­res Beispiels auch Funktionen in die Datei an belie­bi­ger Stelle ein­schie­ben. Setze für dei­ne Funktion ein­fach eine »Zwischenpriorität« ein.

<?php

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

Deine eige­ne Funktion wird durch die Priorität nun zwi­schen dem Storefront Homepage Content und den Produkt-Kategorien ange­zeigt.

WooCommerce: Share Buttons einfügen ohne Templatemodifikation

Jeder WooCommerce-Shop Betreiber möch­te die wich­ti­gen Share-Buttons auf der Anzeige eines ein­zel­nen Produkts ein­fü­gen. Dank der Action Hooks ist das eine Sache von weni­gen Minuten. Die betref­fen­de Datei, in die wir unse­re Share-Buttons ein­ha­ken, 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 unse­re Share-but­tons ein­ha­ken.

Viele Share-Button-Plugins bie­ten neben der auto­ma­ti­schen Integration der Share-Buttons in das Theme auch die manu­el­le Möglichkeit, die Buttons kor­rekt zu plat­zie­ren. Dies geschieht zumeist über einen Shortcode. Für die manu­el­le 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 ein­zel­nen Produkts wür­de die nöti­ge Funktion so aus­se­hen:

<?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 ein­zi­ge Funktion ein­ge­hakt 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 rich­ti­gen Stelle ohne die Template-Datei ange­fasst zu haben. Perfekt!

Fazit

WordPress Action Hooks sind eine wirk­lich gute Möglichkeit, die ein­zel­nen Dateien eines Themes über­sicht­lich und klar struk­tu­riert zu hal­ten. Eine gute Dokumentation des Codes zusam­men mit einer durch­dach­ten Ordner- und Template-Struktur bie­tet immense Vorteile, denn so fin­den sich auch ande­re Entwickler schnell zurecht.

Zudem ist die­ses moder­ne Theming sehr benut­zer­freund­lich, denn es müs­sen zum Anpassen eines Themes kei­ner­lei Dateien geän­dert wer­den. Auch mein Evolution WordPress Framework benutzt aus­schliess­lich 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.

4 Kommentare

  1. Hallo Andreas,

    vie­len Dank für Deinen sehr hilf­rei­chen Artikel. Wie wür­de man denn bei der Verwendung eines Child-Themes vor­ge­hen?

    Ohne Action-Hooks ver­än­de­re ich am Template zum Beispiel die header.php und lade die­se dann in mein Child-Theme-Order.

  2. Hallo Andreas,

    guter Artikel, vor allem wenn man bestehen­de WordPress-Sites über­neh­men und beackern muss. Speziell WooCommerce hat mir da in der Vergangenheit schon eini­ges abver­langt.

    Neue Projekte erstel­le ich ger­ne mit Grav oder Django/Wagtail, je nach Anforderungen und Voraussetzungen des Kunden weil die MVC-Unterteilung ein­deu­ti­ger ist und der Aufwand für Twig-/Djangotemplates über­schau­bar bleibt. Auch Performance und Sicherheit sehe ich hier bes­ser abge­deckt.

    Für bud­get­kri­ti­sche Projekte mit weni­ger indi­vi­du­el­len Ansprüchen (z.B. Website Weinbauer + Minishop) passt WordPress nach wie vor gut.
    Einen rich­tig fet­ten Webshop wür­de ich eher stand alo­ne (z.B. ShopWare) umset­zen, da über­steigt WooCommerce manch­mal mei­ne Schmerzgrenze.

  3. Hallo Anna,

    WordPress 4.9 hat eini­ge Dinge im Code-Bereich geän­dert, viel­leicht auch die­se Funktion. Über Beitragsbild => Beschriftung soll­test Du eine anstän­di­ge Caption bekom­men kön­nen.

    • Hallo Andreas, vie­len Dank für die schnel­le Antwort.
      Ich hat­te in mei­nem CSS einen Fehler, der jah­re­lang nicht gestört hat, aber WordPress 4.9 ist wohl stren­ger gewor­den (der Browser war nicht schuld).

Schreibe einen Kommentar

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