Themes: Block-Themes und klassische Themes

Modul 5: Themes und Plugins · Lesezeit: 9 Minuten

Lernziel: Nach dieser Lektion können Sie den Unterschied zwischen Block-Themes und klassischen Themes erklären und ein Theme bewusst auswählen.

Kernbegriffe: Theme, Template-Hierarchie, Block-Theme, Sjabloon (Template), Template-Teil (Template Part), theme.json, Website-Editor, klassisches Theme, PHP-Templates, Customizer, Widgets, Seitenbaukasten, Lock-in, Theme-Verzeichnis

Was ein Theme macht

Ein Theme bestimmt, wie Ihre Website aussieht und wie Seiten aufgebaut sind: der Kopfbereich mit Logo und Menü, die Breite des Inhalts, Schriftarten und Farben, die Fußzeile, wie eine Beitragsübersicht oder ein Suchergebnis aussieht. Der Inhalt selbst (Ihre Texte, Seiten, Bilder) steht in der Datenbank und bleibt bei einem Theme-Wechsel erhalten.

Jedes Theme liegt in einem eigenen Verzeichnis unter wp-content/themes/, zum Beispiel wp-content/themes/twentytwentyfive/. In diesem Verzeichnis gibt es immer eine style.css mit einem Kopfbereich, der das Theme beschreibt (Name, Version, Ersteller). Das sehen Sie auch in Lektion 5.2 wieder.

Seit WordPress 5.9 (Anfang 2022) gibt es zwei Arten von Themes, und sie funktionieren wirklich unterschiedlich.

Klassische Themes

Ein klassisches Theme besteht aus PHP-Dateien: header.php, footer.php, single.php, page.php, index.php, und so weiter. Welche Datei für welche Seite verwendet wird, folgt der Template-Hierarchie (Lektion 1.2). Anpassungen nehmen Sie vor:

• im Customizer (Design > Customizer): Logo, Farben, Optionen, die das Theme anbietet;
• mit Widgets (Design > Widgets): Blöcke in der Seitenleiste oder der Fußzeile;
• mit Menüs (Design > Menüs, Lektion 4.3);
• im Code, mit einem Child-Theme (Lektion 5.2).

Viele bekannte Themes sind (noch) klassisch oder hybrid. Sie funktionieren einwandfrei und werden noch jahrelang unterstützt.

Block-Themes

Ein Block-Theme ist aus denselben Blöcken aufgebaut wie Ihr Inhalt. Das Theme hat:

• Sjablonen (Templates) als HTML-Dateien mit Blöcken, im Verzeichnis templates/: index.html, single.html, page.html, 404.html;
• Template-Teile (Template Parts) in parts/: header.html, footer.html;
• eine Datei theme.json mit den Stileinstellungen: Farbpalette, Schriftarten, Schriftgrößen, Breite des Inhalts, Abstand zwischen Blöcken.

Ein kleiner Ausschnitt aus theme.json:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primair", "color": "#1e3a5f", "name": "Primär" },
        { "slug": "accent", "color": "#e8a33d", "name": "Akzent" }
      ]
    },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  }
}

Anpassungen nehmen Sie im Website-Editor vor (Design > Editor): Sie bearbeiten den Kopfbereich, die Fußzeile und die Sjablonen mit Blöcken, und bei Stile wählen Sie Farben, Schriftarten und Abstände für die gesamte Website.

Ein wichtiger Unterschied, den Sie kennen sollten: Was Sie im Website-Editor anpassen, wird in der Datenbank gespeichert, nicht in den Theme-Dateien. Ein Update des Themes überschreibt Ihre Anpassungen also nicht. Das bedeutet aber auch: Ein angepasstes Sjabloon in der Datenbank hat Vorrang vor dem Sjabloon im Theme. Veröffentlicht der Ersteller ein verbessertes Sjabloon, sehen Sie das nicht, solange Ihre angepasste Version besteht. Im Website-Editor können Sie ein Sjabloon auf die Version des Themes zurücksetzen.

Seitenbaukästen

Ein Seitenbaukasten (wie Elementor, Divi oder WPBakery) ist ein Plugin oder Theme mit einem eigenen Editor, in dem Sie Seiten per Drag-and-drop gestalten. Sie sind beliebt, weil sie viele Möglichkeiten ohne Code bieten. Seien Sie sich der Nachteile bewusst:

• Lock-in: Die Formatierung liegt in einem eigenen Format vor (oft Shortcodes oder eigene Daten in wp_postmeta). Deaktivieren Sie den Baukasten, bleibt von Ihren Seiten häufig ein Durcheinander aus Codes übrig. Ein Wechsel bedeutet meist, alles neu aufzubauen.
• Schwerer: Viele Baukästen laden zusätzliche Skripte und Stylesheets auf jeder Seite. Das kann Ihre Website langsamer machen (Modul 6).
• Noch eine Komponente, die gepflegt werden muss, mit eigenen Updates und eigenen Sicherheitslücken.

Ein Seitenbaukasten ist keine falsche Wahl, treffen Sie die Entscheidung aber bewusst. Für viele Websites lässt sich das Gewünschte auch mit einem Block-Theme und Mustern (Patterns) erreichen.

Ein Theme auswählen

Worauf Sie achten sollten, in dieser Reihenfolge:

1. Herkunft: das Theme-Verzeichnis von wordpress.org (von Freiwilligen geprüft) oder ein bekannter Ersteller mit eigener Website. Nie eine „kostenlose" Kopie eines kostenpflichtigen Themes von einer Downloadseite: Diese enthält oft eine Hintertür (Lektion 5.3).
2. Pflege: Wann wurde das Theme zuletzt aktualisiert? Ein Theme ohne Updates im vergangenen Jahr wird zu einem Risiko.
3. Block oder klassisch: Passt es zu Ihrer gewünschten Arbeitsweise? Ein Block-Theme, wenn Sie im Website-Editor anpassen möchten, ein klassisches Theme, wenn Sie eine bestehende Website auf dieselbe Weise fortführen möchten.
4. Was es mitbringt: Ein Theme, das „alles kann" (Slider, Portfolio, Kontaktformular, SEO), bindet Funktionen an das Theme. Wechseln Sie später, verlieren Sie diese. Funktionen gehören in Plugins, Gestaltung ins Theme.
5. Barrierefreiheit und Geschwindigkeit: Im Theme-Verzeichnis von wordpress.org können Sie nach dem Merkmal „Accessibility Ready" filtern. Prüfen Sie die Demo des Themes mit PageSpeed Insights (Lektion 6.1).
6. Sprache: Ist das Theme übersetzt, oder können Sie Texte selbst anpassen?

Theme wechseln

Bei einem Theme-Wechsel bleibt Ihr Inhalt erhalten, aber alles drumherum ändert sich. Tun Sie das niemals einfach so auf Ihrer Live-Website:

• Probieren Sie das neue Theme zunächst mit Live-Vorschau aus (bei Design > Themes), oder besser in einer Staging-Umgebung (Lektion 8.3).
• Überprüfen Sie anschließend Menüs (Lektion 4.3), Widgets, Logo, die Startseite und die Beitragstypen, die das alte Theme bereitgestellt hat (Lektion 4.2).
• Shortcodes des alten Themes erscheinen als loser Text ([slider id="3"]) auf Ihren Seiten.

Zusammenfassung

• Ein Theme bestimmt die Gestaltung und den Aufbau; der Inhalt steht unabhängig davon in der Datenbank.
• Klassische Themes bestehen aus PHP-Sjablonen, angepasst mit dem Customizer, Widgets und Menüs.
• Block-Themes sind aus Blöcken und theme.json aufgebaut und werden im Website-Editor angepasst; diese Anpassungen stehen in der Datenbank.
• Seitenbaukästen bieten viel, binden Sie aber und können Ihre Website schwerer machen.
• Wählen Sie ein Theme nach Herkunft, Pflege und Einfachheit aus; Funktionen gehören in Plugins, nicht ins Theme.

Quiz

Aufgabe

Aufgabe A5.1: Welches Theme verwendet Ihre Website? Suchen Sie im Quellcode Ihrer Startseite (Strg+U) nach /wp-content/themes/ und tragen Sie den Namen des am häufigsten vorkommenden Theme-Verzeichnisses ein. Verwenden Sie ein Child-Theme (Lektion 5.2), tragen Sie das Verzeichnis des Child-Themes und das des übergeordneten Themes ein. Geben Sie außerdem an, ob es sich um ein Block-Theme oder ein klassisches Theme handelt und wie Sie das festgestellt haben. Das Programm liest die Startseite und die style.css des genannten Themes und vergleicht sie.

Weiterführende Links

Für die Arbeit in WordPress selbst haben wir noch keine eigenen Artikel; die offizielle Dokumentation von WordPress ist umfangreich.

• Was ist ein Theme? (developer.wordpress.org, Englisch): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Themes auf wordpress.org: https://wordpress.org/themes/
• Website-Editor (wordpress.org, Englisch): https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, Englisch): https://developer.wordpress.org/themes/global-settings-and-styles/