Im vorigen Artikel habe ich über die Integration der Twig-Templating-Engine in WordPress über Timber beschrieben und wie Entwickler Daten aus den PHP-Dateien an die Twig-Dateien senden können. Lassen Sie uns besprechen, wie Sie eine Basisvorlage mit Twig erstellen, die Vorteile dieser DRY-Technik und ein Timber-Twig-WordPress-Cheatsheet.

Erstellen einer Basisvorlage in Twig

Twig arbeitet mit dem DRY-Prinzip (Don't Repeat Yourself). Eine der wichtigsten Funktionen von Twig ist Basisvorlagen mit Verschachtelung und Mehrfachvererbung. Während die meisten Leute PHP-Includes linear verwenden, können Sie unendlich viele verschachtelte Blöcke erstellen, um Ihre Seitenvorlagen besonders zu steuern. 

Stellen Sie sich Ihre Basisvorlage als übergeordnete Vorlage mit darin enthaltenen Blöcken vor. Eine untergeordnete Vorlage kann eine übergeordnete Vorlage erweitern und alle darin enthaltenen Blöcke oder Blöcke ändern, ohne den Code neu zu schreiben, was in beiden Vorlagen ähnlich wäre.

Schauen wir uns ein Beispiel für eine übergeordnete oder Basisvorlage an: a base.twig Datei. Sie können es mit anderen Twig-Vorlagen im Ansichtenordner ablegen. Sie rufen diese Datei in einer Ihrer Twig-Vorlagen auf, in der sie als übergeordnete Vorlage für diese bestimmte Twig-Datei verwendet wird. Geben Sie die folgenden Codezeilen ein, um a zu erstellen  Ansichten Mappe. Diese Basisvorlage bietet eine Basisstruktur für Ihr WordPress-Design. Hier ist der Code eines einfachen base.twig Datei.

# Basisvorlage: base.twig # % block html_head_container% % include 'header.twig'% % endblock%  
 % block content%  
ES TUT UNS LEID! Kein Inhalt gefunden!
 % endblock% 
  % include "footer.twig"%   

Kommentare in Zweig: # Basisvorlage: base.twig #

Sie können Kommentare in Twig mit der Syntax # comment here # schreiben. Verwenden Sie zum Kommentieren eines Teils einer Zeile in einer Vorlage die Kommentarsyntax #… #. Dies ist zum Debuggen oder zum Hinzufügen von Informationen für andere Vorlagenentwickler oder für Sie selbst nützlich. Sie finden einen Kommentar in Zeile 1.

Blöcke: % block html_head_container% % endblock%

Die gesamte Philosophie von Twig and Timber dreht sich um den modularen Code-Ansatz in WordPress. Ich habe wiederholt über die Idee geschrieben, dass die Daten in Twig in Form von Komponenten oder Blöcken behandelt werden. 

Blöcke dienen der Vererbung und dienen gleichzeitig als Platzhalter und Ersetzung. Sie sind ausführlich in der Dokumentation zum extended Tag dokumentiert.

% block add_block_name_here% Blockiert hier den Inhalt % endblock%

Im oben beschriebenen Code finden Sie einen aufgerufenen Block html_head_container was die Zeile # 3 bis Zeile # 7 umfasst. Jede Vorlage, die diese base.twig-Basisvorlage erweitert, kann entweder den Inhalt des gleichen Blocks erben oder ändern, um etwas anderes hinzuzufügen. Es gibt einen anderen Block namens Inhalt % block content% bei welcher die Zeile 13 bis Zeile 18 überspannt.

In ähnlicher Weise wird das Konzept zum Erstellen von Blöcken erweitert, wo Sie auch unendlich viele verschachtelte Blöcke erstellen können. Dies ist das wahre TROCKEN-Prinzip.

Include-Anweisung: % include "header.twig"% 

Twig-Vorlagen können andere Twig-Vorlagen enthalten, genau wie in PHP. Diese base.twig Die Datei wird ein allgemeiner Wrapper sein und ist ohne ihren unvollständig Header und Fußzeile Dateien. Daher die Syntax % include "file.twig"% hilft uns dabei, zwei verschiedene Twig-Vorlagen einzubinden:

• Die Header-Vorlage % include "header.twig"% in Zeile 5.
• Die Fußzeilenvorlage (% include "footer.twig"% on line # 23.

Basisvorlage erweitern

Wir haben ein erstellt base.twig Datei als übergeordnete Vorlage und lassen den Inhaltsblock leer. Dieser Block kann in allen benutzerdefinierten Twig-Dateien verwendet werden, die ihn ändern würden, und der Rest der Basisvorlage wird unverändert übernommen. Zum Beispiel erstellen wir ein single.twig Datei, die die Vorlage base.twig erweitert und die Inhalt Block.

# Einzelvorlage: 'single.twig' # % erweitert "base.twig"% % block content% 
 
post.title
 
post.get_content
 
 % endblock% 

Dieser Code zeigt einen Brauch single.twig Datei. In Zeile 3 erstreckt sich diese Vorlage auf base.twig als übergeordnete oder Basisvorlage. Das erweitert Tag kann verwendet werden, um eine Vorlage um eine andere zu erweitern.

Hier beziehen sich alle Details auf die Header und Fußzeile werden von der geerbt base.twig Datei, die die übergeordnete Vorlage ist, während die Inhalt Block wird durch den Titel und Inhalt des Beitrags ersetzt. Wie viel Spaß macht das??

WordPress CheatSheet für Holz

Die Entwickler von Timber haben dafür gesorgt, dass es WordPress in jeder Hinsicht vom Kern bis zum Endbenutzer ergänzt. Obwohl die Konvertierungssyntax von WordPress-Funktionen in Timber etwas anders ist, ist sie ziemlich gut dokumentiert. Am Ende dieses Artikels werde ich eine Liste mit einigen Konvertierungen für die WordPress-Funktionen und deren Timber-Entsprechungen veröffentlichen. Lassen Sie uns rekapitulieren.

Kurze Zusammenfassung!

In meinem vorherigen Artikel habe ich eine Begrüßungsnachricht erstellt, die einfach über einen PHP-String auf der Startseite meiner Demo-Website angezeigt wurde. Den Code dafür finden Sie in seinem Zweig auf GitHub. Wiederholen Sie diesen Vorgang noch einmal, jedoch mit einem anderen und technischeren Ansatz.

Im Moment werde ich dieselbe Begrüßungsnachricht anzeigen, diesmal jedoch durch Erstellen einer neuen Seite, die auf der Startseite angezeigt wird.  

Abrufen von WordPress-Funktionen in Twig

Erstellen Sie eine neue Seite mit dem Titel "Willkommen in meinem Blog!" und fügen Sie etwas Inhalt hinzu, bevor Sie auf die Schaltfläche "Veröffentlichen" klicken.

Lassen Sie uns nun den Inhalt dieser Begrüßungsseite auf der Startseite anzeigen. Um dies zu tun, gehen Sie noch einmal zum index.php Datei und fügen Sie die folgenden Codezeilen hinzu.

Hier habe ich ein hinzugefügt $ context Array, in dem ich ein Element hinzugefügt habe Startseite und benutzte dann die get_post () Funktion zum Abrufen der gerade erstellten Seite. Dafür habe ich die Seitenkennung übermittelt, in diesem Fall 4.
In der welcome.twig Datei, lass uns print_r das Element Startseite und sehen, welche Daten wir bekommen. Meine welcome.twig-Datei sieht im Moment so aus.
# Message Template: 'welcome.twig' # 
 
 welcome_page | print_r 
 
Ich kann bestätigen, dass dieses Element im $ context-Array jetzt ein TimberPost-Objekt für diese bestimmte Seite mit der ID 4 hat.
Hier können wir alle Eigenschaften abrufen, die auf dem Frontend angezeigt werden können. Zum Beispiel möchte ich das anzeigen Seitentitel und Inhalt nur. So jetzt meine welcome.twig Datei sieht so aus:
# Message Template: 'welcome.twig' # 
 
welcome_page.title
 
welcome_page.content
 
 
Und die Homepage hat die Informationen, die wir brauchen.
WordPress Cheatsheet
Wie bereits erwähnt, bietet Timber einige praktische Konvertierungen der WordPress-Funktionen. Diese Funktionen können Ihnen helfen, Informationen zu erhalten über:
 
Blog
 
Körperklassen
 
Kopfzeile Fußzeile
 
 get_context () Funktion
Da ist ein Timber :: get_context () Funktion, die Ladungen von Site-Informationen abruft, die ein Entwickler auf dem Frontend der Site anzeigen möchte. Die Dokumentation erklärt es so:
Auf diese Weise wird ein Objekt mit vielen allgemeinen Dingen auf der Website zurückgegeben. Dinge wie Ihr Nav, wp_head und wp_footer, mit denen Sie jedes Mal beginnen möchten (auch wenn Sie sie später überschreiben). Sie können ein tun $ context = Timber :: get_context (); print_r ($ context); um zu sehen, was drin ist oder sich öffnet timber.php um selbst zu prüfen.
Außerdem können Sie dieser Funktion über einen praktischen Filter Ihre eigenen benutzerdefinierten Daten hinzufügen.
Nachfolgend finden Sie einige weitere Konvertierungen wie diese, die mit Timber verwendet werden können.
Blog-Info
 
 blog_info ('Zeichensatz') => site.charset 
 
 blog_info ('beschreibung') =>  Seitenbeschreibung  
 
 blog_info ('sitename') => site.name 
 
 blog_info ('url') =>  Seiten-URL  
 
 Körperklasse
 implode (", get_body_class ()) =>  
 Thema
 
 get_template_directory_uri () => theme.link (für übergeordnete Themen)
 
 get_template_directory_uri () => theme.parent.link (für Kinderthemen)
 
 get_stylesheet_directory_uri () => theme.link 
 
 get_template_directory () => theme.parent.path 
 
 get_stylesheet_directory () => theme.path 
 
 wp_functions
 
 wp_head () => wp_head 
 
 wp_footer () => wp_footer 
 
Lass uns mit ein paar Funktionen experimentieren, beginnend mit den Blog-Informationen. Anstelle von foo, schreiben site.name. 
Das Frontend zeigt den Site-Titel wie folgt an:
Timber hat auch einige Funktionskonvertierungen, um die Beiträge und postbezogene Informationen über anzuzeigen TimberPost (). Bevor ich die Verwendung dieser Funktion erkläre, listen wir die damit verbundenen Funktionskonvertierungen auf.
Post
 
 der Inhalt() => post.content 
 
 the_permalink () => post.permalink 
 
 der Titel() => post.title 
 
 get_the_tags () => post.tags 
 
Verwendungszweck
Verwenden Sie diesen Code in der single.php Datei.
Jetzt lass uns das testen post.title Funktion in unserer Twig-Datei.
 
post.title
 
 
Speichern Sie es und das Frontend zeigt den Beitragstitel wie folgt an:
Du bist dran!
Sie haben heute die praktische Umsetzung des DRY-Prinzips mit Timber und Twig beim Erstellen eines WordPress-Themas miterlebt. Gehen Sie dieses Tutorial durch und versuchen Sie, es zu implementieren, und lassen Sie mich alle Ihre Fragen wissen. Den vollständigen Code finden Sie im Zweig WP Cheatsheet in diesem GitHub-Repository.
Im nächsten und letzten Artikel werde ich besprechen, wie Bilder und Menüs in einer Twig-basierten WordPress-Vorlage behandelt werden. Bis dahin, kontaktiere mich auf Twitter, um deine Fragen zu beantworten, oder poste hier eine.



		
			
	   
	




Code