Wie mache ich ein Theme für bbPress?

An den Suchbegriffen, die auf diese kleine Website führen, kann ich erkennen, dass relativ häufig nach Themes für bbPress gesucht wird. Das verfügbare Angebot an fertigen Themes ist zurzeit „sehr überschaubar“, um es einmal fröhlich positiv auszudrücken. Für jemanden, der mit wenig Mühe und ohne besondere Kenntnisse in der Programmierung und Gestaltung von Websites ein Forum aufsetzen möchte, das auch seinen optischen Anforderungen entspricht, ist dies sehr nachteilhaft und schafft eine hohe Einstiegshürde. Auch gibt es noch kein zentrales Theme-Verzeichnis, das einen bequemen optischen Vergleich und gezielten Download bestehender Themes ermöglicht, die dann mit geringer Mühe an die eigenen Bedürfnisse angepasst werden könnten.

Darüber hinaus gibt es kaum deutschsprachige Anleitungen, wie man selbst ein Theme gestalten kann, was für Einsteiger ebenfalls entmutigend ist. Die meisten Menschen wissen mit ihrer Lebenszeit etwas besseres anzufangen, als sich mühsam aus einer Vielzahl von Quellen die gewünschten Informationen zusammenzusuchen. Diese Situation wird noch ungünstiger dadurch, dass die für Theme-Designer verfügbaren Funktionen nirgends zentral und gut durchsuchbar und navigierbar dokumentiert sind, nicht einmal in englischer Sprache.

Ich kann nur hoffen, dass sich diese Situation in der nächsten Zeit ändert – und bis dahin einen eigenen kleinen Beitrag zur Verbesserung leisten.

Die folgende Kurzanleitung zur Erstellung eines bbPress-Themes richtet sich an Menschen, die

  1. bereits gewisse Kenntnisse in HTML, CSS und den Grundlagen der Gestaltung einer Website haben;
  2. die bereit sind, sich ihr Theme selbst zu bauen, aber keine Lust haben, dafür das Rad zum zweiten Male zu erfinden; und
  3. die eine gewisse Freude daran haben, sich ihr Wissen selbst zu erarbeiten, denn diese Freude macht es leichter, mit der gegenwärtigen, unbefriedigenden Situation zu leben.

Darüber hinaus sind grundlegende Kenntnisse in PHP sehr hilfreich, wenn sie auch für eine einfache Anpassung des Standard-Themes nicht unbedingt erforderlich sind. Mit Hilfe dieser Kenntnisse ist es möglich, den Aufbau des Standard-Themes Kakumei zu verstehen und eventuell gewünschte, tiefer gehende Anpassungen vorzunehmen. Wer darüber hinaus Erfahrungen darin hat, wie ein Theme für WordPress gestaltet wird, erhält einen besonders einfachen Einstieg, weil auf diesem Hintergrunde vieles in bbPress sehr vertraut wirkt.

Grundsätzliches

Alle folgenden Aussagen beziehen sich auf die gegenwärtige Version 1.0.x von bbPress. Die Konzepte sind allerdings so reif und gut, dass davon auszugehen ist, dass sie längerfristig Bestand haben werden.

Das Kernsystem von bbPress unterscheidet – im Gegensatz zu WordPress – sauber zwischen Standardthemes, die zur jeweiligen Release gehören und benutzerdefinierten Themes. Für jemanden, der von WordPress kommt, ist dieser Ansatz zunächst ungewohnt. Es gibt einerseits das Verzeichnis bb-templates, in welchem die Standardthemes untergebracht sind, und zum anderen das Verzeichnis my-templates, welches für die lokale Installation von weiteren Themes vorgesehen ist.

Vollständiger Aufbau eines Themes

Ein Blick in das Verzeichnis bb-templates/kakumei gibt am Beispiel des Standard-Themes Kakumei einen ersten Einblick darin, wie ein Theme aufgebaut ist. Für jedes Element in der Darstellung der Foren-Site existiert dort eine PHP-Datei. Jede dieser Dateien trägt einen (festgelegten) Dateinamen, der auch ihre Funktion deutlich macht. Die Datei header.php erzeugt etwa den Bereich der Foren-Site, der immer vor den jeweiligen Inhalten der dargestellten Seite angezeigt wird und der in einem eigenen Design in der Regel für eine Kopfzeile mit einer kurzen Beschreibung des Forums und eventuellen, statischen Navigationselementen verwendet werden wird. Die Datei footer.php erzeugt hingegen jenen Bereich der Foren-Site, der immer nach den Inhalten der dargestellten Seite angezeigt wird, hier wäre in einem eigenen Design etwa ein guter Platz für solche gesetzlich vorgegebenen Elemente wie ein Impressum oder eine Datenschutzerklärung.

(An ein Impressum oder eine Datenschutzerklärung sollte immer gedacht werden, wenn es sich um ein kommerziell betriebenes Forum handelt. Ein Website wird in der BR Deutschland auch dann als kommerziell betrachtet, wenn sie Einnahmen über eingeblendete Werbung erzielt, selbst wenn diese Einnahmen eher geringwertig sind. Das Fehlen solcher Angaben kann zur Begründung einer Abmahnung werden.)

Wer sich schon einmal mit dem Aufbau eines individuellen WordPress-Themes befasst hat, wird auf der Stelle ein Gefühl von Vertrautheit entwickeln. In der Tat haben WordPress und bbPress, so verschieden die Systeme auch sein mögen, etliche Gemeinsamkeiten, sowohl in den (bei WordPress gar nicht unumstrittenen) Konzepten als auch im Code des Kernsystemes. Im Gegensatz zu einem Blog hat eine Foren-Site jedoch relativ viele mögliche Ansichten für ihre Leser und Anwender, etwa das Profil eines Users mit Bearbeitungsmöglichkeit und persönlichen Favoriten, die Themen eines Forums, die Themen zu einem Schlagwort, die Liste der Schlagwörter, die Beiträge zu einem Thema, Suchergebnisse und die Darstellung einer Übersicht auf der Eingangsseite, um nur einmal die wichtigsten zu nennen. Da die Darstellung jeder dieser Ansichten angepasst werden kann, gehört zu einem Theme eine zunächst verwirrende Vielzahl von PHP-Dateien für die Darstellung. Da ich eine kurze Anleitung geben möchte (vielleicht schreibe ich später einmal eine ausführliche), gebe ich hier keine vollständige Liste der Dateien und ihrer Funktion an.

Besonders erwähnenswert ist die Datei style.css. Sie enthält die CSS-Anweisungen für die Darstellung der Foren-Site im Browser und somit den wohl wichtigsten Teil des gesamten Designs. Auch dieses Konzept ist WordPress übernommen worden.

Schauen sie sich ruhig einmal die style.css des Themes Kakumei an, um einen Eindruck zu bekommen! Sie benötigen dafür nur einen guten Editor. (Wenn sie unter Microsoft Windows arbeiten, kann es sinnvoll sein, die Datei nicht im Windows-Editor Notepad zu öffnen, da dieser Editor auch 25 Jahre nach seiner ersten Veröffentlichung noch nicht mit den Zeilenumbrüchen unixoider Systeme klarkommt und damit für viele Aufgaben schlicht unbrauchbar ist. Wenn sie zurzeit keinen anderen Editor zur Verfügung haben, können sie für einen ersten Einblick WordPad verwenden; auch Microsoft Word ist geeignet. Sie sollten sich aber zum Bearbeiten solcher Dateien einen guten Texteditor besorgen, dessen Bedienung ihnen zusagt – eine Vielzahl von Editoren mit teils riesigem Funktionsumfang steht als Freeware zur Verfügung.)

In den ersten Zeilen befindet sich als spezieller CSS-Kommentar eine Beschreibung des Themes in einem leicht verständlichen Format: sein Name, sein Autor, die Versionsnummer und weitere Angaben. Dieser Teil wird in der bbPress-Administration bei der Auswahl eines Themes angezeigt, er identifiziert das Theme aus Benutzersicht. Das in der bbPress-Administration angezeigte Bild vom Theme ist die Datei screenshot.png.

Der leichte Weg

Nachdem sie am Beispiel des Standardthemes Kakumei einen ersten, vielleicht etwas einschüchternden Eindruck von der Gestaltung eines Themes erhalten haben, schauen sie sich doch einmal das Verzeichnis kakumei-blue mit der Definition des zweiten Standardthemes von bbPress, Kakumei Blue, an!

Sie stellen fest, dass dieses Verzeichnis sehr „aufgeräumt“ aussieht. Statt einer verwirrenden Vielzahl von Dateien finden sie nur eine style.css und ein Bild screenshot.png, desweiteren noch ein Unterverzeichnis mit einem anderen bbPress-Logo.

An dieser Stelle sind sie zum ersten Male einer sehr angenehmen Eigenschaft von bbPress begegnet. Wenn in einem Theme keine spezielle Darstellung für einen bestimmten Bereich der Foren-Site spezifiziert wurde, dann wird immer die entsprechende Darstellung aus dem Standard-Theme Kakumei verwendet.

Wenn also nur die verwendeten Zeichensätze, das Farbschema, die Positionierung einzelner Elemente oder etwas Vergleichbares vom Standard-Theme Kakumei abweichen soll, die grundlegende Darstellung aber beibehalten werden soll, denn ist die Erstellung eines Themes sehr einfach und erfordert neben einer Anpassung der CSS-Definitionen keine weitere Programmierung. Allein über diesen Mechanismus sind weitgehende Anpassungen des Erscheinungsbildes möglich, zum Beispiel könnte ein Hintergrundbild für die gesamte Foren-Site oder für einzelne Elemente gesetzt werden, Elemente könnten transparent gestaltet werden… und vieles mehr.

Und diese sehr angenehme Eigenschaft von bbPress gilt auch für jedes benutzerdefinierte Theme. In vielen Fällen ist also ein Großteil der erforderlichen Arbeit schon erledigt, und sie können sich beim Design ihres Forums auf das Wesentliche konzentrieren, nämlich auf das Design.

Der Weg zum eigenen Theme

Aller Anfang ist leicht. ;-)

Im Verzeichnis ihrer bbPress-Installation sollte bereits ein Unterverzeichnis mit dem Namen my-templates existieren. Etliche ältere Versionen haben dieses Verzeichnis bei der Installation nicht automatisch angelegt, und in der Installation von bbPress 1.0 hatte es nach der Installation falsche Zugriffsrechte. (Dieser ärgerliche Fehler ist in neueren Versionen korrigiert.) Wenn das Verzeichnis noch nicht existiert, legen sie es an, und auch, wenn es schon existieren sollte, überprüfen sie bitte, ob es die richtigen Zugriffsrechte hat, damit das Benutzerkonto, mit dessen Rechten der Webserver läuft, lesend darauf zugreifen kann.

Legen sie im Verzeichnis my-templates ein Unterverzeichnis für ihr eigenes Theme an und geben sie diesem Verzeichnis einen Dateinamen (und die richtigen Zugriffsrechte), der aussagekräftig genug ist, damit sie auch einige Wochen später noch die Funktion dieses Verzeichnisses verstehen. Eine gute Faustregel ist es, dass der Dateiname einen Bezug zum Thema des Forums hat, vielleicht noch gefolgt von einer laufenden Nummer, falls sie häufiger Anpassungen an ihrem Theme vornehmen möchten, aber die alten (und im täglichen Betrieb bereits bewährten) Versionen aufbewahren möchten, um im Notfall jederzeit darauf zurückgreifen zu können.

Kopieren sie in das Verzeichnis ihres Themes die Datei style.css aus dem Kakumei-Theme und öffnen sie diese Datei in ihrem bevorzugten Editor. Geben sie im Kopfbereich einen Namen und eine Versionsnummer für ihr entstehendes Theme an.

Nun sollten sie ihr Theme in der bbPress-Administration angezeigt bekommen und auswählen können. Sie haben jetzt ein eigenes Theme, dessen Darstellung sie beliebig an ihre Ansprüche anpassen können. Das ist allerdings der schwierigere, aber eben auch der kreative Anteil.

Ändern einzelner Anzeigeelemente

In der Regel wird ein anderer, individuell angepasster Kopfbereich für die eigene Foren-Site gewünscht werden. Sie können einfach die Datei header.php aus dem Kakumei-Theme in das Verzeichnis ihres Themes kopieren und wie gewünscht anpassen, und auf die gleiche Weise können sie auch die anderen Elemente verändern.

Da das Standard-Theme Kakumei recht gut entworfen ist und sich seine optische Gestaltung leicht über CSS beeinflussen lässt, wird der Umfang solcher Änderungen eher klein sein. Vielleicht möchten sie zur Benutzerregistrierung noch einen Hinweis auf die Nutzungsbedingungen und die Datenschutzerklärung ihres Forums geben, die Darstellung eines Benutzerprofiles etwas hübscher machen, die Elemente auf der Startseite anders anordnen oder eine andere Fußzeile haben. Alle diese Eingriffe sind verhältnismäßig einfach, sie kopieren die entsprechende Datei in ihr Theme-Verzeichnis und bearbeiten sie dort. Selbst ohne eine gute Dokumentation geht das leicht von der Hand.

Für den rein persönlichen Gebrauch ist auch nicht mehr erforderlich.

Feinschliff

Wenn sie sich dazu entscheiden sollten, ihr Theme auch anderen bbPress-Anwendern zum Download zur Verfügung zu stellen, sollten sie am Ende noch etwas Feinschliff machen, damit das Theme auch in der bbPress-Administration benutzerfreundlich präsentiert wird. Geben sie in der style.css eine Download-Seite für das Theme an, damit eventuelle spätere Veröffentlichungen von den Anwendern leicht gefunden werden können, und erstellen sie eine Datei screenshot.png, damit schon vor der Auswahl des Themes ein grober optischer Eindruck seiner Gestaltung in der bbPress-Administration verfügbar ist. Für die Größe des Screenshot-Bildes in Pixeln orientieren sie sich einfach am bestehenden Screenshot des Kakumei-Themes.

Es bleibt zu hoffen, dass bald schon ein gutes, zentrales Download-Angebot für bbPress-Themes zur Verfügung steht. Bis dahin bleibt uns nichts anderes als die „gute alte“ Verlinkung, um bestehende Themes bekannt zu machen. Wenn sie einen Hinweis auf ihr erstelltes Theme und den Download hier im Forum hinterlegen, wird es vielleicht ein bisschen besser gefunden. Aber hier bitte nur auf Angebote hinweisen, die frei verfügbar sind.

Zum Favicon dieser Website

Das gegenwärtige Favicon dieser HomepageEs ist gar nicht so leicht, ein „Favicon“ (das ist dieses kleine Bild, das zu den Lesezeichen, im Tab und in der Adresszeile der moderneren Browser angezeigt wird) für dieses Projekt so zu gestalten, dass es trifft, wiedererkennbar ist und keinen falschen Eindruck erweckt.

In meinen Augen verbietet es sich, zu einer inoffiziellen deutschen Sprachdatei das offizielle Logo des bbPress-Projektes zu verwenden, da dies einen falschen Eindruck beim Betrachter erweckt, den ich nicht wünsche. Dennoch muss es ein wenig nach bbPress aussehen, um den Kontext zu verdeutlichen. Deshalb habe ich mich dazu entschlossen, die Buchstaben „bb“ in einem etwas grellen und aufälligen Türkis einzufärben, das im offiziellen Design nicht verwendet wird. Das ist also relativ einfach zu lösen.

Viel schwieriger war es jedoch für mich, den Bezug zur „deutschen Sprache“ optisch darzustellen. Mir ist leider keine bessere Idee gekommen, als den Hintergrund in den Farben der Flagge der Bundesrepublik Deutschland einzufärben, was nicht unbedingt eine gute Idee ist. Der deutsche Sprachraum geht nun einmal deutlich über die Staatsgrenzen der BR Deutschland hinaus, und tatsächlich mir ist diese Metapher auf dem Hintergrund der deutschen Geschichte des zwanzigsten Jahrhunderts etwas missraten. Es entsteht beinahe der Eindruck, als wolle hier jemand nicht wahrhaben, dass es eine Menge Deutsch spechender Menschen in Östereich, der Schweiz, Norditalien, Belgien, Dänemark und den Niederlanden gibt. Gerade im Zusammenhang mit dem sehr großen deutschen Sprachraum und dem Missbrauch dieser Erscheinung zur Kriegspropaganda ist die optische Verbindung der deutschen Sprache zu einem nationalstaatlichen Symbol unglücklich.

Ich weiß das. Deshalb schreibe ich hier auch darüber. Aber mir ist auch nach längerem Nachdenken keine gute Idee gekommen, wie sich das Produkt „deutschsprachiges bbPress-Forum“ in einer treffenden und leicht wiederzuerkennden optischen Metapher ausdrücken lässt.

Wer eine bessere Idee hat: Immer nur her damit, ich bin dafür sehr dankbar. Denn ich bin selbst unglücklich damit, die Erscheinung „deutsche Sprache“ auf diese Weise auszudrücken.

Anpassen der Fußzeile

Im deutschen Forum von bbpress.de stellte ein Anwender eine recht nahe liegende Frage: Wie kann man bei einem bbPress-Forum die Fußzeile verändern, um dort etwa einen Link auf eine Hauptseite (oder ein Impressum oder eine Datenschutzerklärung oder etwas Ähnliches) zu platzieren, wenn man ansonsten mit dem Standard-Erscheinungsbild „Kakumei Blue“ ganz zufrieden ist?

Die Vorgehensweise ist nicht ganz so einfach. Letztlich muss hierfür eine eigene Designvorlage für bbPress angelegt werden. Da aber keine große Designarbeit geleistet werden muss, ist es doch nicht so schwierig, und es sei hier (wie dort im Forum) Schritt für Schritt beschrieben:

  1. Legen Sie im bbPress-Verzeichnis ein Verzeichnis mit dem Namen my-templates an.
  2. In diesem Verzeichnis my-templates legen Sie ein Unterverzeichnis an. Geben Sie diesem Verzeichnis einen beliebigen Namen, so etwas wie meintheme ist völlig ausreichend.
  3. Damit existiert innerhalb des bbPress-Verzeichnisses jetzt ein Verzeichnis my-templates/meintheme.
  4. Kopieren Sie in dieses Verzeichnis die Datei footer.php aus dem Verzeichnis bb-templates/kakumei.
  5. Wenn Sie die Designvorlage „Kakumei Blue“ nutzen, kopieren Sie die Datei style.css aus dem Verzeichnis bb-templates/kakumei-blue in ihr neu angelegtes Verzeichnis, ansonsten kopieren Sie die Datei style.css aus dem Verzeichnis bb-templates/kakumei in ihr neu angelegtes Verzeichnis.
  6. In Ihrem Verzeichnis bb-templates/meintheme sollten jetzt zwei Dateien liegen, nämlich style.css und footer.php.
  7. Editieren Sie aus diesem Verzeichnis die Datei style.css mit ihrem Lieblingseditor. Im oberen Bereich dieser Datei befindet sich eine Zeile, die mit dem Text „Theme Name:“ beginnt, darauf folgt der Name der Designvorlage. Ändern Sie diesen Namen, etwa indem Sie ihm das Wort „Angepasst“ anhängen. Dieser Schritt ist erforderlich, um ihre Arbeit im nächsten Schritt zu identifizieren.
  8. Sie haben jetzt eine eigene Designvorlage für ihr bbPress-Forum angelegt. Gehen Sie in die bbPress-Verwaltung unter „Erscheinungsbild“ und wählen Sie es dort unter den angebotenen Designvorlagen aus. Es wird ohne Vorschaubild und mit dem von ihnen vergebenen Namen angezeigt.
  9. Nachdem Sie dies getan haben, sollte ihr bbPress-Forum das neue Erscheinungsbild benutzen. Dieses ist im Moment noch die unveränderte Vorgabe. Schauen Sie sich ihr Forum an, ob es fehlerfrei dargestellt wird.
  10. Wenn dies der Fall ist, können Sie die Datei footer.php in ihrer neu angelegten Designvorlage beliebig anpassen. Eventuell möchten Sie auch Anpassungen an der graphischen Aufbereitung vornehmen, indem Sie die style.css bearbeiten.

Ich hoffe, dass diese Schnellanleitung hilfreich war. Übrigens können in der gleichen Weise auch andere Anzeigeelemente des Forum angepasst werden. Kenntnisse in HTML und CSS sollten allerdings vorhanden sein, und den Umgang mit einer FTP-Software kann ich hier auch nicht auf die Schnelle erklären.