© Liashko/Shutterstock.com
Schneller ins WordPress-Theming einsteigen mit Twig und Timber

Das eigene WordPress Theme


Für WordPress steht eine große Anzahl an fertigen Themes für unterschiedliche Arten von Websites zur Verfügung. Neben dem Themes-Verzeichnis auf www.wordpress.org existieren noch unzählige Markplätze, auf denen Themes zum Kauf angeboten werden. Doch für Projekte, die Wert auf ein eigenes Branding legen, ist ein maßgeschneidertes Theme unvermeidlich.

WordPress hat seine eigenen Standards, um ein Theme umzusetzen. Templates sind üblicherweise so programmiert, dass in ihnen HTML und PHP vermischt sind. Für die Erstellung oder Anpassung eines Templates sind deshalb PHP-Kenntnisse erforderlich – zumindest muss man bereit sein, sich ein wenig in PHP zu vertiefen. Auch werden in WordPress viele PHP-Funktionen in Form sogenannter Templatetags angeboten. Diese Vermischung birgt ein gewisses Risiko in sich. Da PHP auf dem Server ausgeführt wird, können versehentlich Sicherheitslücken entstehen, wenn Daten nicht korrekt validiert oder bereinigt werden.

Eine Möglichkeit, um das Risiko zu minimieren, ist der Einsatz einer Template-Engine. Mit einer solchen kann man nach dem bekannten „Model View Controller“-Muster arbeiten, auf dem viele moderne Frameworks basieren. Ein wichtiger Vorteil dieses Ansatzes ist, dass Programm- und Layoutlogik getrennt werden.

Eine derzeit in der PHP-Welt sehr beliebte Template-Engine ist Twig [1]. Seinen Ursprung hat Twig im Symfony-Framework [2], doch wird es inzwischen auch von vielen anderen Projekten genutzt. Das bekannteste Beispiel ist wahrscheinlich Drupal 8, aber auch Systeme wie eZ Publish, Bolt, Grav, Craft oder Sculpin setzen es ein. Dass Twig in Zukunft als Standard für WordPress genutzt wird, ist indes eher unwahrscheinlich.

Der Einsatz von Twig bietet einige Vorteile. Man begegnet damit typischen Vorbehalten, die nicht wenige davon abhalten, mit WordPress zu arbeiten: Zum Beispiel ist nicht jeder Frontend-Entwickler oder Webdesigner bereit, viel Zeit in PHP zu investieren. Viele PHP-Entwickler kennen sich mit WordPress zudem nur begrenzt aus, was insbesondere deshalb problematisch ist, da es in WordPress große Abweichungen zu gängigen PHP-Standards gibt. Nicht zuletzt müssen Entwickler, die von anderen Redaktionssystemen kommen, komplett umdenken.

Twig sieht eine klare Trennung zwischen PHP- und HTML-Code vor. Das HTML wird dabei in sogenannte Views ausgelagert. Twig nimmt Daten entgegen und rendert über diese Views das finale HTML. Auch lässt sich so einfacher objektorientiertes PHP schreiben, weil die Programmlogik ohne Layoutcode auskommt. Dies macht es einfacher, getrennt an Frontend- und Backend-Code zu arbeiten.

Für WordPress gibt es verschiedene Plug-ins zur Nutzung von Twig, das bekannteste ist sicherlich Timber [3]. Das liegt wohl daran, dass es für Timber eine gute Dokumentation [4] und auch eine Einführung als Videoreihe [5] gibt. Weiterer Vorteil ist die Unterstützung des beliebten Plug-ins Advanced Custom Fields [6], sowohl in der freien als auch in der Pro-Variante. Auch kann Timber in Kombination mit dem E-Commerce-Plug-in WooCommerce [7] genutzt werden.

Installation

Um Twig zu nutzen, muss das Timber Plug-in [8] schon installiert sein (Twig selbst wird mit dem Plug-in gleich mitgeliefert). Es gibt zwei Möglichkeiten, Timber zu installieren. Am einfachsten ist es, das Plug-in direkt über das WordPress-Backend hinzuzufügen. Alternativ kann Timber mit dem PHP-Paketmanager Composer installiert werden. Dies setzt natürlich Erfahrung mit Composer voraus. Benötigt wird mindestens PHP 5.3, Timber setzt noch auf Twig 1.x. Inzwischen gibt es zwar schon Twig 2.0, aber dafür wird mindestens PHP 7.0 verlangt. Zusätzlich kann beim Entwickeln auch die Timber Debug Bar [9] von Nutzen sein, um zu sehen, was in WordPress geladen wurde. So sind etwaige Fehler schneller zu finden.

Im Theme kann Timber über composer.json als Abhängigkeit deklariert und über ein composer install installiert werden:

{ "name": "meins/mein-timber-theme", "type": "wordpress-theme", "license": "GPL-2.0+", "require": { "timber/timber": "^1.5.0" } }

Spätestens in der functions.php des aktiven Themes muss der Composer-Autoloader geladen werden. Es ist auch möglich, dies früher im WordPress-Bootstrap-Prozess zu erledigen, zum Beispiel als Must-Use-Plug-in oder in der Konfigurationsdatei wp-config.php. Über die Nutzung der Klasse TimberSite kann die Verknüpfung zwischen WordPress und Twig he...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang