WordPress-Theme-Tutorial für Anfänger – Teil 2: Vorlagen
In dieser Lektion des WordPress-Theme-Tutorials für Anfänger lernen Sie, wie Sie die Hauptbausteine eines Themas strukturieren und mit der Erstellung von Vorlagen beginnen. Wir beginnen mit der Erstellung einiger HTML-Ausgaben und zeigen, wie die Bausteine in die Vorlagen unseres Designs aufgenommen werden. Im vorherigen Schritt haben wir das absolute Minimum eines WordPress-Themes eingerichtet und aktiviert. Aber im Moment macht es nicht sehr viel und enthält nicht einmal gültiges HTML für eine Webseite. Lassen Sie uns das beheben.
Bausteine für Kopf- und Fußzeile (& Seitenleiste).
In unseren Vorlagendateien benötigen wir gültiges HTML. Wir könnten die komplette HTML-Struktur (beginnend mit und vollständig) in schreiben <html>, <head>aber <body>das index.phpwird unpraktisch, wenn Sie mehrere Vorlagendateien in Ihrem Design verwalten. Stellen Sie sich vor, Sie hätten eine Reihe von Vorlagen erstellt und stellen dann fest, dass Sie eine kleine Änderung im Header-Teil benötigen. Sie müssten dann alle Vorlagen bearbeiten, damit sie konsistent bleiben. Das ist nicht schlau.
Die Lösung besteht darin, die vollständige HTML-Struktur in sinnvolle Teile zu unterteilen; Bausteine. Jeder Block befindet sich in einer eigenen Datei, und wann immer wir sie in einer Vorlage benötigen, fügen wir sie ein. Die gebräuchlichsten und sinnvollsten Blöcke sind einer für die Kopfzeile, einer für die Fußzeile und einer für den Inhalt, aber wenn Ihr Thema eine Seitenleiste hat, sollte die Seitenleiste auch ein separates Gebäude sein.
include()Diejenigen unter Ihnen, die sich besser mit PHP auskennen, sind wahrscheinlich mit den Methoden oder vertraut require(). Genau das werden wir tun, aber wir werden die Funktionen von WordPress verwenden, um andere Dateien einzubinden, da sie zusätzliche Vorteile bieten.
In dieser Lektion erstellen wir die Kopf-, Fuß- und Seitenleiste als Bausteine. Seitenleisten sind jedoch auf Webseiten immer seltener geworden, aber wir werden trotzdem eine rechte Seitenleiste in unser Thema implementieren. Diese drei Bausteine sind in allen WordPress-Themes üblich – und es ist tatsächlich so üblich, dass WordPress Automatisierung für diese drei Dinge anbietet.
Erstellen der Kopf-, Fuß- und Seitenleistenvorlagen
Lassen Sie uns eine neue leere Datei mit dem Namen header.phpin unserem Themenordner erstellen. Wir werden vorerst etwas sehr einfaches HTML hinzufügen (keine Sorge, wir werden später richtigeres HTML hinzufügen).
Erstellen Sie eine neue Datei mit dem Namen footer.phpin Ihrem Themenverzeichnis. Alles, was wir (vorerst) in dieser Datei brauchen, ist das Schließen unserer HTML-Struktur.
Und schließlich erstellen Sie eine neue leere Datei mit dem Namen sidebar.php. Wir fügen nur das HTML-Tag hinzu <aside>.
Einschließlich der Bausteine
Kehren wir zu unserer index.phpDatei zurück. Jetzt müssen wir WordPress nur noch sagen, wo wir die Header- und Footer-Datei einfügen wollen. Offensichtlich wollen wir den Header ganz am Anfang und den Footer ganz am Ende dieser Datei laden.
WordPress bietet einfache Funktionen zum Einbinden dieser Bausteine; get_header()und get_footer()für die Kopf- bzw. Fußzeilendatei. Ziemlich intuitiv, oder? Lassen Sie uns diese in unserer index.php hinzufügen und sehen, was passiert.
Aktualisieren Sie Ihr Frontend und überprüfen oder sehen Sie sich den HTML-Quellcode an, um zu sehen, dass wir mehrere Bausteine zu einer vollständigen HTML-Struktur kombiniert haben.
Jetzt können Sie den Inhalt index.phpunabhängig von der Kopf- und Fußzeile bearbeiten!
Lassen Sie uns auch die Seitenleiste einbeziehen. Denken Sie daran, dass Sie in Ihrem Design Fälle und Vorlagen berücksichtigen möchten, in denen Sie die Seitenleiste nicht möchten, z. B. die Startseite.
Das Einbinden der Seitenleiste ist genauso einfach wie die Kopf- und Fußzeile; dafür verwenden wir get_sidebar(). Lassen Sie uns das zu index.php hinzufügen, direkt bevor Sie die Fußzeile erhalten.
Aktualisieren Sie und Sie sollten die HTML-Quelle einschließlich unserer sehen <aside>. Keine Sorge, in einem späteren Schritt lernen wir, wie man es in einen tatsächlichen Seitenleistenbereich umwandelt, in dem Sie Widgets platzieren können.
Unser Thema ist im Moment ziemlich statisch. In der nächsten Lektion dieser WordPress-Theme-Tutorial-Serie tauchen wir endlich richtig in die WordPress-Funktionen ein, um Inhalte und Informationen aus WordPress dynamisch in unsere Vorlagen zu laden.