Was du über Wordpress Themes wissen solltest

Das Wissen um die Struktur eines WordPress Themes ist ein wichtiger Bestandteil des Front-End-Entwicklungsprozesses. Denn bei einem WordPress Theme handelt es sich um verschiedene Dateien, die miteinander interagieren, um das Design und die Funktionalität einer WordPress-Webseite zu gewährleisten. Das macht das Theme zu einer leistungsstarken Funktion bei der Website-Entwicklung. In Kombination mit der leistungsstarken Plattformarchitektur von WordPress ermöglichen Themes unbegrenzte Anpassungsmöglichkeiten.

WordPress listet vier Hauptvorteile von Themes auf:

Designs trennen die Darstellung von den Systemdateien bzw. dem tatsächlichen Inhalt, sodass du die visuelle Darstellung mit minimalen Aufwand ändern kannst.
Themes bieten Optionen, weitere Funktionen zu aktivieren oder zu deaktivieren, die in die Themes integriert sind. Die Designer eines Themes ermöglichen häufig zum Beispiel die Integration von Galerien oder Schieberegler.
Themes verfügen in der Regel über Einstellungen, um das Design und das Layout der Website schnell und einfach zu ändern.
Dank gut entwickelter Themes benötigen WordPress-Administratoren keine CSS-, HMTL- oder PHP-Kenntnisse, wenn sie Änderungen an der Website vorzunehmen möchten.

Erfahre mehr über die Core-Komponenten von WordPress

Die Standardinstallation von WordPress besteht aus Core-Komponenten, die in eine wp-config.php-Datei, in ein wp-content-Verzeichnis und in eine MySQL-Datenbank unterteilt sind. Designs, Plugins und alle hochgeladenen Assets werden im Ordner "wp-content" gespeichert. Die Designs befinden sich im entsprechend bezeichneten Verzeichnis "themes".

Wenn Sie sich entscheiden, ein WordPress Theme über das Dashboard zu suchen und zu installieren, wird dieses als ZIP-Datei übertragen und anschließend im Ordner "Themes" dekomprimiert. Jedes Theme hat einen eindeutigen Ordnernamen, es gibt jedoch eine konsistente Namenskonvention für die darin enthaltenen Dateien.

Die gesamte Dokumentation der WordPress-Theme-Struktur findest du auf der Seite Theme Development von WordPress.org.

Wenn du mit PHP vertraut bist und ein Theme oder WordPress Child Theme anpassen bzw. neu entwickeln möchtest, empfehle ich dir, dich mit den PHP-Codierungsstandards von WordPress vertraut zu machen. PHP erlaubt leider auch schlampige Programmierungen, die beim Versuch, Fehler in deinem WordPress Theme zu beheben, zu echten Verwüstungen führen können.

WordPress Theme-Dateien

Ob du es glaubst oder nicht, WordPress benötigt nur zwei Dateien für ein Theme. Die erste Datei ist eine style.css-Datei, die das Design des WordPress Themes definiert. WordPress liest die Designbeschreibung anhand einer Reihe von Kommentaren, die das Stylesheet startet:

Die zweite Datei ist die index.php-Datei, die deine Loop-Abfrage enthält. Sie zeigt die in WordPress veröffentlichten Inhalt an.

Die WordPress Theme-Struktur

WordPress Theme Dateien enthalten nicht alle Elemente deines Designs. Wenn du dir eine Webseite ansiehst, wirst du feststellen, dass es folgende grundlegende Abschnitte einer gewöhnlichen Seite gibt:

Content - Der Inhalt, den du speziell für diese Seite erstellst, veröffentlichst oder archivierst.
header.php – Diese Datei enthält Designvorgaben für den oberen Bereich jeder deiner Seiten, Beiträge oder Archive.
footer.php – Diese Datei enthält Designvorgaben für den Footerbereich jeder deiner Seiten, Beiträge oder Archive.
sidebar.php - Diese Datei enthält Designvorgaben für die Sidebar auf deinen Seiten, in Beiträgen oder im Archiv.
searchform.php - Das Suchformular, das in deinem Theme verwendet wird.
.php - Dies kann ein beliebiges benutzerdefiniertes Element sein, das in deinem Theme verwendet wird, z. B. ein Handlungsaufruf oder eine sekundäre Sidebar.

WordPress-Webseite - Template-Pages

Obwohl WordPress als Blogging-Plattform begann, ist das Verfassen von Blogartikeln nicht die einzige Möglichkeit, wie du WordPress einsetzen kannst. Wenn du WordPress nicht für das Bloggen verwenden möchtest, können die folgenden Vorlagendateien für bestimmte Designs angepasst werden:

404.php - Ein Entwurf für den Fall, dass deine Seite oder deine Inhalte nicht gefunden werden, das wird auch als 404-Statusfehler bezeichnet.
front-page.php – Diese Datei wird verwendet, wenn du in deinen WordPress > Einstellungen > Leseeinstellungen eine statische Seite festlegst.
home.php - Das Standarddesign für deine Homepage.
page.php - Das Standard-Seitendesign.
page- .php - Wendet dieses Template-Design auf die Seite mit dem passenden URL-Slug an.
search.php - Das Standarddesign für Suchergebnisseiten.

WordPress Blog Theme - Template-Pages

Wenn du auch bloggen möchtest, hast du viele weitere Optionen für Template Designs, die du entwickeln kannst:

archive.php - Das Standarddesign für die Anzeige von Beiträgen nach Kategorie, Autor oder Datum. Es gilt, wenn keine anderen Vorlagen erstellt wurden.
archive- .php - Wenn du benutzerdefinierte Beitragstypen (Custom Post Types) implementieren möchtest, kannst du das Design für die Archivliste anpassen. Hier findest du weitere Informationen zu Post Types
attachment.php - Das Standarddesign zum Anzeigen eines Anhangs, der in die Medienbibliothek hochgeladen wurde (alle Medien außer Bildern).
author.php - Das Standarddesign für einen Autor.
category.php - Das Standarddesign zur Anzeige von Beiträgen, die zu einer Kategorie gehören.
comments.php - Die Standard-Kommentarvorlage, die im gesamten Blog verwendet wird.
date.php - Das Standarddesign für die Anzeige von Beiträgen nach Datum, sofern in der Permalink-Struktur verwendet.
image.php - Das Standarddesign zum Anzeigen eines Bildes, das in die Medienbibliothek hochgeladen wurde.
single.php - Das Standarddesign für einen einzelnen Beitrag.
single- .php - Wenn du benutzerdefinierte Beitragstypen implementierst, kannst du das Design für die einzelne Version eines Beitragstyps anpassen.
tag.php - Das Standarddesign zum Anzeigen eines Archivs von Beiträgen nach einem bestimmten Tag.
taxonomy.php - Das Standarddesign zum Anzeigen eines Archivs von Beiträgen nach einer benutzerdefinierten Taxonomie.

Profi-Tipp: Vergiss nicht, einen Screenshot deines WordPress Themes zu hinterlegen. Dieser Screenshot wird im Theme-Browser angezeigt, wenn der Nutzer im WordPress-Dashboard auf Designs > Themes geht. Das Bild sollte ein PNG-Format haben und 880 Pixel hoch und 660 Pixel breit sein.

WordPress Child Theme

Eine der weniger bekannten Möglichkeiten der WordPress Theme Struktur besteht darin, dass du Themes anpassen kannst, indem du ein WordPress Child Theme erstellst, das das Haupt-Theme als Ganzes übernimmt, aber in bestimmten Punkten abändert. Wir haben viele Kunden unterstützt, die eine Agentur damit beauftragt haben, ein individuelles Theme zu entwickeln, das auf einem lizenzierten, gekauften Theme basiert. Die Agentur hat meist sofort mit der Bearbeitung des gekauften Themes begonnen, um dieses für den Kunden anzupassen. Das Bearbeiten eines lizenzierten WordPress-Themes ist jedoch eine schreckliche Praxis!

Du kannst stattdessen einfach ein WordPress Child Theme erstellen, indem du ein anderes Theme-Verzeichnis und der index.php- und style.css-Datei einen Verweis auf das übergeordnete Theme hinzufügst:

Wenn du ein WordPress Child Theme erstellst, musst du nur die übergeordneten Designdateien, die du anpassen möchtest, in dein untergeordnetes Designverzeichnis einfügen. Wenn du das übergeordnete Design nie bearbeitest, kannst du es aktualisieren, wenn der Autor eine neue Version veröffentlicht. Dies geschieht häufig als Reaktion auf WordPress-Änderungen, Sicherheitsprobleme oder Fehlerbehebungen.

Zusätzliche Dateien und Ordner in der Struktur eines WordPress-Themes

Solange du Dateien erstellst, die mit den oben angegebenen reservierten Dateinamen nicht in Konflikt stehen, kannst du beliebig viele Unterverzeichnisse und Dateien hinzufügen. Ein allgemeines Beispiel ist das Hinzufügen einer alternativen Seitenvorlage zur WordPress-Theme-Struktur. Eine Seitenvorlage ist einfach zu erstellen - füge einfach eine eindeutig benannte PHP-Datei mit den folgenden Kommentaren in der Kopfzeile hinzu:

Jetzt kannst du dieses Seiten Template mithilfe der Bearbeitungsoptionen auf die von dir erstellte Seite anwenden.

Theme-Entwickler fügen außerdem weitere Unterverzeichnisse in ihr Theme ein, einschließlich js (für Scripts) und Bilder, die für dein Theme spezifisch sind. Fortgeschrittene Theme-Entwickler nutzen oft weitere Verzeichnisse für zusätzliches CSS, Theme Design-Frameworks und sogar Sprachunterverzeichnisse, wenn sie das Theme übersetzen möchten. WordPress unterstützt auch Sprachen, die von rechts nach links geschrieben werden, mit einer rtl.css-Datei im Stammverzeichnis des Designs.

Es gibt Tausende von free WordPress Themes und kostenpflichtige Themes. Du findest viele davon im Theme Directory von WordPress.org und in der Liste kostenloser WordPress Themes von GoDaddy für Managed WordPress-Kunden. Mit den hier aufgeführten Tipps kannst du sie genau an deine Bedürfnisse anpassen.

Aus dem Englischen von Wolf-Dieter Fiege

Bildnachweis: Photo by Ricardo Gomez Angel on Unsplash