Etikett. Sie können beispielsweise den body() Ihrer Website in mehrere Abschnitte unterteilen, z. B. Navigation, Kopfzeile, Hauptinhalt, Seitenleiste und Fußzeile.
Sobald Sie Ihre Webseite in Abschnitte unterteilt haben, können Sie die Abschnitte mithilfe von CSS nach Ihren Wünschen anordnen (oder organisieren). Dieser Vorgang wird als Styling bezeichnet und beinhaltet das Hinzufügen weiterer Styling-Elemente wie Farbe, Größe, Ränder, Spezialeffekte usw. Das ist die Leistungsfähigkeit von CSS, was übrigens die Abkürzung für Cascading Style Sheets ist. Wenn Sie Ihre HTML- und CSS-Dateien zusammenfügen und ein paar Bilder hinzufügen, erhalten Sie am Ende eine vollständige Website.
Bei WordPress-Themes ist es nicht viel anders. Wie wir in Teil 1 von „So erstellen Sie ein WordPress-Theme aus HTML“ gesehen haben, sind WordPress-Themes in verschiedene Dateien unterteilt. Wenn Sie an dieser Stelle keine Ähnlichkeiten feststellen können, lassen Sie es mich erklären.
Statische HTML-Webseiten werden mithilfe von in Abschnitte unterteilt (die wir oben als Abschnitte bezeichnet haben).
Etiketten (oder Tabellen, wenn Sie wirklich altmodisch sind). Andererseits werden WordPress-Themes in verschiedene PHP-Dateien aufgeteilt, die dann mithilfe von Template-Tags wieder zusammengefügt werden.
Anstatt also alle Körperelemente (Kopfzeile, Hauptinhalt, Seitenleiste, Fußzeile usw.) in einer einzigen Datei zu haben (wie es bei statischem HTML der Fall ist), ist jedes Körperelement (in WordPress-Themes) darin enthalten separate Dateien.
Der Header wird also in header.php leben, die Seitenleiste wird den Anfang in sidebar.php finden, der Hauptinhalt wird in index.php oder single.php (wenn es ein Beitrag ist) oder page.php (wenn es eine Seite ist) leben. . ). Der Fußzeilenbereich befindet sich in footer.php und so weiter.
Folgst du? Schauen Sie sich die folgende Abbildung an:
Aus unserer vorherigen Abbildung werden , und als Template-Tags bezeichnet. Seine Aufgabe besteht darin, header.php, sidebar.php und footer.php in dieser Reihenfolge aus Ihrem Theme-Verzeichnis abzurufen und den Inhalt in Ihrer index.php anzuzeigen und so die Webseite zu vervollständigen.
Lass ihn nicht .php Es macht Ihnen Angst, der Inhalt in PHP-Dateien ist nur HTML-Code, mit dem Sie vertraut sind. Beispielsweise kann Ihre header.php eine typische HTML-Listennavigation enthalten. Ebenso können Sie typischen HTML-Code in footer.php, sidebar.php und index.php einfügen.
Sie können das auch platzieren loop.php in Ihrer index.php (oder wo auch immer Sie möchten) ein, um Ihre Blog-Beiträge anzuzeigen, aber Sie sollten langsamer werden und zur Anatomie der WordPress-Themes zurückkehren. Ich habe in Teil 2, wie man ein WordPress-Theme aus HTML erstellt, ein oder zwei Dinge über die Schleife erwähnt. und wir werden in Zukunft darüber (die Schleife) und andere Funktionen sprechen.
Nach vorne…
Ein grundlegendes WordPress-Theme besteht aus mindestens vier Vorlagendateien, nämlich:
- index.php
- header.php
- sidebar.php
- footer.php
Mal sehen, was jedes davon beinhaltet magisch Dateien:
Index.php-Vorlagendatei
Dies ist die Hauptdatei, ohne die Sie kein funktionierendes WordPress-Theme haben. Es ist die erste (oder Standard-)Datei, die geladen wird, wenn Sie eine WordPress-Website besuchen. Betrachten Sie es als das Äquivalent von index.html.
Eine typische index.php in WordPress-Themes sieht so aus:
Sie können die Schleife zwischen und hinzufügen, um Blog-Beiträge auf der Startseite (index.php) anzuzeigen, wie unten gezeigt:
Header.php-Vorlagendatei
Diese Vorlagendateien enthalten Ihren Header-Code, die Navigation und den HTML-Header-Code. Grundsätzlich speichert header.php alles, was Sie oben auf Ihrer Website anzeigen möchten. Wissen Sie, Dinge wie der Titel Ihrer Website und solche Dinge.
Es verlinkt auch auf Ihr CSS-Stylesheet in header.php. Hier ist ein einfaches Beispiel für header.php:
"> "> " type="text/css" />This is header section. Put your logo and other details here.
Sidebar.php-Vorlagendatei
Sidebar.php enthält alles, was Sie brauchen, um in Ihren Seitenleisten zu erscheinen. Die Seitenleiste enthält zusätzliche Menüs, Widgets, Kategorien, Social-Media-Symbole, benutzerdefinierte Inhalte, HTML-Code wie Anzeigen usw.
Sidebar.php kann je nach Bedarf reines HTML-Markup oder PHP-Funktionsaufrufe enthalten. Daher könnte eine einfache sidebar.php so aussehen:
Put your custom content or HTML code here.
Footer.php-Vorlagendatei
Was gehört Ihrer Meinung nach in die Datei „footer.php“? Sie können hier Ihre Copyright-Informationen, zusätzliche Menüs, Links, Social-Media-Symbole usw. einfügen! Möchten Sie sehen, wie eine einfache footer.php aussieht? Hier:
Put your footer content here including php function calls (to fetch different template files e.g. search.php) if need be.
Beachten Sie die schließenden Tags und in der footer.php? Können Sie sich vorstellen, warum sie in footer.php enthalten sein sollten? Können Sie auch erraten, warum und?
Sind die öffnenden Tags in der header.php enthalten? Teilen Sie uns Ihre Vermutungen im Kommentarbereich am Ende dieses Beitrags mit 😉
Die vier Vorlagendateien, die wir gerade oben behandelt haben, bilden ein sehr einfaches WordPress-Theme. Es gibt viele andere Vorlagendateien; Für jedes Element, das Sie in einem WordPress-Theme sehen, gibt es eine Vorlagendatei, seien es Kommentare, Suchergebnisse und 404-Fehlerseiten, um nur einige zu nennen.
Um die Anatomie eines WordPress-Themes vollständig zu verstehen, müssen Sie sich mit verschiedenen Vorlagendateien vertraut machen. Sie können alle in WordPress verwendbaren Vorlagenkacheln durchsuchen.
Dann haben wir Template-Tags, die WordPress verwendet, um Template-Dateien aus dem Theme-Verzeichnis zu finden. Erfahren Sie mehr über Template-Tags und ihre Rolle in WordPress.
Zusammenfassung
Ein WordPress-Theme besteht aus den folgenden anatomischen Elementen:
- Vorlagendateien wie index.php, header.php, search.php, Category.php usw.
- Vorlagen-Tags wie usw.
- CSS
- Bilder und andere Mediendateien
- JavaScript-Dateien
Und hier ist eine Illustration, die die Anatomie eines WordPress-Themes zusammenfasst:
Möchten Sie weiter lernen? Schauen Sie sich den ausführlichen Leitfaden zur Theme-Anatomie im WordPress Codex an.
Abschluss
Jedes WordPress-Theme, das Sie im Web sehen, verwendet dieselbe anatomische Struktur (sogar unser beliebtes Total WordPress-Theme), die Sie an Ihre Bedürfnisse anpassen können. Sobald Sie die Grundlagen der WordPress-Theme-Entwicklung verstanden haben, sind Ihren Möglichkeiten mit WordPress-Themes keine Grenzen gesetzt.
