Timber und Twig entfachten meine Liebe zu WordPress neu

Ich habe einen guten Teil meiner beruflichen Laufbahn mit WordPress verbracht und dabei ein paar Dinge gelernt: Popularität erzeugt Verachtung, und etwas nur aufgrund der Kritik anderer abzutun, ist eine verpasste Gelegenheit.

WordPress und ich fingen großartig an, aber mit der Zeit entfernten wir uns immer weiter voneinander. Es war nicht so, dass wir weniger Zeit miteinander verbrachten, aber es fühlte sich an, als würden wir nur noch die Routine abspulen. Der Funke erlosch, und doch wusste ich, dass es ein sehr wichtiger Teil meiner Arbeit war. Manchmal ist Veränderung nötig, und da war es, als Timber uns wieder zusammenbrachte.

Ich verstehe, dass WordPress nicht für alles oder jeden das perfekte Werkzeug ist, aber was ist das schon? Es gibt eine Zeit und einen Ort dafür, und ich hoffe, einige Wege aufzuzeigen, die Sie vielleicht verpasst haben.

Was ist Twig?

Twig ist eine wunderbare Vorlagensprache für PHP. Lassen Sie sich vom Namen nicht täuschen; sie ist alles andere als zerbrechlich.

Wenn Sie jemals JavaScript-Vorlagensprachen wie Handlebars oder Mustache gesehen haben, wird Ihnen das hier bekannt vorkommen. Wenn nicht, keine Sorge; Twig ist eine Freude zu sehen, da es Ihnen eine prägnante, zugängliche Syntax zur Verfügung stellt. Werfen Sie einfach einen Blick auf dieses Beispiel von ihrer Homepage

<?php echo $var ?>
<?php echo htmlspecialchars($var, ENT_QUOTES, 'UTF-8') ?>

{{ var }}
{{ var|escape }}
{{ var|e }}         {# shortcut to escape a variable #}

Sagen Sie mir, das hat doch keine Aufregung ausgelöst!

Um eine Variable auszugeben, umgeben Sie sie einfach mit doppelten geschweiften Klammern und lassen das Dollarzeichen weg, z. B. {{ var }}. Sie können auch auf Attribute einer Variable zugreifen, so: {{ user.name }}

Kontrollstrukturen erscheinen innerhalb von {% ... %} Blöcken und sind ebenso benutzerfreundlich zu handhaben

{% for post in posts %}
  {{ post.title }}
{% endfor %}

Sie können mehr aus ihrer Dokumentation erfahren.

Stellen Sie sich vor, Sie würden Ihre WordPress-Vorlagen so schreiben…

Was ist Timber?

Timber ist das Plugin, das WordPress mit Twig vereint. Neben den Vorteilen der Nutzung von Twig ermöglicht es Ihnen, PHP von Ihren HTML-Vorlagen zu trennen. Dies wiederum gibt Ihnen eine besser durchatmende Umgebung für die Entwicklung Ihres Themes, wie wir gleich untersuchen werden.

Werfen wir einen Blick auf ein Beispiel aus der Dokumentation, und dann gehen wir es Schritt für Schritt durch

$context = Timber::get_context();
$context['post'] = new TimberPost(); // It's a new TimberPost object, but an existing post from WordPress.
Timber::render('single.twig', $context);

Die Datei `single.twig`

<article>
  <h1 class="headline">{{post.post_title}}</h1>
  <div class="body">
    {{post.content}}
  </div>
</article>

Beginnend mit `single.php` holen wir als erstes den Kontext des Themes mit Timber::get_context();. Dieses Objekt enthält Dinge wie Ihre Menüs, wp_head und wp_footer. Später werden wir sehen, wie Sie dies hinzufügen können, wenn Sie etwas global Zugängliches in Ihrem Theme benötigen. Diese Zeile werden Sie oft verwenden.

Als Nächstes müssen wir den Beitrag abrufen, den wir in unserer Vorlage anzeigen möchten. Die Verwendung von new TimberPost(); ermittelt, welcher Beitrag abgerufen werden soll.

Schließlich wollen wir etwas anzeigen. Die render-Funktion von Timber ruft unsere Twig-Datei auf und übergibt die gerade gesammelten Daten.

Eine letzte Bombe, und ich hoffe, es ist nicht zu viel: Timber bietet integrierte Unterstützung für Advanced Custom Fields.

Warum Twig verwenden?

Nach einiger Zeit mit WordPress finden Sie vielleicht, dass Sie den Wald vor lauter Bäumen im verwirrenden Tanz zwischen PHP und HTML nicht mehr sehen. Das bedeutet nicht, dass alle Themes so sind, aber man sieht, wie leicht es passieren kann.

Was ich an Timber recht schön fand, ist, dass es dieses potenzielle Problem abmildert, indem es Raum zwischen beiden schafft. Sie mischen nie PHP mit HTML, aber sie reden immer noch miteinander. Sie werden feststellen, dass die Gespräche sinnvoller sind, da dies den besten Teilen von WordPress die Möglichkeit gibt, zu glänzen.

Zum Beispiel ist unsere Datei `single.php` nur 3 Zeilen lang, und das nur für den Umgang mit unseren Daten. Bis diese Daten unsere Ansicht erreichen, sind wir glücklich zu wissen, dass wir alles haben, was wir brauchen – alles, was bleibt, ist, es zu formatieren.

Erste Schritte

Installation

Also legen wir los! Sie können dies über composer installieren, wenn Sie dazu neigen, aber der Kürze halber installiere ich es über **Plugins > Neu hinzufügen** und suche nach Timber und Twig. Alternativ können Sie es aus dem Plugin-Verzeichnis herunterladen und auf Ihre Website hochladen.

Starter-Theme

Timber wird mit einem minimalistischen Starter-Theme geliefert, das perfekt ist, um sofort loszulegen. Sobald das Plugin installiert ist, finden Sie den folgenden Ordner, den Sie in Ihren Themes-Ordner kopieren können. Dieser sollte sich unter `wp-content/plugins/timber/timber-starter-theme` befinden. Oder, wenn Sie nur einen Blick darauf werfen möchten, können Sie das Starter-Theme-Repository durchsuchen.

Auf den ersten Blick werden Sie feststellen, dass hier nichts Ungewöhnliches vor sich geht. Wo ist die Magie? Es ist in Ordnung, an diesem Punkt besorgt zu sein, also graben wir ein wenig tiefer.

functions.php

Der Zweck Ihrer `functions.php`-Datei bleibt weitgehend derselbe. Sie können sie wie gewohnt verwenden, sei es zur Deklaration benutzerdefinierter Beitragstypen oder zur Definition Ihrer benutzerdefinierten Funktionen. Mit dem Timber Starter Theme werden Sie jedoch eine Klassendeklaration im Inneren bemerken. Die bemerkenswerteste Methode dieser Klasse ist add_to_context.

Von hier aus können wir Elemente hinzufügen, auf die wir in unserem gesamten Theme zugreifen möchten. Nehmen wir zum Beispiel an, ich habe ein Menü im Admin-Dashboard mit dem Slug primary-menu erstellt, ich könnte es wie folgt in den globalen Kontext einfügen

$context['primary_menu'] = new TimberMenu('primary-menu');

Jetzt kann ich darauf so zugreifen

<nav role="navigation">
  <ul>
  {% for item in primary_menu.get_items %}
    <li class="{{item.classes | join(' ')}}">
      <a href="{{item.get_link}}">{{item.title}}</a>
    </li>
  {% endfor %}
  </ul>
</nav>

Nicht schlecht! Ein weiteres Beispiel, das ich teilen möchte, ist die Verwendung von etwas wie dieser Multi-Umgebungs-Konfiguration. Dies erstellt eine Konstante zur Kennzeichnung der aktuellen Umgebung, z. B. Entwicklung, Staging oder Produktion. Ich kann diese Informationen leicht in mein Theme ziehen, indem ich das Folgende zu meiner add_to_context-Methode hinzufüge

$context['env'] = WP_ENV;

In meinen Vorlagen kann ich {{ env }} aufrufen, um mir anzuzeigen, auf welcher Umgebung meine Website läuft.

Erweitert und Blöcke

Werfen wir einen Blick auf `index.php`.

$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 );

Okay, die meiste davon haben wir schon gesehen. Es passiert hier ein wenig mehr mit einer Array von Vorlagen. All das tut, ist, `home.twig` am Anfang des Arrays hinzuzufügen, wenn is_home() wahr zurückgibt.

Nehmen wir an, is_home() gibt falsch zurück, das wird es also veranlassen, `index.twig` zu rendern. Twig-Dateien leben im Verzeichnis `views`, also beginnen wir dort, in unserer Datei `index.twig`

{% extends "base.twig" %}

{% block content %}
  {% for post in posts %}
    {% include 'tease.twig' %}
  {% endfor %}
{% endblock %}

Hier gibt es ein paar neue Dinge einzuführen, nämlich extends und block. Wenn Sie nicht sicher sind, was sie tun, bin ich sicher, Sie werden es bald „twigen“.

Wenn wir extends aufrufen, sagen wir "verwende dieses Layout für alle Inhalte, die ich in dieser Vorlage deklariere". Dann haben Sie in `base.twig` etwas wie das hier

<!doctype html>
<html>
  <head>
  ...
  </head>
  <body>
  ...
  {% block content %}
    No content found!
  {% endblock %}
  </body>
</html>

Normalerweise würden wir in WordPress unseren Footer und Header in jede Vorlage einbinden, aber hier ist alles in einer Datei, von der wir unserer Vorlage sagen, dass sie sie erweitern soll.

Sie können Ihre Blöcke nennen, wie Sie möchten. Diese Zeichenkette "Keine Inhalte gefunden!" wird nur angezeigt, wenn nichts in einem content-Block bereitgestellt wird. Im Timber Starter Theme sehen Sie, dass sie zusätzliche Blöcke für Teile des Headers und Footers deklariert haben, aber es geht darum, das zu verwenden, was für Sie sinnvoll ist.

Benutzerdefinierte Vorlage

Genug von diesem lockeren Gerede, es ist Zeit, unsere eigene Vorlage zu erstellen! Dieser Leitfaden verwendet Advanced Custom Fields sowie einige zusätzliche Funktionen von Timber + Twig, die Sie sicher begeistern werden.

Wir erstellen ein sehr einfaches Beispiel einer Seite mit einem Bannerbild und etwas Text darüber. Ein Helden-Element, wenn Sie so wollen. Unser Held wird uns die Ausdrucksstärke von Twig offenbaren und unser mentales Modell von WordPress, wie wir es kennen, herausfordern. Wir stellen uns vor, dass unser Helden-Element mit Advanced Custom Fields definiert wurde. Sie können ein benutzerdefiniertes Feld mit folgendem aufrufen: post.get_field('field_name');. Wenn Sie die eigenen benutzerdefinierten Felder von WordPress verwenden, ist es so einfach wie post.field_name.

Es gibt ein paar Wege, um eine benutzerdefinierte Seiten-Vorlage zu erstellen, und da ich im Einzelfall nicht immer die endgültige URL kenne, gehe ich den Weg der "Benutzerdefinierten PHP-Datei". Schließlich, fangen wir an zu tippen!

base.twig

Für unser Basis-Layout habe ich die Layout-Datei des Timber Starter-Themes mit der Index-Datei von HTML5 Boilerplate kombiniert.

<!doctype html>
<html class="no-js" {{site.language_attributes}}>
  <head>
    <meta charset="{{site.charset}}">

    <title>   
      {% if wp_title %}
        {{ wp_title }} - {{ site.name }}
      {% else %}
        {{ site.name }}
      {% endif %}
    </title>
    
    <meta name="description" content="{{site.description}}">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="{{ site.theme.link }}/style.css">
  </head>
  <body>
    
    <nav role="navigation">
      <ul>
        {% for item in primary_menu.get_items %}
          <li class="nav-item {{item.classes | join(' ')}}">
            <a class="nav-link" href="{{item.get_link}}">{{item.title}}</a>
          </li>
        {% endfor %}
      </ul>
    </nav>
      
    <div class="wrapper">
      {% block content %}
       No content found!
      {% endblock %}
    </div>

  </body>
</html>

Der Aufruf von {{ site.theme.link }} kann sehr nützlich sein, und wenn Sie Wiredep + Gulp verwenden, können Sie sich diesen Ausschnitt ansehen, um zu erfahren, wie Sie ihn in Ihren Workflow integrieren können.

Benutzerdefinierte Vorlagendateien

Wie wir bereits gesehen haben, wird Ihre PHP-Datei einfach sein. Ein paar Zeilen in `your-custom-page.php` sollten ausreichen

<?php
/*
 * Template Name: Your Custom Page
 */

$context = Timber::get_context();
$post = new TimberPost();
$context['post'] = $post;
Timber::render( 'your-custom-page.twig', $context );

Das ist alles, was wir brauchen! Unsere Helden-Datei `your-custom-page.twig` wartet…

{% extends 'base.twig' %}

{% block content %}

<section>
  <h1>{{ post.get_field('hero_title') }}</h1>
  
  <img src="{{ TimberImage(post.get_field('hero_image')).src }}" alt="{{ TimberImage(post.get_field('hero_image')).alt }}">
</section>

{% endblock %}

Wir verwenden hier TimberImage, um die benötigten Informationen über das Bild zu erhalten. In diesem Fall sind das die URL und der Alt-Text.

Wir könnten es dabei belassen... aber da wir schon gut dabei sind, nutzen wir den resize-Filter. Dieser benötigt 3 Argumente: Breite, Höhe und Zuschnitt. Wir werden nur die Breite angeben.

Lassen Sie uns unser Heldenbild refaktorisieren, um es etwas responsiver zu gestalten

<img alt="{{ TimberImage(post.get_field('hero_image')).alt }}"
  srcset="
    {{ TimberImage(post.get_field('hero_image')).src | resize(1600)}} 1600w,
    {{ TimberImage(post.get_field('hero_image')).src | resize(1000)}} 1000w,
    {{ TimberImage(post.get_field('hero_image')).src | resize(700)}} 700w
 "
  src="{{ TimberImage(post.get_field('hero_image')).src | resize(1000)}}"
  sizes="100vw"
>

Ja, das können Sie tun.

Fazit

WordPress hat viel zu bieten, und ich bin schuldig, es als selbstverständlich anzusehen. Das, was man liebt, ist an sich schon eine Belohnung, und ich glaube, dass es eine großartige Gelegenheit ist, neue Fähigkeiten zu erlernen und die Motivation neu zu beleben, wenn man sich etwas Zeit nimmt, um etwas auf neue Weise anzugehen. Ich kann Ihnen nicht sagen, wie viele Websites ich mit WordPress erstellt habe, aber ich kann Ihnen den genauen Moment sagen, als mein Verstand explodierte, als ich Timber zum ersten Mal benutzte.

Ressourcen

• Timber Dokumentation
• Twig Dokumentation