Wordpress
Kati Pierson
Samstag, den 02. Januar 2016 um 18:00 Uhr

Timber: WordPress mit TWIG-Engine

Wordpress hat viele Vorteile keine Frage, doch leider besitzt es immer noch keine Template-Engine. Mit dem Plugin "Timber" wird dieses Problem gelöst.

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:

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.