Mit HTML wird das Gerüst einer Website gebaut. Mit CSS malt man die Website an.…
WordPress gehört heute bei einer Website zum guten Ton. Andere Systeme für Blogger haben kaum eine Chance. Es gibt Tausende Plugins für dieses System und einige davon sind richtig gut. Einige bieten fertige Lösungen und andere Programmierern mehr Komfort. Timber gehört in die Kategorie: Sofa für Entwickler. Das Plugin ermöglicht die Verwendung der Template-Engine TWIG. Endlich auch in Daten und Ansicht trennen.
TWIG mit Timber in WordPress
Timber stellt, wie gesagt, die Template-Engine TWIG in WordPress zur Verfügung. Somit ist eine Trennung von Code und Design möglich. Außerdem ermöglicht es komfortabel die Umrechnung logische und mathematische Funktionen. Timber bietet dazu noch ein ausgefeiltes Routing-System.
Viel ist dazu nicht nötig. Zuerst installiert man das Plugin Timber. Dazu empfehlen sich zwei weitere Plugins: Die Debug-Bar und die Timber-Debug-Bar.
Die Debug-Bar-Vorteile in WordPress
Die Debug-Bar fügt der Werkzeugleiste ein Menü zur Fehlersuche hinzu, das die Abfrage, Cache und andere hilfreiche Informationen zur Beseitigung von Fehlern anzeigt.
Das Plugin geht sogar noch weiter, wenn in der wp_config.php die Zeile:
define('WP_DEBUG', false);
in:
define('WP_DEBUG', true);
also der Debug-Modus aktiviert wurde, zeigt es auch alle PHP-Warnungen und -Hinweise, um sie leichter zu finden.
Wenn SAVEQUERIES aktiviert wurde, werden die MySQL-Abfragen aufgezeichnet und angezeigt. Dies geschieht ebenfalls in der wp_config.php. Einfach unter der Zeile mit dem Debug-Modus diese Zeile einfügen:
define('SAVEQUERIES', true );
Neben der Timber-Erweiterung für die Debug-Bar gibt es noch andere Erweiterungen z.B. diese:
- Debug Bar Post Types https://de.wordpress.org/plugins/debug-bar-post-types/
- Debug Bar Constants https://de.wordpress.org/plugins/debug-bar-constants/
- Debug Bar Actions and Filters Addon https://de.wordpress.org/plugins/debug-bar-actions-and-filters-addon/
- Debug Bar Slow Actions https://de.wordpress.org/plugins/debug-bar-slow-actions/
- Debug Bar – Sidebars & Widgets https://wordpress.org/plugins/debug-bar-sidebars-widgets/
- Debug Bar Roles and Capabilities https://wordpress.org/plugins/debug-bar-roles-and-capabilities/
- Debug Bar Shortcodes https://wordpress.org/plugins/debug-bar-shortcodes/
TWIG-Extensions in Timber integrieren
Damit auch die Date()-Methoden und viele mehr aus TWIG genutzt werden können müssen noch die Extensions installiert werden. Diese gibt es auf Github zum Download.
Die Dateien aus dem Ordner „Twig-extensions-masterlibTWIG“ in der ZIP-Datei müssen in das Verzeichnis „wp-contentpluginstimber-libraryvendortwigtwiglibTwig“.
WordPress-Theme mit TWIG
Ein bestehendes Theme greift jedoch nicht auf Timber zu. Dazu muss in dem Theme Timber konfiguriert werden. Dazu wird erst einmal ein Ordner „mytheme“ im Verzeichnis „wp-contentthemes“ angelegt.
Im „mytheme“-Ordner wird wiederum ein Ordner „views“ benötigt. In diesem werden später die Twig-Dateien abgelegt. Doch jetzt benötigen wir im Theme-Ordner erst einmal eine Datei „functions.php“ mit folgendem Inhalt:
<?php ini_set('display_errors', 'On'); error_reporting(E_ERROR); define('THEME_URL', get_template_directory_uri()); // Diverse Timber-Konfigurationen add_filter('get_twig', 'add_to_twig'); add_filter('timber_context', 'add_to_context'); // Alles mögliche für Timber-Seitenauslieferung bereitstellen function add_to_context($data) { $data['time'] = time(); return $data; } function add_to_twig($twig) { /* Hier können eigenen Twig-Erweiterungen eingefügt werden */ $twig->addExtension(new Twig_Extension_StringLoader()); /* Date-Extension laden erst prüfen, dann aufrufen */ if (class_exists('Twig_Extensions_Extension_Date')) { $twig->addExtension(new Twig_Extensions_Extension_Date()); } return $twig; }
Damit WordPress das Theme erkennt fehlt noch die css-Datei. Diese muss „style.css“ heißen und den folgenden Inhalt haben:
/* Theme Name: MyTheme Theme URI: http://www.url.de/themes/mytheme Author: Ihr gute Name Author URI: http://url.de/ Description: Version: 08-15 Beta License: License URI Tags: twig, scss Text Domain: mytheme */
So jetzt haben wir eine Datei für das Layout (CSS-Datei), eine für die Funktionen („functions.php“), fehlt nur noch die Daten-Datei und die Struktur-Datei für die Startseite.
Die Struktur-Dateien sind die PHP-Dateien im Theme-Ordner. Mit der Datei „index.php“ wird das Theme auswählbar werden. Im Vergleich zu normalen WordPress-Themes stellt sie jetzt nur noch die Daten zur Verfügung.
<?php /** * The main template file * This is the most generic template file in a WordPress theme * and one of the two required files for a theme (the other being style.css). * It is used to display a page when nothing more specific matches a query. * E.g., it puts together the home page when no home.php file * * * @package WordPress * @subpackage MyTheme * @since MyTheme 0.1 */ /* Ist das Plugin "Timber" aktiviert? */ if (!class_exists('Timber')) { echo 'Timber not activated. Make sure you activate the plugin in <a href="/wp-admin/plugins.php#timber">/wp-admin/plugins.php</a>'; } $context = Timber::get_context(); $context['posts'] = Timber::get_posts(); $templates = array('index.twig'); if (is_home()) { array_unshift($templates, 'home.twig'); } Timber::render($templates, $context); ?>
Die TWIG-Datei liegt im Verzeichnis „views“ und heißt ebenfalls „index“ mit der Endung „twig“ also „index.twig“.
Erste Seite
Soooooo jetzt haben wir ein leeres Theme mit Twig-Unterstützung. Ein bisschen Bootstrap und SCSS noch gefällig?
WICHTIG: Debug-Tools und Informationen sollten nur in der Entwicklungsumgebung verwendet werden.