Kick-Start WordPress-Entwicklung mit Twig Erste Schritte

Jetzt verstehen wir, dass Twig-zusammen mit dem WordPress-Plugin Timber-Entwickler dabei helfen kann, modularen Code zu schreiben, während WordPress-Themes entwickelt werden. Mit einem solchen modularen Ansatz können Sie die Logik und die Ansichtsebene Ihrer Webanwendung separat behandeln. Lassen Sie uns zu etwas mehr technischen Dingen springen: Erstellen von Twig-Vorlagen, Konvertieren von HTML in Twig-Dateien und Rendern von Logik oder Daten mit Twig-Vorlagen.

Holz installieren

Zunächst werde ich Timber installieren, ein WordPress-Plugin, das die Integration der Twig-Templating-Engine in WP unterstützt. Also machen wir's.

• Melden Sie sich in Ihrem WordPress-Dashboard an.
• Gehe zu Plugins> Neu hinzufügen.
• Suchen Sie nach dem Timber-Plugin.
• Installieren und aktivieren Sie das Plugin.

Nach der Installation von Timber können Sie jetzt mit dem Aufteilen Ihrer Vorlagendateien beginnen Daten und Aussicht Dateien.

Erstellen einer Zweigvorlage

Bevor wir mit der Erstellung von Twig-Vorlagen beginnen, gehe ich davon aus, dass Sie eine Art WordPress-Setup vor Ort haben. Für dieses spezielle Tutorial lautet mein Setup:

• Eine localhost WP-Installation (ich verwende DesktopServer von ServerPress).
• Timber Plugin installiert und aktiviert.
• Optional: Beliebiges Basis- / Starter-Thema (ich verwende mein eigenes, d. H. Ordentlich).

UpStatement hat auch ein Timber Starter Theme erstellt.

Lass uns anfangen. Ich möchte oben auf meiner Homepage eine Begrüßungsnachricht anzeigen. Wie würde ich es ohne Twig machen? Wahrscheinlich würde ich HTML-Code in die PHP-Datei einfügen und die Begrüßungsnachricht wiederholen, wie im folgenden Codebeispiel. Meine index.php Datei sieht so aus.

Auf der Startseite meiner lokalen WordPress-Installation wird oben eine Willkommensnachricht angezeigt. Hier ist der Screenshot.

Problem

Das Problem bei diesem Ansatz ist, dass wir Daten / Logik mit Sicht vermischen. Je komplexer diese Datei wird, desto schwieriger ist es zu pflegen, geschweige denn zu verstehen. Zum Beispiel, wenn Sie die WordPress-Schleife nach diesem Code mit ein paar Argumenten hinzufügen und danach filtern und paginieren. Darüber hinaus sieht PHP in HTML nicht gut aus, wenn Sie mit der Logik fertig werden.

Modularer Ansatz

Um es modular zu gestalten, können wir uns unsere Inhalte in Form von Blöcken oder Komponenten auf der Homepage vorstellen. Standardmäßig kann es zwei vollständige geben, d. H. Beiträge von The_Loop und Paginierung. Da wir nun oben eine weitere Komponente hinzufügen möchten, d. H. Die Willkommensnachricht, erstellen wir eine Twig-Datei für diese Komponente. 

Öffnen Sie eine neue leere Datei im Editor und fügen Sie die folgenden Codezeilen ein.

 
 
Willkommen auf meiner Website!
 
 

Erstellen Sie einen neuen Ordner im Stammverzeichnis Ihres Themes Ansichten und speichern Sie diese Datei mit der  .Zweig Erweiterung. Zum Beispiel habe ich die Datei als gespeichert welcome.twig.

Rendern der Zweigvorlage

Timber stellt uns einige nützliche Funktionen zur Verfügung, eine davon ist die Renderfunktion. Man kann es so nennen:

Timber :: render ();

Diese Funktion kann bis zu vier Argumente annehmen. Da dies nicht Gegenstand dieses Artikels ist, können Sie in den Timber-Dokumenten nachlesen. Wir können den Namen jeder Twig-Datei übergeben, die in der vorhanden ist Ansichten Ordner Ihres Designs zu dieser Funktion.

Lassen Sie uns die Willkommensnachricht in der index.php Datei.

Holz macht den welcome.twig Datei, lädt den HTML-Code und zeigt die neue modifizierte Ansichtsebene am Frontend wie folgt an: 
Das machen() Funktion dauert welcome.twig als sein Argument, liest diese Datei jedoch automatisch, solange sich die Zweigvorlagen im Ordner mit dem Namen befinden Ansichten. 
Wenn Sie einen benutzerdefinierten Namen / Pfad für den Ordner verwenden möchten, müssen Sie den Pfad dieses Ordners angeben. Zum Beispiel habe ich einen Zweigordner im Stamm meines Themas erstellt und ihn dem Argument der Renderfunktion hinzugefügt.
Der offizielle Ladeauftrag
Timber wird zuerst in das untergeordnete Design schauen und dann auf das übergeordnete Design zurückgreifen (wie bei der WordPress-Logik). Die offizielle Ladereihenfolge lautet:
 
Benutzerdefinierte Speicherorte
 
Verzeichnis des aufrufenden PHP-Skripts (aber kein Theme)
 
Kind Thema
 
Übergeordnetes Thema
 
Verzeichnis des aufrufenden PHP-Skripts (einschließlich des Designs)
 
Element 2 wird über anderen eingefügt, damit bei Verwendung von Timber in einem Plugin die Zweigdateien im Verzeichnis des Plugins verwendet werden.
Nun enthält die index.php-Datei keinen HTML-Code und rendert eine Twig-Vorlage.
Nun senden wir einige dynamische Daten von index.php zum welcome.twig Datei und rendern es mit Timber.
Senden von Daten über Timber an Twig-Dateien
Um Daten aus der PHP-Datei an die Twig-Datei zu senden, müssen Sie ein Kontext-Array definieren. Die Renderfunktion benötigt ein Array von Daten, um Twig-Vorlagen mit einer Art Kontext zu versehen. Nennen wir das Array  $ context, das ist ein assoziatives Array, d. h. es nimmt die Schlüsselwertpaare auf. 
Fügen wir ein Schlüssel-Wert-Paar hinzu, das eine dynamische Willkommensnachricht wäre, die unsere PHP-Datei an die Twig-Datei senden würde.
Datendatei
Meine index.php Datei sieht jetzt so aus.
Also in der index.php Datei definierte ich eine leere $ context Array in Zeile # 8. Dann habe ich in Zeile 11 eine Variable erstellt $ var mit dem Wert "Dynamische Nachricht". In Zeile 14 habe ich einen Schlüssel erstellt die Nachricht das ist gleich $ var.
In Zeile 17 habe ich die Renderfunktion mit der Funktion aufgerufen welcome.twig Datei, aber diesmal braucht es ein zusätzliches Argument, d. h $ context Array. Dieses neue Argument enthält die Daten, die Timber von der PHP-Datei an die Twig-Datei sendet.
Also haben wir das Context-Array definiert und eine dynamische Nachricht hinzugefügt (Sie können anderen Benutzern eine andere Nachricht anzeigen, indem Sie eine Art Logik hinzufügen, z. B. den Vornamen des aktuellen Benutzers anzeigen).. 
Vorlagendatei
Nun müssen wir diese Daten verwenden, d.h.. die Nachricht, in der Twig-Datei. Wir können eine Variable in unserer Twig-Vorlage wiedergeben, indem Sie doppelte Klammern um sie herum setzen. Um $ var in einer Twig-Datei auszudrücken, können wir beispielsweise schreiben var. Genau das habe ich getan.
 
 
 die Nachricht 
 
 
Der Wert von die Nachricht wird innerhalb der h2-Tags gedruckt. Ich weiß, es ist so einfach und der Code sieht ziemlich sauber aus. 
Das ist es! Speichern Sie den Code und zeigen Sie die dynamische Begrüßungsnachricht am Frontend an. Hier ist der letzte Screenshot.
Fazit
Zusammenfassend können Sie nun die PHP-Datei zum Codieren der Logik und zum Bereitstellen von Daten für eine Twig-Vorlage verwenden, die HTML enthält und die Twig-Variablen oder -Funktionen innerhalb der doppelten geschweiften Klammern darstellt.
Dieser modulare Ansatz kann zu einer separaten Vorlagendatei für jede Komponente in Ihrem WordPress-Design führen. Stellen Sie sich vor, Sie haben eine message.twig-Komponente, die Sie an beliebiger Stelle im Design verwenden können, um jede gewünschte Nachricht beliebig oft anzuzeigen. 
Dies war eine grundlegende Implementierung von Twig with Timber. In den nächsten beiden Artikeln werde ich jedoch über das Timber WordPress Cheatsheet schreiben, Bilder mit Timber verwalten und Menüs erstellen, ohne die verrückte Walker-Funktion zu verwenden.
Wenn Sie Fragen haben, posten Sie sie in den Kommentaren unten oder wenden Sie sich an Twitter. Sie können auch meinen Theme-Code in diesem GitHub-Repo betrachten.



		
			
	   
	




Code