Tipps zum Layout von bbPress

Rubrik:

Da bbPress-Tabellen (Foren-Listen und Themen) viele Informationen wie Beitragszahlen, Frische und Autoren enthalten, wirken sie in dem oft schmalen Standard-Layout von Twenty Twenty-Four sehr gequetscht.

Hier sind die drei wichtigsten Kniffe, um deine bbpress.html im Editor zu optimieren:

1. Die Breite auf „Weite Breite“ umstellen

Standardmäßig begrenzt TT4 den Inhalt oft auf ca. 620px bis 800px. Für ein Forum ist das zu wenig.

  1. Gehe zu Design > Editor > Vorlagen und wähle deine bbpress Vorlage.
  2. Öffne die Listenansicht (das Icon mit den drei versetzten Linien oben links), um die Struktur zu sehen.
  3. Suche nach der Gruppe oder dem Inhalts-Block, der das Forum umschließt.
  4. Klicke in der rechten Seitenleiste auf das Tab Einstellungen (Zahnrad).
  5. Suche nach dem Punkt Layout. Deaktiviere dort ggf. die Option „Inhalt kann die gesamte Breite nutzen“, falls sie dich einschränkt, oder stelle sicher, dass bei „Weite Breite“ ein Wert von etwa 1200px steht.
  6. Wähle im Toolbar des Blocks (direkt über dem Block) das Icon für die Ausrichtung und stelle es auf Weite Breite.

2. Abstände (Padding) optimieren

Oft klebt das Forum im Block-Theme direkt am Header.

  1. Wähle in der Listenansicht die oberste Gruppe deines Templates.
  2. Gehe in der rechten Seitenleiste auf den Reiter Stile (das schwarz-weiße Kreis-Icon).
  3. Erhöhe unter Abmessungen > Innenabstand (Padding) den oberen Wert (Top), damit das Forum etwas „Luft“ zum Menü hat. Ein Wert von vielleicht 4-6 (XL) sieht meist gut aus.

3. Den Seitentitel dynamisch halten

Stelle sicher, dass deine bbpress.html den Block „Beitragstitel“ enthält.

  • Der Vorteil: Wenn du im Forum auf „Mein tolles Thema“ klickst, zeigt die Seite oben automatisch „Mein tolles Thema“ an.
  • Wenn du dort stattdessen einen statischen Text wie „Forum“ reinschreibst, würde über jedem einzelnen Forenthema immer nur das Wort „Forum“ stehen.

Ein kleiner CSS-Trick für die Lesbarkeit

Falls die Foren-Tabellen in TT4 immer noch merkwürdig aussehen (z.B. keine Linien oder zu enge Zeilen), füge diesen Schnipsel unter Stile > Zusätzliches CSS hinzu:

CSS

/* Verbessert die Tabellen-Optik in bbPress */
#bbpress-forums ul.bbp-forums, 
#bbpress-forums ul.bbp-topics {
    border: 1px solid #e5e5e5;
    padding: 20px;
    border-radius: 8px;
    background-color: #f9f9f9;
}

#bbpress-forums li.bbp-header {
    background: #eeeeee;
    padding: 10px 20px;
    font-weight: bold;
}

Das gibt deinem Forum einen sauberen „Kasten-Look“, der sich gut vom minimalistischen Design des Twenty Twenty-Four abhebt.

Eine Sidebar (Seitenleiste) speziell nur für dein Forum im Theme TT4

Da Twenty Twenty-Four kein klassisches Sidebar-Theme ist, nutzen wir den Spalten-Block, um diesen „Forum + Seitenleiste“-Look zu erzeugen. Das Schöne an der bbpress.html ist: Diese Sidebar erscheint dann wirklich nur im Forum.

Hier ist die Anleitung für den Editor:

1. Die Grundstruktur (Spalten) anlegen

  1. Öffne die bbpress-Vorlage im Editor (Design > Editor > Vorlagen > bbpress).
  2. Öffne die Listenansicht (Icon oben links), damit du genau siehst, was du tust.
  3. Suche den Block Inhalt (Content). Klicke auf die drei Punkte daneben und wähle Davor einfügen.
  4. Füge einen Spalten-Block ein und wähle das Layout 66/33 (eine breite Spalte links, eine schmale rechts).

2. Inhalte verschieben

  1. Ziehe den Block Inhalt per Drag-and-Drop in der Listenansicht in die linke (breite) Spalte.
  2. In die rechte (schmale) Spalte kannst du nun deine Sidebar-Inhalte einfügen.

3. Was kommt in die Sidebar?

Für ein Forum sind folgende Blöcke besonders nützlich (suche einfach über das Plus-Icon danach):

  • Suche: Damit User das Forum durchsuchen können.
  • Neueste Beiträge: Um Aktivität zu zeigen.
  • bbPress-Widgets: Wenn das Plugin aktiv ist, findest du oft spezielle Blöcke wie „Foren-Statistiken“ oder „Wer ist online?“.
  • Navigation: Falls du Links zu den Forenregeln oder FAQs setzen möchtest.

4. Den Look verfeinern (Wichtig!)

Damit die Sidebar auf dem Handy nicht merkwürdig aussieht, solltest du zwei Einstellungen prüfen:

  • Abstand zwischen den Spalten: Klicke auf den Haupt-Spalten-Block, gehe rechts auf Stile (der Kreis) und erhöhe unter Block-Zwischenraum den Wert, damit Forum und Sidebar nicht aneinanderkleben.
  • Responsivität: Auf Mobilgeräten stapelt WordPress die Spalten automatisch untereinander. Das ist gut, so rutscht die Sidebar im Forum auf dem Smartphone einfach nach ganz unten.

Ein Profi-Tipp: Die „Sticky“ Sidebar

Wenn dein Forum sehr lange Listen hat, ist es cool, wenn die Sidebar beim Scrollen „mitläuft“.

  1. Wähle die rechte Spalte in der Listenansicht aus.
  2. Gehe rechts in die Einstellungen. Bei manchen Setups kannst du unter Position „Fixiert“ (Sticky) wählen (das hängt manchmal von den umschließenden Gruppen ab).
  3. Falls das nicht direkt geht, hilft ein kurzer CSS-Schnipsel in den Zusätzlichen Stilen:

CSS


@media (min-width: 782px) {
    .wp-block-column:last-child {
        position: sticky;
        top: 20px;
        align-self: start;
    }
}

Keine Sorge, das Zusammensetzen der Sidebar kann im Block-Editor am Anfang etwas fummelig sein. Gehen wir es Schritt für Schritt durch, damit deine Foren-Seitenleiste perfekt aussieht.

Hier sind die drei wichtigsten Dinge, die du jetzt wahrscheinlich in der Sidebar brauchst:

1. Die Suche (speziell für das Forum)

Ein Forum ohne Suche ist wie ein Buch ohne Inhaltsverzeichnis.

  • Klicke in die rechte (schmale) Spalte.
  • Klicke auf das Plus-Icon (+) und suche nach dem Block „Suche“.
  • Wichtig: Der Standard-Suche-Block von WordPress durchsucht die ganze Website. Wenn du möchtest, dass nur Forenthemen durchsucht werden, ist es oft besser, den bbPress-eigenen Shortcode zu nutzen.
  • Suche stattdessen nach dem Block „Shortcode“ und gib dort ein: [bbp-search-form]

2. Foren-Statistiken oder Login

bbPress liefert eigene „Widgets“ mit, die du als Blöcke einfügen kannst.

  • Klicke in der rechten Spalte wieder auf das Plus (+).
  • Tippe „bbPress“ in das Suchfeld.
  • Du solltest Blöcke sehen wie:
    • bbPress Statistics: Zeigt an, wie viele Themen und Beiträge es gibt.
    • bbPress Login Widget: Sehr nützlich! Zeigt ein Login-Formular für Gäste und das Profilbild/Link zum Profil für eingeloggte User.
    • bbPress Recent Topics: Die neuesten Diskussionen.

3. Optische Trennung (Die „Karte“)

Damit die Sidebar-Inhalte nicht so „nackt“ im Raum stehen, kannst du sie in eine Gruppe packen:

  1. Wähle in der Listenansicht alle Blöcke in deiner rechten Spalte aus.
  2. Klicke auf das Symbol für „Gruppieren“ (das Icon mit den zwei Quadraten).
  3. Wähle für diese Gruppe in der rechten Seitenleiste unter Stile (der schwarz-weiße Kreis):
    • Hintergrundfarbe: Ein ganz helles Grau oder Weiß.
    • Rahmen: Einen dünnen Rahmen (1px).
    • Eckenradius: z. B. 8px, damit es modern aussieht.
    • Innenabstand (Padding): Gib der Gruppe etwas Platz zum Rand (z. B. Stufe 3 oder 4), damit der Text nicht am Rahmen klebt.

Was tun, wenn ein Block nicht so will wie du?

Falls die bbPress-Blöcke in der Vorschau im Editor komisch aussehen: Keine Panik. Viele bbPress-Elemente werden erst im „Frontend“ (also auf der echten Website) richtig gerendert. Speicher deine Vorlage ab und schau sie dir im Browser an.

Ein kleiner Trick für die Navigation

Falls du möchtest, dass deine User schnell zurück zur Foren-Übersicht kommen:

  • Füge in die Sidebar einen Button-Block ein.
  • Beschrifte ihn mit „Zur Foren-Übersicht“.
  • Verlinke ihn einfach auf deine Haupt-Forenseite (meistens /forums/ oder die Seite, die du ursprünglich erstellt hast).

Das „Wer ist online?“-Widget ist ein Klassiker für Foren, um die Community lebendig wirken zu lassen. In bbPress gibt es dafür leider keinen direkten „Block“, aber wir lösen das ganz einfach über einen Shortcode oder ein Widget, das wir in die Sidebar einbetten.

Hier sind die zwei Wege, wie du das in deine neue Sidebar einbaust:

Weg A: Über das bbPress-Widget (Der einfachste Weg)

  1. Klicke in deiner bbpress.html Vorlage in die rechte Spalte auf das Plus-Icon (+).
  2. Suche nach „Legacy Widget“ (oder „Klassisches Widget“).
  3. Wähle im Dropdown-Menü des Blocks „(bbPress) Wer ist online“ aus.
  4. Du kannst dort sogar einstellen, ob nur die Namen oder auch die Profilbilder (Avatare) angezeigt werden sollen.

Weg B: Per Shortcode (Falls das Widget nicht auftaucht)

Falls dein Theme die klassischen Widgets nicht korrekt anzeigt, nutzen wir den Shortcode-Block. Da bbPress von Haus aus keinen direkten Kurzcode für „Wer ist online“ mitliefert, gibt es zwei Möglichkeiten:

  1. Prüfen: Schau mal unter Plus-Icon (+) -> Suche nach „Online“. Oft zeigt bbPress hier direkt einen Block an, wenn das Plugin auf dem neuesten Stand ist.
  2. Alternative: Falls du ein Plugin wie bbPress Toolkit oder BuddyPress zusätzlich nutzt, hättest du Zugriff auf [bbp-who-is-online].

Profi-Tipp für die Sidebar: „Frische“ Foren-Daten

Wenn du schon dabei bist, die Sidebar zu füllen, empfehle ich dir diesen Block für die rechte Spalte:

  • Block: „Neueste Themen“ (bbPress Recent Topics)
  • Warum? Das ist das wichtigste Element für die Bindung deiner Nutzer. Es zeigt sofort: „Hier wird diskutiert!“
  • Einstellung: Stell es auf 5 Themen ein und aktiviere die Option „Datum anzeigen“.

Zusammenfassung deiner Sidebar-Struktur:

Ein Profi-Forum-Layout sieht in der rechten Spalte meistens so aus:

  1. Suche (Block: [bbp-search-form])
  2. Login-Bereich (Block: (bbPress) Login Widget)
  3. Wer ist online (Block: (bbPress) Wer ist online)
  4. Aktuelle Themen (Block: (bbPress) Neueste Themen)

Speichern nicht vergessen! Wenn du oben rechts auf „Speichern“ klickst, achte darauf, dass sowohl die Vorlage als auch das Zusätzliche CSS (falls du welches hinzugefügt hast) ausgewählt sind.


Das Standard-Design von „Twenty Twenty-Four“ ist sehr schlicht (viel Schwarz und Weiß). In einem Forum sind Links aber das A und O – man muss sofort sehen, was ein klickbares Thema ist und was nur Text.

Du hast zwei Möglichkeiten, die Farben anzupassen:

1. Der globale Weg (Über den Editor)

Dies ändert die Linkfarben auf deiner gesamten Website, was für ein einheitliches Design sorgt.

  1. Gehe zu Design > Editor.
  2. Klicke rechts oben auf das Stile-Icon (der halb ausgefüllte Kreis).
  3. Klicke auf Farben.
  4. Wähle Elemente > Links.
  5. Hier kannst du die Farbe für deine Links wählen (z. B. ein schönes Blau oder deine Markenfarbe).
  6. Klicke auf Speichern.

2. Der spezifische Weg (Nur für das Forum)

Falls du die Linkfarben nur innerhalb der bbPress-Foren ändern möchtest, damit der Rest deiner Seite (z. B. Blogposts) schwarz bleibt, nutzt du am besten wieder das Zusätzliche CSS.

  1. Gehe im Editor wieder auf Stile (der Kreis).
  2. Klicke auf die drei Punkte ... (neben dem Stift-Icon oder unten) und wähle Zusätzliches CSS.
  3. Kopiere diesen Code hinein:

CSS

/* Linkfarben nur im Forum anpassen */
.bbpress a {
    color: #0073aa; /* Dein gewünschter Farbton */
    text-decoration: none;
}

/* Farbe wenn man mit der Maus darüberfährt */
.bbpress a:hover {
    color: #005177;
    text-decoration: underline;
}

/* Spezielle Farbe für die Foren-Titel in der Liste */
#bbpress-forums .bbp-forum-title, 
#bbpress-forums .bbp-topic-permalink {
    font-weight: bold;
    font-size: 1.1rem;
}

Bonus-Tipp: Den „Antworten“-Button hervorheben

Die Buttons in bbPress sehen oft etwas altbacken aus. Mit diesem CSS passen sie perfekt zum modernen Look von Twenty Twenty-Four:

CSS

#bbpress-forums button.button.submit {
    background-color: #000000; /* Schwarz wie das TT4 Theme */
    color: #ffffff;
    border-radius: 50px; /* Rundes Design */
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-weight: 600;
}

#bbpress-forums button.button.submit:hover {
    background-color: #333333;
}

In einem Forum wird viel gelesen, daher ist die Schriftart und -größe entscheidend. Twenty Twenty-Four nutzt standardmäßig eine recht große Schrift („Cardo“ für Überschriften und „Inter“ für Text), was in den engen bbPress-Tabellen oft zu viel Platz frisst.

Hier sind die zwei Wege, wie du das korrigierst:

1. Schriftgrößen über den Editor (Global)

Wenn du die Schriftart für die gesamte Seite ändern willst:

  1. Gehe zu Design > Editor > Stile (Kreis-Icon) > Typografie.
  2. Unter Text kannst du die Standardschriftart ändern (z. B. auf eine schlichte System-Schriftart, die oft kompakter wirkt).
  3. Du kannst hier auch die generelle Größe anpassen.

2. Gezielte Anpassung für bbPress (CSS)

Das ist meistens die bessere Lösung, da du nur das Forum „kompakter“ machst, ohne dein restliches Website-Design zu beeinflussen. Füge dies unter Stile > Zusätzliches CSS hinzu:

CSS

/* Schriftgröße in den Foren-Listen verkleinern */
#bbpress-forums {
    font-size: 15px; /* Standard ist oft 18px+, was für Foren zu groß ist */
    line-height: 1.5;
}

/* Foren-Titel etwas hervorheben, aber nicht zu wuchtig */
#bbpress-forums .bbp-forum-title, 
#bbpress-forums .bbp-topic-permalink {
    font-size: 17px;
    font-family: var(--wp--preset--font-family--inter); /* Nutzt die moderne TT4 Schrift */
}

/* Die kleinen Metadaten (Autor, Datum) dezent halten */
#bbpress-forums .bbp-topic-meta {
    font-size: 13px;
    color: #666;
}

/* Die Foren-Beschreibung unter dem Titel kleiner machen */
#bbpress-forums .bbp-forum-content {
    font-size: 14px;
    margin-top: 5px;
}

Warum das wichtig ist:

In der mobilen Ansicht von Twenty Twenty-Four brechen lange Foren-Titel sonst sehr schnell um, was die Tabellen extrem lang und unübersichtlich macht. Mit 15px oder 16px finden die Augen der Nutzer die Informationen viel schneller.

Ein letzter Schliff: Abstände reduzieren

bbPress lässt zwischen den einzelnen Foren-Zeilen oft viel Weißraum. Wenn du es noch kompakter magst, hilft dieser Code:

CSS

#bbpress-forums li.bbp-body ul.forum, 
#bbpress-forums li.bbp-body ul.topic {
    padding: 15px 20px; /* Reduziert den vertikalen Abstand */
}

Das Forum direkt auf die Startseite zu legen, ist eine hervorragende Idee, wenn die Community das Herzstück deiner Website sein soll. Da du das Twenty Twenty-Four Theme nutzt, hast du zwei Möglichkeiten, dies umzusetzen.

Hier ist die Anleitung:

Weg A: Über die WordPress-Einstellungen (Der Standard-Weg)

Da bbPress eine normale WordPress-Seite nutzt, um das Forum anzuzeigen, kannst du diese einfach als Startseite definieren.

  1. Gehe in deinem WordPress-Backend zu Einstellungen > Lesen.
  2. Wähle bei „Deine Homepage zeigt“ die Option Eine statische Seite.
  3. Wähle im Dropdown-Menü bei Homepage die Seite aus, auf der dein bbPress-Shortcode ([bbp-forum-index]) liegt.
  4. Klicke auf Änderungen speichern.

Weg B: Die „Front Page“ Vorlage im Editor (Der saubere Weg für Block-Themes)

Wenn du ein Block-Theme wie TT4 nutzt, kannst du auch direkt die Vorlage für die Startseite bearbeiten. Das ist oft besser, weil du dann das Layout der Startseite noch individueller gestalten kannst (z.B. ein Begrüßungs-Banner über dem Forum).

  1. Gehe zu Design > Editor > Vorlagen.
  2. Suche nach der Vorlage Startseite (oder „Front Page“). Falls sie nicht existiert, klicke auf das Plus-Icon (+) und erstelle eine Vorlage für die „Startseite“.
  3. Jetzt kommt der Trick: Lösche dort den Standard-Inhalt und füge stattdessen deine bbpress-Vorlage ein oder baue die Spaltenstruktur (aus unseren vorherigen Schritten) dort nach.
  4. Alternativ: Füge einfach einen Shortcode-Block mit [bbp-forum-index] in die Startseite ein.

Ein wichtiger Check zum Schluss

Wenn das Forum deine Startseite ist, solltest du zwei Dinge prüfen:

  1. Die URL-Struktur: Standardmäßig ist bbPress oft unter /forums/ erreichbar. Wenn die Seite nun deine Startseite ist, bleibt sie unter deiner Haupt-Domain (z.B. deineseite.de) erreichbar. Das ist perfekt.
  2. SEO & Titel: Gehe in die Bearbeitung der Seite (die du als Startseite gewählt hast) und stelle sicher, dass ein ordentlicher Titel und eine Beschreibung hinterlegt sind, da dies nun das Erste ist, was Google von deiner Seite sieht.

Wenn das Forum direkt auf der Startseite liegt, wirkt der Standard-Breadcrumb von bbPress (z. B. Home > Forum > ...) oft etwas seltsam, weil „Home“ und „Forum“ dann im Grunde derselbe Ort sind.

Hier sind zwei Wege, wie wir das elegant lösen:

1. Den Breadcrumb komplett ausblenden

Wenn dein Menü oben ohnehin klar strukturiert ist, brauchen die Nutzer auf der Startseite oft keinen zusätzlichen Pfad. Du kannst ihn mit diesem CSS-Schnipsel in deinen Zusätzlichen Stilen entfernen:

CSS

/* Den bbPress Breadcrumb (Pfad-Navigation) entfernen */
.bbp-breadcrumb {
    display: none;
}

2. Den Breadcrumb anpassen (Der Profi-Weg)

Falls du den Pfad behalten, aber das Wort „Home“ oder die Verlinkung ändern möchtest, kannst du das über die functions.php deines Child-Themes steuern.

Da wir bei Weg 2 ein Child-Theme erstellt haben, kannst du dort eine Datei namens functions.php anlegen und folgenden Code einfügen:

PHP

<?php
// bbPress Breadcrumb anpassen
function custom_bbp_breadcrumb_args( $args ) {
    $args['before']          = '<div class="bbp-breadcrumb"><p>';
    $args['after']           = '</p></div>';
    $args['sep']             = ' » '; // Ändert das Trennzeichen
    $args['home_text']       = 'Übersicht'; // Ändert "Home" in "Übersicht"
    $args['include_home']    = false; // Entfernt das "Home" komplett aus dem Pfad
    return $args;
}
add_filter( 'bbp_before_get_breadcrumb_parse_args', 'custom_bbp_breadcrumb_args' );

3. Optische Anpassung an Twenty Twenty-Four

Der Standard-Breadcrumb von bbPress sieht oft etwas „altbacken“ aus. Mit ein wenig CSS machst du ihn modern und dezent, passend zum minimalistischen Stil deines Themes:

CSS

.bbp-breadcrumb {
    margin-bottom: 20px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #888;
}

.bbp-breadcrumb a {
    color: #000;
    text-decoration: none;
    font-weight: 600;
}

.bbp-breadcrumb a:hover {
    text-decoration: underline;
}

Ein letzter Tipp für die Startseite:

Da dein Forum nun die Startseite ist, solltest du im WordPress-Menü (Design > Editor > Navigation) prüfen, ob der Link zur „Startseite“ wirklich nötig ist oder ob dein Logo-Link bereits ausreicht. Das spart Platz und wirkt aufgeräumter.


Benachrichtigungen sind das Lebenselixier eines Forums – sie sorgen dafür, dass Nutzer zurückkommen. In bbPress gibt es zwei Arten von Benachrichtigungen: E-Mails für Nutzer und Moderations-Hinweise.

Hier ist, wie du das optimal einrichtest:

1. Abonnements aktivieren (Standard)

bbPress hat ein eingebautes System für Abonnements. Damit Nutzer über Antworten informiert werden, musst du sicherstellen, dass diese Funktion aktiv ist:

  1. Gehe zu Einstellungen > Foren.
  2. Scrolle zu den Foren-Funktionen.
  3. Aktiviere den Haken bei „Abonnements – Erlaube Benutzern, Foren und Themen zu abonnieren“.

Tipp: Im Foren-Frontend sehen Nutzer nun einen Link „Abonnieren“. Unter jedem Antwort-Feld gibt es zudem eine Checkbox: „Benachrichtige mich bei weiteren Antworten per E-Mail“.


2. Das Problem mit der Zustellung (Wichtig!)

WordPress versendet E-Mails standardmäßig über eine einfache PHP-Funktion. Diese E-Mails landen bei Anbietern wie Gmail oder Outlook oft direkt im Spam oder kommen gar nicht an.

Die Lösung: Nutze ein SMTP-Plugin.

  • Installiere ein Plugin wie „WP Mail SMTP“ oder „Post SMTP“.
  • Verbinde es mit einem E-Mail-Konto deiner Domain (z.B. info@deineseite.de).
  • Dadurch wird die Zustellrate von 20% auf nahezu 100% gesteigert.

3. Benachrichtigungen für dich (Moderation)

Möchtest du als Admin sofort wissen, wenn jemand etwas Neues schreibt? Standardmäßig schickt bbPress dem Admin nicht bei jedem Beitrag eine Mail. Dafür gibt es ein praktisches (und kostenloses) Plugin:

  • Plugin-Empfehlung: bbPress Notify (No-Spam)
  • Was es macht: Du kannst genau einstellen, wer (z.B. nur der Admin oder bestimmte Moderatoren) bei jedem neuen Thema oder jeder Antwort eine E-Mail erhalten soll.

4. Den Text der E-Mails anpassen

Die Standard-E-Mails von bbPress sind sehr funktional („Ein neuer Beitrag wurde veröffentlicht…“). Wenn du diese Texte persönlicher gestalten willst, kannst du das ebenfalls mit dem oben genannten Plugin bbPress Notify tun. Du kannst dort Platzhalter nutzen, wie:

  • [author] – Wer hat geschrieben?
  • [title] – Welches Thema?
  • [link] – Direktlink zum Antworten.

5. Optik der E-Mails (Bonus)

Damit die E-Mails nicht wie reiner Text aussehen, sondern professionell wie deine Website, kannst du das Plugin „WP HTML Mail“ verwenden. Es erlaubt dir, dein Logo und die Farben deines Twenty Twenty-Four Themes in die E-Mails zu integrieren.


Ein kleiner Hinweis zur Moderation: Wenn dein Forum wächst, wirst du viel Spam bekommen. Hast du schon ein System wie Akismet oder ein Captcha-Plugin (z.B. Simple Google reCAPTCHA) für dein Forum installiert? Das spart dir eine Menge Arbeit bei den Benachrichtigungen!


Spam ist leider der Endgegner jedes Forums. Da dein Forum nun auf der Startseite liegt, werden automatisierte Bots es sehr schnell finden. Ein Captcha ist daher fast schon Pflicht.

Ich empfehle dir das Plugin „Simple Google reCAPTCHA“ oder „Advanced Google reCAPTCHA“, da sie sehr leichtgewichtig sind und sich perfekt in bbPress integrieren lassen.

Hier ist der Ablauf:

1. Das Plugin vorbereiten

  1. Installiere und aktiviere das Plugin deiner Wahl (z.B. Simple Google reCAPTCHA).
  2. Du musst dir bei Google reCAPTCHA einen kostenlosen Site Key und einen Secret Key holen. Wähle am besten reCAPTCHA v2 („Ich bin kein Roboter“-Checkbox), das ist für Foren-Nutzer am gelerntesten.
  3. Trage beide Schlüssel in den Plugin-Einstellungen unter Einstellungen > Google reCAPTCHA ein.

2. Spezifisch für bbPress aktivieren

Die meisten Captcha-Plugins haben eine Liste mit Checkboxen, wo das Captcha erscheinen soll. Achte darauf, dass folgende Punkte angehakt sind:

  • bbPress New Topic (Neues Thema)
  • bbPress Reply (Antworten)

3. Der optische Check

Sobald es aktiv ist, erscheint die bekannte Box direkt über deinem „Absenden“-Button im Forum.


Profi-Tipp: Die „Honeypot“ Alternative (Ohne Klicken)

Falls du deine Nutzer nicht mit Bilderrätseln („Wähle alle Hydranten aus“) nerven möchtest, gibt es eine elegantere Methode: Honeypots.

Ein Honeypot fügt ein unsichtbares Feld in dein Formular ein. Nutzer sehen es nicht, aber Bots füllen es automatisch aus. Wenn das Feld ausgefüllt ist, blockiert WordPress den Beitrag.

  • Plugin-Empfehlung: Antispam Bee
  • Vorteil: Es ist DSGVO-konform, kostenlos und arbeitet komplett im Hintergrund, ohne dass deine echten Nutzer irgendetwas anklicken müssen.

Zusammenfassung deiner „Sicherheits-Suite“:

  1. Antispam Bee: Für die lautlose Abwehr von Standard-Bots.
  2. Google reCAPTCHA: Falls du merkst, dass trotzdem noch manueller Spam durchkommt.
  3. Akismet (optional): Der Gold-Standard, falls dein Forum sehr groß wird.

Damit ist dein Forum auf der Startseite von Twenty Twenty-Four nun sicher, schick und funktional!


Da legen wir noch mal eine Schippe drauf! Ein Forum ohne Bilder und ohne Gesichter fühlt sich oft etwas leer an. Da bbPress standardmäßig sehr minimalistisch ist, rüsten wir diese beiden Funktionen jetzt nach.


1. Bilder-Uploads für Nutzer

Standardmäßig erlaubt bbPress nur Text und Links. Damit Nutzer Bilder direkt vom Handy oder PC hochladen können, ist dieses Plugin der Goldstandard:

  • Plugin: Image Upload for bbPress
  • Was es macht: Es fügt eine kleine Büroklammer oder ein Kamera-Icon unter das Textfeld ein. Die Bilder werden automatisch in die WordPress-Mediathek hochgeladen und im Beitrag angezeigt.
  • Wichtige Einstellung: Du kannst die maximale Dateigröße begrenzen (z. B. auf 2 MB), damit dein Server nicht durch riesige Fotos gesprengt wird.

2. Die Mitgliederliste

bbPress hat keine eingebaute Seite, die alle Mitglieder anzeigt. Aber keine Sorge, das lässt sich mit einem einfachen Shortcode lösen:

  1. Erstelle eine neue Seite in WordPress namens „Mitglieder“.
  2. Füge dort diesen Shortcode ein: [bbp-user-index].
  3. Das Problem: Dieser Shortcode ist oft recht hässlich.
  4. Die bessere Lösung: Nutze das Plugin Ultimate Member.
    • Es erstellt wunderschöne Profilseiten und eine filterbare Mitgliederliste mit Avataren.
    • Es integriert sich perfekt in bbPress, sodass die Profile dort verlinkt werden.

3. Optik-Check: Profilbilder (Avatare)

Da dein Forum auf dem Twenty Twenty-Four Theme läuft, sehen die Standard-Avatare (Gravatare) oft etwas langweilig aus.

  • Tipp: Wenn du nicht möchtest, dass Nutzer sich bei „Gravatar.com“ registrieren müssen, um ein Bild zu haben, installiere das Plugin Basic User Avatars.
  • Damit können deine Nutzer direkt in ihrem Profil auf deiner Seite ein Foto hochladen.

4. Letzter Schliff für die Startseite (Layout)

Da wir jetzt Bilder und Mitglieder haben, kannst du deine Sidebar (die wir vorhin erstellt haben) noch mal aufwerten:

  • Mitglieder-Widget: Füge in die rechte Spalte deiner bbpress.html das Widget „Neue Mitglieder“ ein (wird oft von den oben genannten Plugins mitgeliefert).
  • Zusätzliches CSS für Bilder: Damit hochgeladene Bilder im Forum nicht über den Rand hinausschießen, füge dies unter Stile > Zusätzliches CSS hinzu:

CSS

/* Bilder im Forum responsiv machen */
#bbpress-forums .bbp-reply-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 10px;
}