WordPress-Theme-Tutorial für Anfänger – Teil 1: Einführung

In dieser Lektion lernen Sie, wie WordPress Inhalte lädt, je nachdem, auf welcher Seite Sie sich befinden, und die Hierarchie der Theme-Vorlagendateien. Sie erfahren auch, was für ein gültiges Thema erforderlich ist. Und am Ende werden wir endlich unser Thema erstellen und aktivieren.

Theme-Vorlagendateien

Hinter der Haube ermittelt WordPress basierend auf der URL, unter der Sie sich befinden, welche Vorlage geladen werden soll. Wenn Ihr WordPress unter der Domain „example.com/wordpress/” installiert ist, sollten Sie die Startseitenvorlage sehen. Wenn Sie zu „example.com/wordpress/category/news/” gehen, erhalten Sie standardmäßig eine Liste mit Beiträgen, die der Kategorie „News” zugeordnet sind Verwenden einer Kategorievorlage.

WordPress folgt einer Hierarchie, welche Vorlage geladen werden soll, und welche es auswählt, hängt davon ab, welche Vorlagen Sie in Ihrem Design zur Verfügung haben. Zum Beispiel „example.com/wordpress/category/news” WordPress sucht zuerst nach einem Template, das spezifisch für die Kategorie „news” ist. Wenn es nicht gefunden wurde, sucht WordPress nach einer Vorlage, die für die Kategorie-ID spezifisch ist. Auch hier sucht WordPress nach der allgemeinen Kategorievorlage, wenn diese nicht gefunden wurde. Wenn das nicht gefunden wurde, sucht WordPress nach einer noch allgemeineren Vorlage für Archive. Und so weiter und so fort.

WordPress Codex, die Dokumentationsseite von WordPress, enthält ein nützliches und aktualisiertes Bild, das die Hierarchie der Themenvorlagendateien veranschaulicht. https://codex.wordpress.org/File:Template_Hierarchy.png#file

Machen Sie sich keine Sorgen, wenn das Bild zunächst zu verwirrend aussieht! Während wir das Tutorial durcharbeiten, werden Sie auf dieses Bild zurückgreifen, um herauszufinden, welche Vorlagen Sie in Ihrem Thema implementieren möchten.

Sie lesen das Bild, indem Sie von links nach rechts gehen. Je nachdem, auf welcher Seite Sie sich befinden, sind die Vorlagen sehr spezifisch, und je weiter Sie zur rechten Seite vordringen, desto allgemeiner werden die Vorlagen. Der letzte Fallback ist der ganz rechte; index.php, die geladen wird, wenn keine anderen passenden Vorlagen gefunden wurden.

Alle im obigen Bild aufgeführten Vorlagendateien müssen sich im Stammordner Ihres Designs befinden und genau wie angegeben benannt werden. Sie können Ihre Vorlagen nicht zu organisatorischen Zwecken in Unterordnern ablegen, da WordPress sie dann nicht finden kann!

Wir fangen einfach an! Heute werden wir die wenigen Dateien erstellen, die WordPress benötigt, um es als Thema zu erkennen, und dann von dort aus erweitern.

Anatomie eines WordPress-Themes

Sie benötigen nur zwei Dateien, um ein gültiges WordPress-Theme zu erstellen.

Haben Sie in der Abbildung der Vorlagenhierarchie die ganz rechte bemerkt; angerufen index.php? Dies ist die letzte Fallback-Vorlage, wenn WordPress keine Vorlage findet. Das ist eine der erforderlichen Dateien. Die andere Datei ist eine Stylesheet-Datei (.css). Es muss nicht unbedingt CSS enthalten sein, aber es muss einen Kommentarblock enthalten, der WordPress-Informationen zu Ihrem Thema bereitstellt. Diese beiden Dinge sind alles, was Sie für ein gültiges WordPress-Theme benötigen.

Lassen Sie uns unser Design erstellen, indem Sie diese beiden Dateien erstellen!

Erstellen Sie Ihr erstes Thema

Alle Themen müssen sich in jeweils eigenen Ordnern innerhalb des Unterordners befinden /wp-content/themes/. Wenn Sie in Ihrem Dateinavigator zu diesem Ordner navigieren, sehen Sie hier wahrscheinlich bereits einige Themenordner; Twentynineteen, Twentyseventeen usw. Das sind Themen, die standardmäßig in WordPress enthalten sind.

Erstellen Sie in /wp-content/themes/einen neuen Ordner. Benennen Sie es angemessen (Kleinbuchstaben, keine Leerzeichen, nicht dasselbe wie jeder andere Ordner). Normalerweise ist der Ordnername eine Slug-Version des Namens Ihres Themas. Für dieses Tutorial nenne ich meinen Themenordner „ wptutorial“.

Geben Sie Ihren Themenordner ein und erstellen Sie eine neue, leere Datei mit dem Namen index.php. Ich habe die Datei bearbeitet und zufälligen Text hinzugefügt, damit wir leichter sehen können, wann sie verwendet wird:

Wir sind schon auf halbem Weg! Lassen Sie uns die zweite erforderliche Datei erstellen. Erstellen Sie in Ihrem Themenordner eine neue, leere Datei mit dem Namen style.css.

Öffnen Sie die style.cssDatei und starten Sie sofort einen Kommentarblock (/*und schließen Sie ihn mit */). Innerhalb dieses Kommentarblocks müssen wir einige WordPress-Regeln befolgen, um unser Thema zu definieren. Als Minimum müssen wir den Namen unseres Themas definieren. Aber wir können auch Informationen über den Autor, Homepage, Versionsnummer, Lizenzinformationen und vieles mehr hinzufügen. Sehen Sie sich die WordPress-Dokumentation an, was Sie hinzufügen können.

In diesem Tutorial werden wir es einfach halten; Wir fügen den Themennamen hinzu und Sie schreiben Ihren eigenen Namen als Autor. Sie können fortfahren und beliebige Namen verwenden, die Sie möchten. Dies ist, was ich in mein eingegeben habe style.css:

/* 
Theme Name: A White Pixel Theme 
Author: Alex White 
*/

Speichern und schließen Sie die Datei (dieses Tutorial wird diese Datei nicht mehr berühren), es sei denn, Sie möchten CSS für Ihr Design schreiben, während Sie fortfahren.

Herzliche Glückwünsche! Sie haben jetzt ein gültiges WordPress-Theme erstellt!

Aktivieren Sie Ihr Thema

Lassen Sie uns in das WordPress-Admin-Panel gehen und zu „Darstellung > Themen” navigieren und sehen, ob wir unser Thema dort finden können.

Klicken Sie auf die Schaltfläche Aktivieren und besuchen Sie Ihre Website. Sie sollten sehen, was Sie geschrieben haben index.php!

Diese index.phpVorlage wird unabhängig davon verwendet, auf welcher Seite Sie sich befinden. Versuchen Sie, einen einzelnen Beitrag anzuzeigen, und Sie werden dasselbe sehen. Ein Thema sollte mindestens 5-10 Vorlagen haben, um unterschiedliche Inhalte zu verarbeiten. Keine Sorge, wir werden es schaffen.

Toll, wir haben ein Thema! In der nächsten Lektion werden wir damit beginnen, tatsächlich darin zu programmieren und es Sachen machen zu lassen.