Inzwischen haben Sie die grundlegenden Konzepte der Verwendung von Twig durch Timber gelesen, während Sie ein modulares WordPress-Design erstellen. Wir haben auch die Blockverschachtelung und Mehrfachvererbung mit Twig basierend auf dem DRY-Prinzip untersucht. Heute werden wir untersuchen, wie Anhangbilder, WordPress-Menüs und Benutzer in einem Design mit Twig über das Timber-Plugin angezeigt werden.

Bilder in Holz

Bilder sind eines der wichtigsten Elemente für jedes WordPress-Theme. Bei normalen WordPress-Codierverfahren werden Bilder in PHP in die normalen HTML-Bild-Tags integriert. Timber bietet jedoch einen recht umfassenden Umgang mit der img (Bild) -Tag, der modular und sauber ist.

Es sind Bilder an das Miniaturbildfeld des Beitrags angehängt. Diese können einfach über die Twig-Dateien abgerufen werden post.thumbnail. Es ist so einfach!

Verwendungszweck

Beginnen wir mit einem praktischen Beispiel. Unsere single.php Datei sieht so aus:

Hier habe ich die verwendet TimberPost () Funktion aus ganz offensichtlichen Gründen. Dies wird überall in Timber verwendet, um aus WordPress abgerufene Posts darzustellen und sie für Twig-Vorlagen verfügbar zu machen.
Da das vorgestellte Bild an die Postdaten angehängt wird, müssen wir es jetzt am Frontend abrufen. Also die Twig-Datei dafür, single.twig, sieht so aus:
# Sinlge Template: 'single.twig' # % erweitert "base.twig"% % block content% 
  
 % endblock% 
In Zeile 9 den Code post.thumbnail.src Ruft das vorgestellte Bild (Miniaturbild) des Beitrags ab und zeigt es folgendermaßen an:
Sie können diese Codesyntax verwenden, um beliebig viele Miniaturbilder abzurufen.
Es gibt noch viel mehr, mit denen Sie mit Timber experimentieren können. Zum Beispiel können Sie die Größe auch ändern über:
 
Mit der Größe ändern (), Mit dieser Funktion können Sie dem Bild, in dem sich der erste Parameter befindet, neue Bemaßungen hinzufügen Breite und der zweite ist Höhe. Wenn Sie das Bild proportional skalieren möchten, lassen Sie die Option aus Höhe Attribut. Jetzt wird die Syntax:
Das Frontend zeigt das gleiche Bild wie folgt:
Wenn Sie mehr erkunden möchten, probieren Sie das Image-Kochbuch.
Verwenden TimberImage () 
Stellen Sie sich ein Szenario vor, in dem ein Entwickler Bilder über die Bild-ID abrufen möchte oder ein externes Bild über eine URL usw. anzeigen möchte. Für einen solchen erweiterten Ansatz bietet Timber eine Klasse an, TimberImage (), um die Bilder darzustellen, die von WordPress abgerufen werden.
Verwendungszweck
Nehmen wir ein Beispiel für unser single.php Datei, die jetzt so aussieht:
Diesmal benutze ich die TimberImage () Klasse, die die Bild-ID übernimmt 8 als dessen Parameter. Der Rest der Codierroutine ist genauso. Lassen Sie uns dieses Bild über die Twig-Datei abrufen single.twig.
 
Der darin gespeicherte Wert $ context custom_img Element, d.h.. custom_img, ruft das Bild über seine ID auf, um es im Frontend wie folgt anzuzeigen:
Um das Bild über eine externe URL abzurufen, können Sie dieser Syntax folgen.
 
Dieses Mal gibt es anstelle der Bild-ID eine externe Bild-URL, die im Frontend wie folgt angezeigt wird:
Um weitere Funktionen dieser Funktion kennenzulernen, können Sie die Dokumentation überprüfen.
Menüs in Holz
Nun, wie würden Sie beim Rendern eines WordPress-Menüs mit Twig-Vorlagen vorgehen? Das ist eine knifflige Sache. Aber halt! Holz liefert Ihnen seine TimberMenu () Klasse, die Ihnen helfen kann, die WordPress-Menüs in Twig-Dateien als vollständige Schleife darzustellen. Lass uns einen Blick darauf werfen. 
Verwendungszweck
Das gesamte Konzept des Abrufens der Menüpunkte dreht sich um die Menüobjekt. Es gibt zwei Möglichkeiten, den Kontext zu definieren. Die erste besteht darin, das Menüobjekt auf jeder Seite verfügbar zu machen, indem es wie in der globalen Funktion get_context () hinzugefügt wird Functions.php Datei. Zweitens können Sie ein bestimmtes Menü mit seiner ID für eine bestimmte PHP-Vorlage hinzufügen.
Unabhängig von den beiden Methoden, sobald das Menü für das Timber verfügbar ist $ context Array können Sie alle Menüelemente davon abrufen. Aber ich bevorzuge es, es global zu definieren. Also geh zum Functions.php Datei und fügen Sie den folgenden Code ein:
Hier habe ich also einen benutzerdefinierten Funktionsaufruf definiert add_to_context. In dieser Funktion befinden sich einige Daten, die ich bei jedem PHP-Template über die get_context () Funktion. In Zeile 13 finden Sie eine Instanz von TimberMenu () gegen das Elementmenü in der $ data Array. 
Dadurch wird der Twig-Vorlage ein Standard-WordPress-Menü als Objekt zur Verfügung gestellt, das wir durchlaufen können. Das TimberMenu () Die Funktion kann Parameter wie das Menü Slug oder ID annehmen.
Erstellen wir eine Twig-Vorlage mit dem Namen menu.twig Datei.
# Menüvorlage: 'menu.twig' #  
Der obige Code führt eine Schleife innerhalb dieser Twig-Vorlage aus. Zeile # 5 führt a zum Schleife für jeden Menüpunkt und zeigt den Titel jedes Menüs an Artikel in einer ungeordneten Liste. Die Schleife läuft bis zu allen Schlüsselwertpaaren von Speisekarte Objekte werden iteriert und im Frontend aufgelistet.
Ich ging voran und nahm die menu.twig Vorlage in der base.twig Vorlage in Zeile 11.
# Basisvorlage: 'base.twig' # % block html_head_container% % include 'header.twig'% % endblock%  % include "menu.twig"% 
 % block content%  
ES TUT UNS LEID! Kein Inhalt gefunden!
 % endblock% 
  % include "footer.twig"%   
Lassen Sie uns eine Vorschau auf das Back-End (Aussehen> Menüs) meiner Demo-Website, deren Menü zwei übergeordnete Elemente und ein untergeordnetes Element enthält. 
Schauen wir uns eine Post-Seite an - seit unserer single.twig erweitert base.twig, Unser Menü erscheint automatisch auf dieser Seite.
Sie können sehen, dass sich oben in unserem einzelnen Beitrag ein Menü mit den beiden übergeordneten Elementen befindet. 
Was ist mit den untergeordneten Menüpunkten? Lassen Sie uns unsere aktualisieren menu.twig Datei, um auch die untergeordneten Elemente aufzunehmen.
# Menüvorlage: 'menu.twig' #  
Die Zeilen 9 bis 23 drucken ggf. die untergeordneten Menüpunkte. Dieses Mal zeigt das Frontend das untergeordnete Element unseres ersten übergeordneten Elements.
Für mehr Details über TimberMenu (), Überprüfen Sie die Dokumentation.
Benutzer in Holz
Benutzer können mit der WordPress-Datenbank abgerufen werden TimberUser () Klasse. Die Klasse verwendet Benutzer-ID oder Slug als Argumente, um den Benutzer abzurufen.
Da Benutzer oder Blog-Autoren mit den WP-Posts verknüpft sind, werde ich den Code von verwenden single.php, was jetzt so aussieht:
Zeile 20 initialisiert das TimberUser () Klasse und wird einem Kontextobjektelement zugewiesen, d.h.. Nutzer. Lassen Sie uns den Namen des Autors über die Twig-Vorlage anzeigen.
Meine single.twig-Vorlage hat am Ende in Zeile 21 eine neue Codezeile.
# Sinlge Template: 'single.twig' # % erweitert "base.twig"% % block content% 
  #  # #  # #  # 
post.title
 
post.get_content
 
Autor: user 
 
 % endblock% 
Der Code ruft den Namen des Autors des aktuellen Beitrags ab und zeigt ihn im Frontend an. Sie können verwenden user | print_r um zu sehen, was im TimberUser-Objekt noch verfügbar ist. 
Weitere Informationen zu dieser Klasse finden Sie in der Dokumentation. Den Code dieses Tutorials finden Sie im GitHub-Repo im Zweig ImagesMenusUsers.
Fazit
Dieser Artikel fasst die gesamte Serie zusammen. In diesen vier Artikeln habe ich untersucht, wie Timber verwendet wird, um die Twig-Templatiersprache in ein WordPress-Design zu integrieren. 
Das endgültige Repository für diese Serie befindet sich auf GitHub mit tutorialspezifischen Zweigen:
 
Tutorial # 2: Erste Schritte
 
Tutorial # 3: WordPress Cheatsheet
 
Tutorial # 4: TimberImages, TimberMenu & TimberUser
 
Weitere Informationen finden Sie in der Online-Dokumentation von Timber.
Gehen Sie diese ganze Serie durch und implementieren Sie alle erläuterten Beispiele. Ich wette, Sie werden Twig genießen. Veröffentlichen Sie Ihre Fragen im Kommentarfeld unten. Sie können mich auch über Twitter erreichen.



		
			
	   
	




Code