Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →

Dr. Web » WordPress » WordPress: Moderne Theme-Entwicklung mit Action Hooks

WordPress: Moderne Theme-Entwicklung mit Action Hooks

Artikel weiterempfehlen

  • Aktualisiert am 21. Februar 2023
  • 4 Kommentare
  • Markus Seyfferth von Markus Seyfferth
Lesedauer: 6 Minuten

Inhaltsverzeichnis

Richtig gute 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:

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:

  • 10 WordPress-Plugins, die jeder Seitenbetreiber haben sollte
  • Die 10 schönsten und interessantesten WordPress-Themes für Blogger
  • WordPress aufräumen für mehr Performance – 11 Praxis-Tipps für dich

(Artikelbild: Depositphotos)

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Lust auf mehr?

  • Michael Dobler Michael Dobler
  • 24. März 2023
Mehr als nur Stützstrümpfe in vier Farben verkaufen

WordPress Plugin Cost Calculator: komplexe Produkte im WooCommerce Shop verkaufen

Ein T-Shirt in einem WordPress Woocommerce Shop zu verkaufen ist relativ einfach. Größe und Farbe auswählen. Das war es.
  • WordPress
  • Michael Dobler Michael Dobler
  • 8. März 2023
Schlüsselübergabe erfolgt. Was nun?

WordPress Homepage: 13 Tipps für Käufer & Webdesigner

Wer eine WordPress Website betreiben möchte, kann sich mit dem Kauf einer bereits bestehenden Website eine Menge Zeit und Arbeit sparen. Klingt gut? Vielleicht.
  • WordPress
  • Markus Seyfferth Markus Seyfferth
  • 30. Dezember 2022

Web Hosting: welche Lösung ist die beste für mich?

Es gibt verschiedene Arten von Web-Hosting-Lösungen, wie Shared Hosting, VPS (Virtual Private Server) Hosting, Dedicated Hosting und Cloud Hosting. Jede dieser Optionen hat ihre eigenen Vor- und Nachteile, welche wir uns im Folgenden ansehen werden:
  • WordPress
  • Markus Seyfferth Markus Seyfferth
  • 25. November 2022
Sponsored Post

WordPress Cookie Plugins: Das „Real Cookie Banner“ im Test

Die Umsetzung der Datenschutz-Richtlinien ist ein ganzer Haufen Arbeit. Speziell dann, wenn es für einen Agenturkunden gemacht wird und man sicher gehen möchte, dass da nichts anbrennt.
  • WordPress
  • Markus Seyfferth Markus Seyfferth
  • 11. August 2022

WordPress und HTTP/2 – eine Einführung

Die Vorteile von HTTP/2 sind enorm, allerdings ist die Nutzbarkeit noch nicht ganz so einfach, wie angedacht. Schauen wir, welche Voraussetzungen für eine Nutzung von WordPress und HTTP/2 erfüllt sein müssen.

  • WordPress
  • Markus Seyfferth Markus Seyfferth
  • 24. Juni 2022

WordPress Performance: Was Websites wirklich schnell macht

WordPress ist das beliebteste Content Management System auf unserem Planeten. Die Vorteile überzeugen und die Möglichkeiten damit sind gigantisch. In Punkto Ladezeit solltest du WordPress allerdings ein wenig unterstützen, da das System standardmäßig nicht ganz so flott unterwegs ist.
  • SEO, Webdesign, WordPress

4 Antworten

  1. Rosita Werner-Schacht sagt:
    24. Oktober 2018 um 14:01 Uhr

    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.

    Antworten
  2. Robert sagt:
    24. Oktober 2018 um 13:57 Uhr

    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.

    Antworten
  3. Andreas Hecht sagt:
    11. Dezember 2017 um 13:46 Uhr

    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.

    Antworten
    1. Anna Blume sagt:
      11. Dezember 2017 um 17:18 Uhr

      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 Antworten abbrechen

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

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑