Sprache:

Suche

Theming von WordPress mit Timber - Teil 1

  • Teilen:
Theming von WordPress mit Timber - Teil 1

Einführung

Wenn Sie ein WordPress-Entwickler sind, kennen Sie sicher den Schmerz, sich Dutzende von Funktionsnamen und Parametern merken zu müssen. Am Ende schreibt jeder seine eigenen Funktionen auf der WordPress-API. Aber lokal haben wir eine sehr coole Lösung zur Verfügung.

Timber

Timber ist eine Bibliothek, die es Ihnen ermöglicht, WordPress-Themes schnell zu schreiben und Ihr PHP mit Hilfe der leistungsstarken Twig-Templating-Engine von HTML zu trennen.

Werfen wir einen kurzen Blick darauf, wie wir mit Timber arbeiten können

Einrichtung

Die Installation von Timber ist super einfach, es ist nur eine Frage eines einzigen Composers: Gehen Sie in das Verzeichnis Ihres Themes und führen Sie den folgenden Befehl aus

composer require timber/timber

Wenn Sie den Composer nicht mögen oder ihn aus irgendeinem Grund nicht benutzen können, können Sie ihn trotzdem nutzen, indem Sie ihn aus dem WordPress-Plugins-Verzeichnis installieren.

Nach der Installation stellen Sie sicher, dass Sie den Composer-Autoloader in die functions.php Ihres Themes einbinden (nur Composer)

require_once "vendor/autoload.php";

Das Holz ist jetzt bereit für den Einsatz. Lass uns eintauchen.

Die erste Seite

Erstellen wir nun unsere erste Seite, indem wir die folgenden zwei Dateien anlegen

  • index.php
  • views/index.twig

In der ersten Datei werden wir unsere PHP-Logik haben, wie z.B. das Abrufen von Beiträgen aus der Datenbank oder alles, was mit unserem Geschäft zu tun hat, und dieselbe Datei ist für das Rendern der zweiten Datei verantwortlich, die unser HTML enthält.

index.php

$context            = Timber::get_context();
$context[ 'books' ] = Timber::get_posts(['post_type' => 'book']);

Timber::render('views/index.twig', $context);

Timber::get_context() ermöglicht es uns, die gängigsten Daten, die von Views benötigt werden, wie z.B. Site-Titel, Theme-Verzeichnis-URL etc.

Timber::get_posts($args) ist dasselbe wie WP's query_posts($args) und erlaubt es Ihnen, Beiträge aus der Datenbank zu holen, und akzeptiert dasselbe Argumenten-Array wie WP_Query oder query_posts().

Timber::render() kompiliert die Twig-Datei und rendert das resultierende HTML.

Schauen wir uns nun an, wie wir mit Twig arbeiten werden.

views/index.twig

<!doctype html>
<html>
<head>
    ....
    {{ wp_head }}
</head>
<body>
....
    {% for book in books %}
        <h1>{{ book.title }}</h1>
    {% endfor %}
....
{{ wp_footer }}
</body>
</html>

Im head-Tag geben wir wp_head aus, das uns durch den Aufruf von Timber::get_context() zur Verfügung steht, dasselbe gilt für wp_footer am unteren Ende vor dem Schließen des body-Tags.

In der Mitte gehen wir in einer Schleife durch unsere Büchersammlung und geben den Buchtitel im H1-Tag aus. Die book-Variable ist eine Instanz des Timber_Post-Objekts, in dem wir eine Vielzahl von Methoden und Eigenschaften haben, die sich auf unser Buch beziehen, und Timber ist intelligent genug, um die benutzerdefinierten Felder von Post zu lesen und sie als Eigenschaften verfügbar zu machen.

Also Read: Secure WordPress website from common vulnerabilities

Lesen Sie auch: WordPress-Website vor häufigen Sicherheitslücken schützen

Sagen wir, wir haben ein benutzerdefiniertes Feld mit dem Namen des Preises wird es automatisch für uns in unserer Ansicht verfügbar sein. Wir können einfach book.price schreiben, um den Wert des benutzerdefinierten Feldes zu erhalten.

Layouts

Wenn Sie jemals eine Template-Engine verwendet haben, werden Sie mit Masterseiten oder Layout-Dateien vertraut sein,

Lassen Sie uns ein Layout-Verzeichnis im Views-Verzeichnis erstellen und eine Datei mit dem Namen base.twig erstellen. Dies wird unsere Haupt-Layout-Datei sein und alle unsere Views werden dieses Layout erweitern. Schauen wir uns an, wie der Code aussieht

views/layouts/base.twg

<!doctype html>
<html>
<head>
    ....
    {{ wp_head }}
</head>
<body>
    {% block content %}{% endblock %}
{{ wp_footer }}
</body>
</html>

Wenn unsere Ansichten diese Layout-Datei erweitern, überschreiben sie den Inhaltsblock und der Inhalt der Ansichten wird automatisch hier platziert.

Nun, da wir ein Layout haben, können wir es in unserer Homepage verwenden

views/index.twig

{% extends 'views/layouts/base.twig' %}

{% block content %}
    
    {% for book in books %}
        <h1>{{ book.title }}</h1>
    {% endfor %}
{% endblock %}

Fortsetzung folgt ...

Azeem Hassni

Azeem Hassni

I write code and i love it. I do write blogs on things which I am passionate about. I love to Explore the internet of things and whats new in web technologies. My topic of Interests include WordPress, Laravel & Magento to name a few.