Grundlegende Konzepte, die du bei der Entwicklung von WordPress-Themes verstehen musst

WordPress-Themes spielen eine entscheidende Rolle bei der Gestaltung des Aussehens und der Funktionalität deiner Website. Sie legen fest, wie deine Inhalte angezeigt werden und bieten verschiedene Designoptionen, um eine einzigartige Seite zu gestalten. Im Laufe der Jahre haben sich die WordPress-Themes stark weiterentwickelt, angefangen mit den sogenannten „klassischen Themes“.

Klassische Themes waren lange Zeit der Standard. Sie basierten auf PHP-Vorlagen und erforderten einige Programmierkenntnisse, um sie anzupassen. Diese Themes boten eine große Flexibilität, konnten aber für Anfänger/innen in der Webentwicklung eine Herausforderung sein. Mit der Veröffentlichung von WordPress 5.9 kam es dann zu einer bedeutenden Veränderung: die Einführung von „Block-Themes„.

WordPress klassische Themes vs. Block-Themes

Klassische Themes sind die traditionelle Art von WordPress-Themes. Sie bestimmen das allgemeine Aussehen einer Website, indem sie in PHP geschriebene Vorlagendateien, CSS für das Styling und JavaScript für zusätzliche Funktionen verwenden. Diese hochgradig anpassbaren Themes sind seit vielen Jahren das Rückgrat von WordPress-Websites.

Block-Themes hingegen sind eine neuere Art von WordPress-Themes, die eingeführt wurden, um die Funktionen zur vollständigen Bearbeitung von Websites (FSE) zu unterstützen. Im Gegensatz zu klassischen Themes verwenden sie Blöcke, um alle Teile einer Website aufzubauen, einschließlich Kopf- und Fußzeilen sowie Inhaltsbereiche. Dies ermöglicht eine visuellere und intuitivere Art, Websites direkt im WordPress-Editor zu gestalten und anzupassen.

Die wichtigsten Unterschiede zwischen klassischen und Block-Themes sind:

1. Anpassung – Klassische Themes erfordern PHP und einige Programmierkenntnisse, während Block-Themes einen visuellen Editor für eine einfachere Anpassung verwenden.
2. Flexibilität – Klassische Themes bieten Entwicklern mehr Flexibilität, während bei Block-Themes die Benutzerfreundlichkeit und Zugänglichkeit im Vordergrund stehen.
3. Bearbeitung – Klassische Themes werden über Themedateien und den WordPress Customizer bearbeitet. Block-Themes können vollständig über den Block-Editor bearbeitet werden.

Die Entscheidung, welche Art von Theme du entwickeln willst

Die Wahl zwischen klassischen und Block-Themes hängt von deinen Bedürfnissen und deinen Fähigkeiten ab. Wenn du ein Entwickler bist, der maximale Flexibilität sucht, sind klassische Themes vielleicht deine erste Wahl. Wenn du jedoch eine benutzerfreundlichere und visuelle Herangehensweise an die Erstellung deiner Website bevorzugst, sind Block-Themes eine gute Wahl.

Beide Arten von Themes haben ihre Stärken und eignen sich für unterschiedliche Arten von Nutzern und Projekten. Wenn du die wichtigsten Unterschiede kennst, kannst du eine fundierte Entscheidung treffen, welches Theme am besten zu den Anforderungen deiner Website passt.

Dieser Artikel soll dir helfen, die grundlegenden Konzepte von klassischen und Block-Themes zu verstehen und zu beherrschen, damit du WordPress-Themes effektiv erstellen und anpassen kannst.

Die Struktur eines Themes verstehen

Die Struktur eines Themes zu verstehen, egal ob es sich um ein klassisches oder ein Block-Theme handelt, ist der Schlüssel zur effektiven Anpassung deiner WordPress-Website.

Bevor wir uns mit der Struktur der einzelnen Themes beschäftigen, solltest du wissen, dass alle WordPress-Themes im Verzeichnis wp-content/themes deiner WordPress-Installation gespeichert werden und jedes Theme in einem eigenen Ordner liegt.

Struktur eines klassischen Themes

Ein klassisches Theme besteht aus mehreren wichtigen Dateien und Verzeichnissen, die das Aussehen und die Funktionalität der Website bestimmen. Die zwei wichtigsten Dateien sind:

1. style.css – Dies ist das Haupt-Stylesheet, das das visuelle Styling des Themes definiert. Es enthält oben Metadaten über das Theme (wie Name, Autor und Version), gefolgt von CSS-Regeln, die das Theme gestalten.
2. index.php – Dies ist die Hauptvorlagendatei, die für die Anzeige der Inhalte auf der Startseite verwendet wird. Sie dient als Fallback für andere Vorlagendateien, die fehlen könnten.

Darüber hinaus gibt es weitere wichtige Dateien, die ein modulares Design ermöglichen und dafür sorgen, dass die verschiedenen Teile der Website leicht angepasst und gepflegt werden können. Diese Dateien sind zwar optional, werden aber als Standard angesehen:

• header.php – Diese Datei enthält den Kopfbereich des Themes, einschließlich des Seitentitels, des Logos und des Navigationsmenüs. Sie wird oben auf jeder Seite eingefügt, um einen einheitlichen Seitenkopf zu gewährleisten.
• footer.php – Diese Datei enthält den Fußzeilenbereich des Themes, der oft Copyright-Informationen und die Fußzeilennavigation enthält. Sie wird am unteren Ende jeder Seite eingefügt und sorgt für eine einheitliche Fußzeile auf der gesamten Website.
• functions.php – Diese Datei wird verwendet, um dem Theme eigene Funktionen hinzuzufügen. Sie kann Menüs registrieren, Stile und Skripte in die Warteschlange aufnehmen und Funktionen zur Unterstützung des Themes wie Post-Thumbnails und benutzerdefinierte Hintergründe hinzufügen. Im Wesentlichen dient sie als Kontrollzentrum für Theme-Anpassungen und -Erweiterungen.
• page.php single.php, , etc. – Diese Vorlagendateien definieren die Struktur für verschiedene Arten von Inhalten, wie Seiten, einzelne Beiträge und Archive. archive.php

Aufbau eines Block-Themes

Ein Block-Theme besteht aus mehreren wichtigen Dateien und Verzeichnissen, die speziell für die Arbeit mit Blöcken und den FSE-Funktionen entwickelt wurden. Die wichtigsten Dateien und Verzeichnisse sind:

1. theme.json – Diese Datei ist entscheidend für die Konfiguration der Einstellungen, Stile und Anpassungen des Themes. Sie definiert globale Stile und Einstellungen für Blöcke und bietet eine zentrale Möglichkeit, das Aussehen und Verhalten des Themes zu verwalten. Sie ersetzt eine Menge eigenen PHP-Code und ermöglicht die einfache Konfiguration von Farben, Typografie, Abständen und mehr.
2. style.css – Obwohl der Großteil des Stylings innerhalb von theme.json abgewickelt wird, wird ähnlich wie bei klassischen Themes style.css verwendet, um die Metadaten des Themes zu deklarieren, z. B. den Namen des Themes, den Autor, die Version und die Beschreibung.
3. templates/ – Dieses Verzeichnis enthält HTML-Dateien, die das Layout für die verschiedenen Teile der Website festlegen. Zu diesen Dateien gehören Vorlagen wie index.html für die Startseite, single.html für einzelne Beiträge, page.html für Seiten und mehr. Jede Datei ist aus Blöcken aufgebaut.
4. parts/ – Dieses Verzeichnis enthält wiederverwendbare Teile von Vorlagen, wie z. B. Kopf- und Fußzeilen. Diese Teile können in mehreren Vorlagen enthalten sein und sorgen so für Konsistenz auf der gesamten Website.

Muster sind zwar nicht zwingend erforderlich, aber bei der Entwicklung fortgeschrittener Themes ebenfalls wichtig. Muster sind vordefinierte Blocklayouts, die in Seiten und Beiträge eingefügt werden können und eine schnelle Möglichkeit bieten, komplexe Designs zu erstellen.

Bei Blockthemes kannst du darauf verzichten, die Struktur des Themes manuell zu erstellen. Du kannst den Einrichtungsprozess mit dem Plugin Create Block Theme rationalisieren, das alle notwendigen Dateien und Details zusammenfasst.

Sobald du die Details eingegeben hast, wird ein neuer Theme-Ordner im Verzeichnis wp-content/themes erstellt und das neue Theme erscheint im WordPress-Verwaltungsbereich unter Erscheinungsbild > Themes. Du kannst weitere Details zum Thema in der Meta-Beschreibung style.css hinzufügen.

Die Vorlagenhierarchie des WordPress-Themes

Die Vorlagenhierarchie legt fest, welche Vorlagendatei(en) WordPress verwendet, um verschiedene Arten von Inhalten anzuzeigen. Klassische und Block-Themes folgen einer ähnlichen Hierarchie, unterscheiden sich aber in den Dateitypen, die sie verwenden: Klassische Themes verwenden PHP-Dateien, während Block-Themes HTML-Dateien verwenden.

Die Vorlagenhierarchie folgt einer bestimmten Reihenfolge, um zu bestimmen, welche Vorlagendatei verwendet werden soll. Wenn WordPress eine bestimmte Vorlagendatei nicht finden kann, geht es zur nächsten in der Hierarchie über.

Wenn WordPress z. B. einen einzelnen Blog-Beitrag anzeigen muss, sucht es zuerst nach einer Vorlage, die für den Beitragstyp spezifisch ist, z. B. single-{post-type}.php oder single-{post-type}.html. Wenn diese Datei nicht existiert, sucht es nach der generischen Vorlage single.php oder single.html. Wenn keine dieser Dateien gefunden wird, greift WordPress auf die allgemeinste Vorlage index.php oder index.html zurück.

Das gleiche Verfahren gilt für andere Arten von Inhalten. Bei einer statischen Seite prüft WordPress zunächst, ob der Seite benutzerdefinierte Vorlagen zugewiesen sind. Wird keine gefunden, sucht es nach einer Vorlage, die auf dem Slug der Seite (z. B. page-about.php oder page-about.html) oder ihrer ID (page-42.php oder page-42.html) basiert. Wenn diese speziellen Vorlagen nicht verfügbar sind, verwendet WordPress die allgemeinen page.php oder page.html. Wenn auch diese fehlen, greift es auf index.php oder index.html zurück.

Vorlagen erstellen

Durch das Erstellen von Vorlagen in WordPress kannst du festlegen, wie die verschiedenen Arten von Inhalten auf deiner Website angezeigt werden. Unabhängig davon, ob du mit klassischen Themes oder Block-Themes arbeitest, musst du die notwendigen Dateien einrichten und sie nach deinen Bedürfnissen konfigurieren.

Lass uns eine Seitenvorlage für beide Arten von Themes einrichten.

Seitenvorlage für klassische Themes

Bei klassischen Themes erstellst du eine Seitenvorlage mit PHP. So geht’s:

1. Vorlagendatei erstellen – Erstelle mit einem Texteditor eine neue PHP-Datei im Verzeichnis deines Themes und nenne sie page.php.
2. Vorlagencode hinzufügen – Schreibe den notwendigen PHP-Code, um die Struktur und den Inhalt der Seitenvorlage zu definieren. Dazu gehören in der Regel WordPress-Template-Tags, um den Seiteninhalt anzuzeigen.
3. Kopf- und Fußzeile einbinden – Stelle sicher, dass deine Vorlage die Kopf- und Fußzeile enthält, indem du die Funktionen get_header() und get_footer() hinzufügst. So bleibt das Layout konsistent mit dem Rest deiner Website.

Hier ist ein Beispiel dafür, wie page.php aussehen könnte:

<?php
get_header(); ?>

<main>
    <h1><?php the_title(); ?></h1>
    <div><?php the_content(); ?></div>
</main>

<?php get_footer(); ?>

In diesem Beispiel enthält die Vorlage die Kopfzeile, zeigt den Seitentitel und den Inhalt an und enthält dann die Fußzeile.

Blocktheme-Seitenvorlage

In Block-Themes kannst du eine Seitenvorlage über den WordPress-Site-Editor erstellen oder indem du eine page.html Datei im templates-Verzeichnis anlegst.

Sobald diese Datei erstellt ist, kannst du ein Layout entwerfen, indem du zum Seiteneditor navigierst (Darstellung > Editor in deinem WordPress-Dashboard).

Mit dem Blockeditor kannst du Blöcke hinzufügen und anordnen, um dein Seitenlayout zu gestalten. Du kannst Blöcke für den Seitentitel, das Hauptbild und den Inhalt hinzufügen. Passe jeden Block nach deinen Designvorlieben an.

Wenn du mit dem Layout zufrieden bist, speichere die Vorlage. WordPress erstellt dann automatisch die entsprechende HTML-Datei im Verzeichnis deines Themes.

Themes Styling

Die Gestaltung deines WordPress-Themes ist ein entscheidender Schritt, um das Erscheinungsbild deiner Website zu definieren. Sowohl klassische als auch Block-Themes bieten robuste Möglichkeiten zur Anpassung der Stile, gehen dabei aber unterschiedlich vor.

Styling klassischer Themes

Bei klassischen Themes wird das Styling in der Regel mit CSS vorgenommen. Hier erfährst du, wie du ein klassisches Theme stylen kannst:

Das wichtigste Stylesheet für ein klassisches Theme ist die Datei style.css. Diese Datei enthält alle CSS-Regeln, die das Aussehen deines Themes bestimmen. Hier gibst du auch die Metadaten des Themes an, z. B. den Namen des Themas, den Autor, die Version und die Beschreibung.

Um sicherzustellen, dass dein CSS richtig geladen wird, musst du dein Stylesheet in der Datei functions.php mit der Funktion wp_enqueue_style() einreihen.

function my_theme_enqueue_styles() {
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

Dieser Schritt ist wichtig, um die WordPress-Standards einzuhalten und sicherzustellen, dass die Styles korrekt angewendet werden.

Außerdem kannst du benutzerdefiniertes CSS direkt in die Datei style.css einfügen oder separate CSS-Dateien für verschiedene Teile deines Themes erstellen. Benutzerdefinierte CSS können auch mit dem Tag <style> in einzelne Vorlagendateien eingebettet werden. Diese Praxis ist jedoch weniger verbreitet und wird nur für bestimmte, isolierte Stile empfohlen.

Für fortgeschrittenes Styling kannst du CSS-Präprozessoren wie SASS oder LESS verwenden. Mit diesen Tools kannst du wartungsfreundlicheres und modulares CSS schreiben, was die Verwaltung und Erweiterung der Stile deines Themes erleichtert.

Styling von Blockthemen

Das Styling von Blockthemen wird hauptsächlich über die Datei theme.json und den Blockeditor verwaltet.

Die Datei theme.json ist der zentrale Ort, an dem du die globalen Stile und Einstellungen für dein Theme konfigurierst. In dieser Datei kannst du Farben, Typografie, Abstände und andere Stile in einem strukturierten JSON-Format definieren und so das Aussehen und Verhalten des Themes zentral verwalten. Globale Stile, die in theme.json definiert werden, gelten für deine gesamte Website und sorgen für ein einheitliches Erscheinungsbild.

Zusätzlich zu theme.json kannst du den Block-Editor verwenden, um benutzerdefinierte Stile direkt auf Blöcke anzuwenden. Mit dem Blockeditor kannst du Änderungen in Echtzeit sehen und das Design visuell anpassen, ohne dass du manuell Code schreiben musst. Das macht den Prozess zugänglicher, vor allem für diejenigen, die eine visuelle Schnittstelle dem Programmieren vorziehen.

Auch wenn die theme.json Datei die meisten Stylings übernimmt, kannst du CSS für eine genauere Kontrolle verwenden. Benutzerdefinierte CSS können in der Datei style.css oder direkt in einzelnen Blöcken mit dem Blockeditor hinzugefügt werden.

Ein Beispiel für eine theme.json Datei könnte Einstellungen für Farbpaletten, Typografie und Blockstile enthalten, mit denen sich das Design des Themes leicht verwalten und anpassen lässt.

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Primary",
          "slug": "primary",
          "color": "#0073aa"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "color": "#005177"
        }
      ]
    },
    "typography": {
      "fontSizes": [
        {
          "name": "Small",
          "slug": "small",
          "size": "12px"
        },
        {
          "name": "Normal",
          "slug": "normal",
          "size": "16px"
        }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "#ffffff",
      "text": "#333333"
    },
    "typography": {
      "fontFamily": "Arial, sans-serif"
    }
  }
}

Themes anpassen

Mit der Anpassung von WordPress-Themes kannst du das Aussehen und die Funktionalität deiner Website an deine Bedürfnisse und Vorlieben anpassen. Sowohl klassische Themes als auch Block-Themes bieten verschiedene Methoden zur Anpassung, gehen dabei aber unterschiedlich vor.

Klassische Themes anpassen

Klassische Themes bieten mehrere Möglichkeiten, das Aussehen und die Funktionen deiner Website anzupassen:

1. Theme Customizer – Der WordPress Theme Customizer ist eine einfach zu bedienende Schnittstelle, mit der du das Aussehen deines Themes ändern kannst, ohne den Code zu verändern. Du kannst ihn über Darstellung > Anpassen aufrufen. Hier kannst du die Identität deiner Website, Farben, Menüs, Widgets und vieles mehr ändern. Die Änderungen können vor dem Speichern in Echtzeit überprüft werden.
2. Benutzerdefiniertes CSS – Für spezifischere Stiländerungen kannst du direkt im Theme Customizer unter dem Abschnitt Zusätzliches CSS benutzerdefiniertes CSS hinzufügen. Diese Methode ist ideal, um kleinere Änderungen vorzunehmen, ohne die Themedateien zu bearbeiten.
3. Child-Themes – Wenn du umfangreiche Änderungen vornehmen musst, empfiehlt es sich, ein Child-Theme zu erstellen. Ein Child-Theme erbt die Funktionen des Parent-Theme und ermöglicht es dir, neue Stile und Funktionen zu überschreiben oder hinzuzufügen. So wird sichergestellt, dass deine Anpassungen erhalten bleiben, wenn das Parent-Theme aktualisiert wird.
4. Themedateien – Fortgeschrittene Benutzer können Themedateien wie header.php, footer.php und functions.php direkt bearbeiten, um größere Änderungen vorzunehmen. Diese Methode erfordert jedoch ein gutes Verständnis von PHP und der WordPress-Vorlagenhierarchie.
5. Plugins – Es gibt zahlreiche Plugins, die die Anpassungsmöglichkeiten deines Themes erweitern. Mit Page-Builder-Plugins wie Elementor kannst du zum Beispiel komplexe Layouts ohne Programmierkenntnisse erstellen.

Block-Themes anpassen

Mit ihrem Schwerpunkt auf FSE bieten Block-Themes einen visuelleren und benutzerfreundlicheren Ansatz für die Anpassung:

1. Site-Editor – Der WordPress Site-Editor (Erscheinungsbild > Editor) ist das wichtigste Werkzeug für die Anpassung von Block-Themes. Er ermöglicht es dir, alle Aspekte deiner Website, einschließlich Kopf- und Fußzeilen, Vorlagen und einzelne Blöcke, über eine visuelle Schnittstelle zu ändern. Die Änderungen werden sofort übernommen, so dass du leicht erkennen kannst, wie sich deine Anpassungen auf das Design der Seite auswirken.
2. Globale Stile – Blockthemes verwenden die Datei theme.json, um globale Stile zu definieren. Du kannst Farben, Typografie, Abstände und vieles mehr global anpassen und so die Konsistenz deiner Website sicherstellen. Mit dem Site Editor kannst du diese Einstellungen auch visuell anpassen.
3. Wiederverwendbare Blöcke und Muster – Du kannst wiederverwendbare Blöcke und Muster erstellen, um die Konsistenz zu wahren und den Gestaltungsprozess zu rationalisieren. Wiederverwendbare Blöcke können gespeichert und in jeden Beitrag oder jede Seite eingefügt werden, während Blockmuster vordefinierte Layouts bieten, die du an deine Bedürfnisse anpassen kannst.
4. Benutzerdefinierte Vorlagen – Mit Blockthemes kannst du direkt im Site-Editor benutzerdefinierte Vorlagen für verschiedene Arten von Inhalten erstellen. So kannst du das Layout und Design bestimmter Seiten oder Beitragstypen anpassen, ohne Code zu schreiben.
5. Plugins – Wie klassische Themes können auch Block-Themes mit Plugins erweitert werden. Viele Plugins wurden entwickelt, um die Möglichkeiten des Blockeditors zu erweitern und bieten zusätzliche Blöcke, Muster und Anpassungsmöglichkeiten.

Zusammenfassung

Wenn du WordPress-Themes anpasst, kannst du deine Website einzigartig und funktional gestalten. Klassische Themes setzen auf den Theme Customizer, benutzerdefinierte CSS, Child-Themes und direkte Dateibearbeitung, um flexibel zu sein. Block-Themes nutzen den Site Editor und theme.json für einen visuellen und intuitiven Ansatz.

Beide Methoden bieten leistungsstarke Werkzeuge, mit denen du deine Website an deine Bedürfnisse anpassen kannst, egal ob du lieber programmierst oder sie visuell anpasst.

Nachdem du ein Theme nach deinem Geschmack erstellt hast, entweder ein klassisches oder ein Block-Theme, ist es wichtig, dass deine Website auf einem stabilen Hosting-System gehostet wird, um Probleme wie Ausfallzeiten, DDoS-Angriffe und mehr zu vermeiden. Hier können Premium-Hosting-Anbieter wie Kinsta glänzen.

Kinsta bietet leistungsstarkes Managed WordPress Hosting mit einer vollständig containerisierten Architektur, die ausschließlich von der Google Cloud Platform im Google Premium Tier Netzwerk betrieben wird.

Joel Olawanle Kinsta

Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.

• Webseite
• LinkedIn
• Twitter
• YouTube