Erstellen eines Child-Theme für BuddyPress
Wer BuddyPress nutzt und mit dem Social-Network-System ein Netzwerk aufgebaut hat oder eines aufbaut, weiß, dass es nicht wirklich viele Themes für BuddyPress gibt. In der nächsten Version der Software (1.2) wird sich das nicht grundlegend ändern, dennoch, hier ist ein weiteres Theme hinzu gekommen. Neben dem inzwischen technisch leicht „veralteten“ BuddyPress-Theme in Orange und Grau, gibt es nun ein neues „BuddyPress Default“, das recht aufgeräumt und minimalistisch daherkommt, technisch aber einiges mehr unter der Haube hat, als das alte.
Wer also als Entwickler BuddyPress-mäßig mit der Zeit gehen will, sollte zum erstellen eines eigenen Designs jetzt schon auf die Entwicklerversion von BuddyPress 1.2 zurückgreifen (mehr dazu hier) und sein Theme an den Templates des aktuellen „BuddyPress Default 1.2-rare“ anlehnen.
Um dafür nicht das gesamte Theme zu verändern oder alle alten Dateien in ein neues Theme zu kopieren, bietet es sich an, ein Child-Theme zu erstellen und BuddyPress Default als Parent-Theme zu nutzen. Wie das funktioniert, soll dieses kleine Tutorial zeigen.
Das Tutorial kann natürlich auch auf andere Themes übertragen werden.
Voraussetzungen:
- Installiertes WordPress MU
- Aktiviertes und konfiguriertes BuddyPress 1.2-rare
- BuddyPress-Themes von wp-content/plugins/buddypress/bp-themes nach /wp-content/themes verschoben
Herunterladen:
Falls die oben genannten Voraussetzungen noch nicht gegeben sind, muss die Software noch installiert werden. WordPress-Mu gibt es bei mu.wordpress.org, die aktuelle Entwicklerversion von BuddyPress gibt es im Trunk. Unten auf der Seite gibt es den Link zum aktuellen Zip-Archiv des Plugins.
Erstellen des Child-Themes:
Zuerst erstellen wir den Ordner des neuen Themes. Er sollte sinnvoll gewählt dem Namen des Themes entsprechen. In meinem Fall „child-tut“. In diesem Ordner erstellen wir eine style.css und öffnen sie in einem Editor. Ganz zu Anfang fügen wir nun folgende Zeilen ein (Großschrift ist natürlich individuell zu ersetzen):
/*
Theme Name: NAME DES THEMES
Template: bp-default
Description: Theme basierend auf BP Default 1.2-rare.
Version: 1.2-rare
Author: IHR NAME
Author URI: IHRE SEITE
*/
Mit diesen Angaben weiß WordPress, um was es sich handelt. Theme Name teilt den Namen des Themes mit, Template enthält den Namen des Parent-Theme (in unserem Fall bp-default), sodass WordPress weiß, welche Dateien als Templates zu nutzen sind. Description enthält eine kleine Beschreibung des Theme, Version die Versionsnummer. Unter Author sollte Ihr Name stehen, unter Author URI die Adresse Ihrer Internetseite.
Nun müssen noch die CSS-Dateien des Parent-Themes eingegliedert werden. Dafür fügen wir folgendes in die Datei ein:
/***
* The default theme styles.
*/
@import url( ../bp-default/_inc/css/default.css );
/***
* The admin bar styles.
*/
@import url( ../bp-default/_inc/css/adminbar.css );
Die Datei wird nun abgespeichert und sollte so aussehen:
/*
Theme Name: NAME DES THEMES
Template: bp-default
Description: Theme basierend auf BP Default 1.2-rare.
Version: 1.2-rare
Author: IHR NAME
Author URI: IHRE SEITE
*/
/***
* The default theme styles.
*/
@import url( ../bp-default/_inc/css/default.css );
/***
* The admin bar styles.
*/
@import url( ../bp-default/_inc/css/adminbar.css );
Prinzipiell ist das Child-Theme nun schon fertig. Sie können es hochladen und wie andere Themes aktivieren (erst im Theme-Admin, dann unter Design), es sollte exakt aussehen, wie das BuddyPress Default Theme.
Möchten Sie das Theme nun anpassen, kopieren Sie einfach die zu ändernde Datei in den entsprechenden Ordner Ihres Child-Themes und bearbeiten sie dort. Wenn sie beispielsweise den Kopfbereich der Seite verändern wollen, kopieren Sie die header.php von BuddyPress Default in den Ordner Ihres Child-Themes. Nach den Anpassungen wird automatisch die header.php aus dem Ordner Ihres Child-Theme genutzt.
Wieso das Ganze?
Dafür gibt es verschiedene Gründe. Einer davon ist die Übersichtlichkeit. Alle Dateien sind im Parent-Theme vorhanden, nur die veränderten im Child-Theme. Weiterhin hat man immer die Möglichkeit, Fehler im Child-Theme anhand der Änderungen gegenüber dem Parent-Theme zu suchen.
Ein wichtiger Punkt aber ist die Aufwärtskompatibilität. Eventuell werden zur nächsten Version von BuddyPress Änderungen am Default-Theme vorgenommen, beim Update wird das Theme also überschrieben. Wer direkt im Default-Theme geändert hat, muss jetzt alle Änderungen wieder neu hinein kopieren (und vorher wissen, was wo verändert wurde). Nutzt man ein Child-Theme, sind nur die geänderten Dateien des Child-Theme an das Parent-Theme anzupassen (sofern von den Neuerungen betroffen), das Anpassen ist weitaus unkomplizierter.
wemaflo.net in Kommentaren