✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

WordPress-Vorlagen für Anfänger: Holz

3

Seit ich über WordPress-Vorlagen spreche, habe ich einige verschiedene verfügbare Engines behandelt:

Wenn Sie sich Moustache ansehen, dann interessieren Sie sich vielleicht für Lenker, und wenn Sie sich Blade ansehen, dann empfehle ich Ihnen dringend, sich Sage vom Roots -Team anzusehen.

Aber für diesen letzten Beitrag werde ich mit Timber fortfahren, das ich gestern vorgestellt habe. Es geht mir nicht so sehr darum, was verwendet wird (da sie alle ihre Kompromisse haben), solange es konsistent ist.

WordPress Templating: Holz verwenden

Vor diesem Hintergrund erfahren Sie hier, wie Sie mit der Verwendung von Timber in Ihren Projekten beginnen können.

WordPress-Vorlagen für Anfänger: Holz

Um loszulegen, müssen Sie mit Composer vertraut sein und eine lokale Entwicklungsumgebung einrichten. Wenn Sie keines davon haben oder Hilfe benötigen, dann bin ich für Sie da:

  1. Verwendung von Laravel für die WordPress-Entwicklung
  2. Composer für WordPress konfigurieren

Sobald Sie die Schritte in jedem dieser Leitfäden durchlaufen haben, sollten Sie startklar sein. Also hier ist, was wir tun werden.

1 Richten Sie eine lokale Installation für Timber ein

Ich werde dafür Valet verwenden, was bedeutet, dass ich ein Verzeichnis mit der neuesten Version von WordPress (4.8.3) in seinem Verzeichnis installiert haben werde.

Das bedeutet, dass ich bereits eine einsatzbereite Datenbank haben werde:

WordPress-Vorlagen für Anfänger: Holz

Und ich werde die folgenden Befehle ausgegeben haben, um Laravel und eine sichere Installation einzurichten (um eine Staging-Umgebung nachzuahmen):

$ valet link $ valet secure

Damit ich in einem Browser auf die Seite zugreifen kann.

WordPress-Vorlagen für Anfänger: Holz

Für Neugierige verwende ich:

Und keine anderen Plugins. Es ist nur eine Vanilla-Installation, anders als das, was Sie oben sehen.

An diesem Punkt bin ich bereit, Timber zu installieren.

2 Holz einbauen

Angenommen, Sie haben die obigen Anleitungen für Valet und Composer befolgt, sollten Sie startklar sein. Navigieren Sie also mit einem Terminal zu Ihrem WordPress-Installationsverzeichnis.

WordPress-Vorlagen für Anfänger: Holz

Geben Sie dann den folgenden Befehl aus:

$ composer require timber/timber

WordPress-Vorlagen für Anfänger: Holz

Dadurch wird Timber installiert, aber Sie müssen noch die Datei functions.php Ihres Themas aktualisieren, damit sie den Autoloader von Composer richtig verwendet.

WordPress-Vorlagen für Anfänger: Holz

Unter der Annahme, dass alles richtig gelaufen ist, sollten Sie in der Lage sein, Ihre Website zu aktualisieren, zu allen Beiträgen, Seiten usw. zu navigieren, und nichts sollte außer Betrieb sein.

3 Holz initialisieren

Schließlich ist es an der Zeit, Timber zu verwenden, um vieles von dem zu ersetzen, was wir im Kontext einer WordPress-Vorlage gewohnt sind.

Ich entscheide mich dafür, dies innerhalb von content-page.php zu tun, um es einfach zu verfolgen. Beachten Sie, dass das Codesegment, das ich ändere, ursprünglich so aussieht:

In diesem Beitrag werde ich das, was Sie oben sehen, nicht vollständig neu erstellen, aber ich werde damit beginnen, was erforderlich ist, um mit der Verwendung einer Templating-Engine im Kontext einer PHP-Stiftung zu beginnen.

Zunächst müssen Sie eine Vorlage erstellen, die in einer Standard-WordPress-Installation auf die Beispielseite angewendet werden kann. Ich habe meine template-timber-page.php aufgerufen und sie sieht so aus:

Im obigen Code passiert Folgendes:

  1.  Ich instanziiere das Timber-Objekt.
  2. Dann erhalte ich einen Timber-Kontext. Der Kontext enthält viele Informationen, die innerhalb der Vorlage (oder der Website) nützlich sind, je nachdem, wo Sie Ihre Vorlage verwenden.
  3. Danach schnappe ich mir einen TimberPost, der im Wesentlichen eine Erweiterung eines WordPress-Posts ist. Es hat die Daten von WP_Post, stellt sie aber unseren Templates zur Verfügung.
  4. Als Nächstes setze ich den Post -Index des Arrays $context mit einem Verweis auf den Timber Post (den ich $post genannt habe ).
  5. Schließlich weise ich Timber an, eine Seite mit dem Namen content-sample-page.twig unter Verwendung des angegebenen Kontexts zu rendern.

Hier ist es wichtig, die eigentliche Twig-Datei zu erstellen (die die Erweiterung der Timber-Vorlagendatei ist). Also habe ich content-sample-page.twig erstellt und es sieht so aus:

Nachdem Sie das Timber-Objekt instanziiert und den oben gezeigten Code ersetzt haben, werden Sie feststellen, dass sich der Code etwas anders liest (obwohl nicht ganz schwer zu folgen).

4 Anwenden der Vorlage

Navigieren Sie zum Anwenden der Vorlage zu Seiten in WordPress. Suchen Sie Beispielseite und wählen Sie dann in der Vorlagen-Dropdown-Liste die Seite aus, die wir gerade erstellt haben, indem Sie den Titel oben verwenden:

WordPress-Vorlagen für Anfänger: Holz

Sobald dies erledigt ist, können Sie den Beitrag anzeigen. Sie werden feststellen, dass es im Vergleich zu dem, was wir gewohnt sind, ein bisschen nackt aussieht:

WordPress-Vorlagen für Anfänger: Holz

Aber Sie bekommen eine allgemeine Vorstellung davon, wie wir den Kontext verwenden können, um auf viele der gleichen Eigenschaften zuzugreifen, die wir in WordPress gewohnt sind, ohne den Code mit Markup und PHP und was auch immer wir sonst verwenden, zu verunreinigen zu verwenden.

Mehr Ressourcen

Ich weiß, dass dies hauptsächlich ein Crashkurs in Templating ist und nicht annähernd so viel abdeckt, wie es könnte. Da sich dieser Beitrag 1000 Wörtern nähert, muss ich irgendwo eine Grenze ziehen, also entscheide ich mich dafür, dies hier zu tun.

Das heißt aber nicht, dass ich mit der Diskussion fertig bin. Ich plane, in zukünftigen Pots auf fortgeschrittenere Themen rund um das Templating zurückzukommen.

Aber wenn Sie interessiert sind, empfehle ich Ihnen dringend, sowohl dem Getting tarted Guide for Timber als auch dem Projekt auf GitHub zu folgen .

Dies gibt Ihnen zumindest einen Ausgangspunkt, von dem aus Sie noch mehr Fortschritte bei Ihren Bemühungen machen können, saubereren, logisch getrennteren Code zu erstellen, als wir es von WordPress gewohnt sind.

Aufnahmequelle: tommcfarlin.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen