WP & Info-Blog

Experimentelles Chaos

bbPress & Die Seitenvorlage in WP

Rubrik:

, , , , ,

Ich benutze das WordPress Theme 2024 und bbPress. Ich möchte für bbPress eine besondere Seitenvorlage verwenden. Wie mache ich das?

Das „Twenty Twenty-Four“ (TT4) Theme ist ein modernes Block-Theme, was die Sache im Vergleich zu alten PHP-Themes etwas verändert. Da TT4 auf den Full Site Editor (FSE) setzt, hast du zwei Wege: den einfachen Weg über den Editor oder den technischen Weg über den Dateimanager.

Hier ist dein Fahrplan:

Weg 1: Der Site Editor (Ohne Code)

Da bbPress standardmäßig die page.html oder single.html nutzt, kannst du im WordPress-Backend eine spezifische Vorlage zuweisen.

  1. Gehe zu Design > Editor.
  2. Klicke auf Templates (Vorlagen) und dann auf das Plus-Icon (+), um eine neue Vorlage zu erstellen.
  3. Wähle Individuelle Vorlage (Custom Template).
  4. Gib ihr einen Namen, z. B. „Forum Layout“.
  5. Gestalte die Seite nach deinen Wünschen (z. B. ohne Sidebar, mit breiterem Inhaltsbereich). Wichtig: Der Block Inhalt (Content) muss enthalten sein, damit die Foren dort erscheinen.
  6. Zuweisung: Gehe zu deiner Seite, auf der der Shortcode [bbp-forum-index] liegt, und wähle in der rechten Seitenleiste unter „Template“ dein neues „Forum Layout“ aus.

Weg 2: Die Template-Hierarchie (Automatisierung)

Wenn du möchtest, dass WordPress automatisch eine bestimmte Vorlage für alle Forenseiten nutzt, kannst du eine Datei in deinem (Child-)Theme erstellen.

bbPress sucht in dieser Reihenfolge nach Dateien:

  1. plugin-bbpress.html
  2. bbpress.html
  3. archive-forum.html

So gehst du vor:

  • Verbinde dich per FTP oder nutze den Hoster-Dateimanager.
  • Navigiere zu /wp-content/themes/twentytwentyfour/templates/.
  • Kopiere die Datei page.html und benenne die Kopie um in bbpress.html.
  • Jetzt kannst du diese Datei im Site Editor unter „Vorlagen“ finden und bearbeiten. WordPress wird diese Vorlage nun automatisch für alle bbPress-Inhalte verwenden.

Weg 3: Spezifisches Styling per CSS

Oft möchte man nur, dass das Forum die volle Breite nutzt, da das TT4-Standardlayout für Text oft recht schmal ist.

Falls du das Layout nur minimal anpassen willst, füge dies unter Design > Editor > Stile (Halbmond-Icon) > Zusätzliches CSS ein:

CSS

/* bbPress Foren auf volle Breite setzen */
.bbpress .entry-content {
    max-width: 1200px; 
    margin-left: auto;
    margin-right: auto;
}

Wichtiger Hinweis: Wenn du Dateien direkt im Theme „Twenty Twenty-Four“ änderst (Weg 2), gehen diese bei einem Theme-Update verloren. Nutze dafür am besten ein Child Theme.

Weg 2 ist die sauberste Lösung, da WordPress durch die Namensgebung der Datei (bbpress.html) automatisch erkennt: „Ah, das ist für das Forum, das nehme ich!“

Da Twenty Twenty-Four ein Block-Theme ist, arbeiten wir hier mit HTML-Dateien, die Block-Markup enthalten. Hier ist die Schritt-für-Schritt-Anleitung:

1. Die Vorlage erstellen

Du musst eine Datei im Ordner deines Themes erstellen. Da du wahrscheinlich kein Child-Theme hast, empfehle ich dringend, eines anzulegen, damit deine Änderungen bei einem Update von Twenty Twenty-Four nicht gelöscht werden.

Der Pfad: wp-content/themes/[dein-theme-name]/templates/bbpress.html

Vorgehensweise:

  1. Logge dich per FTP (z. B. FileZilla) auf deinen Server ein.
  2. Navigiere zu wp-content/themes/twentytwentyfour/templates/.
  3. Lade die Datei page.html auf deinen Computer herunter.
  4. Benenne die Datei lokal um in bbpress.html.
  5. Lade diese neue bbpress.html wieder in den templates-Ordner auf den Server hoch.

2. Die Vorlage im Editor anpassen

Sobald die Datei auf dem Server liegt, „sieht“ WordPress sie als spezifische Vorlage für bbPress.

  1. Gehe in deinem WordPress-Dashboard auf Design > Editor.
  2. Klicke auf Vorlagen. Du solltest nun in der Liste den Eintrag bbpress finden.
  3. Klicke darauf, um das Design anzupassen.
  4. Tipp für bbPress: Meistens ist das Standard-Layout von TT4 zu schmal für Foren-Tabellen. Klicke im Editor auf den zentralen Inhaltsblock (meistens eine „Gruppe“) und stelle die Breite auf „Weite Breite“ oder „Volle Breite“ um.

3. Warum das funktioniert (Die Logik dahinter)

bbPress ist darauf programmiert, in der Template-Hierarchie nach speziellen Namen zu suchen. Sobald eine bbpress.html (bei Block-Themes) oder bbpress.php (bei klassischen Themes) existiert, ignoriert das Plugin die Standard-page.html.

Datei-PrioritätZweck
plugin-bbpress.htmlHöchste Priorität, wird für alles in bbPress genutzt.
bbpress.htmlDer Standard-Standard für Foren-Integration.
archive-forum.htmlSpeziell nur für die Foren-Übersicht.

In Google Sheets exportieren

Ein wichtiger Sicherheitshinweis (Child Theme)

Wenn du die Datei direkt in den Ordner twentytwentyfour hochlädst, wird sie beim nächsten großen Theme-Update von WordPress gelöscht.

Ein Child-Theme ist bei Block-Themes wie „Twenty Twenty-Four“ (TT4) glücklicherweise extrem einfach zu erstellen, da wir kein PHP mehr benötigen.

Hier ist die Anleitung für ein minimales Child-Theme:

1. Ordner erstellen

Erstelle auf deinem Computer einen neuen Ordner mit dem Namen twentytwentyfour-child.

2. Die Datei style.css erstellen

Erstelle in diesem Ordner eine Textdatei namens style.css und füge folgenden Inhalt ein:

CSS

/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
Description: Mein Child Theme für bbPress Anpassungen
Version: 1.0
*/

Wichtig: Die Zeile Template: twentytwentyfour muss exakt so geschrieben werden, damit WordPress weiß, wer das „Eltern-Theme“ ist.

3. Die Datei theme.json erstellen (Optional, aber empfohlen)

Erstelle eine Datei namens theme.json, damit das Child-Theme die Stile des Haupt-Themes korrekt übernimmt:

JSON

{
    "version": 2,
    "template": "twentytwentyfour"
}

4. Den Ordner templates anlegen

Erstelle im Child-Theme-Ordner einen Unterordner namens templates. Kopiere deine bearbeitete (oder die ursprüngliche) bbpress.html in diesen Unterordner.

Deine Struktur sieht nun so aus:

  • twentytwentyfour-child/
    • style.css
    • theme.json
    • templates/
      • bbpress.html

5. Hochladen und Aktivieren

  1. Zippe den Ordner twentytwentyfour-child oder lade ihn per FTP direkt nach /wp-content/themes/ hoch.
  2. Gehe in WordPress zu Design > Themes.
  3. Dort erscheint nun dein „Twenty Twenty-Four Child“. Klicke auf Aktivieren.

Der Vorteil

Wenn WordPress jetzt ein Update für das originale „Twenty Twenty-Four“ installiert, werden nur die Dateien im Hauptordner überschrieben. Deine bbpress.html im Child-Theme bleibt sicher und aktiv.

Ein kleiner Tipp für den Editor: Wenn du jetzt unter Design > Editor > Vorlagen gehst, kannst du die bbpress.html dort jederzeit visuell bearbeiten. Alle Änderungen, die du dort speicherst, werden automatisch in der Datenbank (und bei Block-Themes oft priorisiert) gespeichert.