WordPress Template mit Bootstrap, Sass und Compass erstellen

WordPress

Dass ich bereits seit einigen Jahren ein Fan von WordPress bin, ist kein Geheimnis. WordPress ist durch seine Benutzerfreundlichkeit, Erweiterbarkeit und guter Wartung eine tolle Wahl für kleinere Websites, bei denen Internationalisierung, Rollenkonzepte und Extensions auf Basis des Model View Controller Patterns (MVC) keine Rolle spielen.

Bootstrap

Bei der Wahl der Technologien fürs Frontend waren mehrere Aspekte zu bereücksichtigen. Dadurch, dass WordPress gesetzt war, mussten sich die in Frage kommenden Technologien problemlos zur Erstellung eines WordPress Themes verwenden lassen. Zum anderen sollte das Frontend full responsive sein, also eine optimierte Darstellung für diverse Displaygrößen bieten. CSS bietet diese Möglichkeit, jedoch nachte eine Implementierung von der Pieke auf wenig Sinn, da es bereits eine große Anzahl Frameworks gibt, die diese Aufgabe vereinfachen, indem sie bereits viele vorgefertigte Bausteine bieten (z.B. Selektoren für gängige Geräteklassen). Meine Wahl fiel schließlich auf Bootstrap, da dieses in der letzten Zeit eine große Verbreitung gefunden hat und in der Mittlerweile dritten Hauptiteration als sehr ausgereift bezeichnet werden kann.

Bootstrap bietet ein Gridsystem (Raster), mit welchem das Verhalten des Layouts auf unterschiedlichen Displaygrößen einfach gesteuert werden kann. Zudem bietet es vorgefertigte Gestaltungen von Standard-Komponenten, welche allerdings einfach angepasst und sogar durch komplette Themes geändert werden können.

Sass & Compass

Soll die vorgefertigte Gestaltung angepasst werden, schlägt die Stunde von CSS. Bootstrap unterstützt diverse CSS Prä-Prozessoren, u.a. Less und Sass. Ich habe mich für die Verwendung von Sass (Syntactically Awesome Style Sheets) entschieden, da mir die Syntax symphatischer erschien, dies war jedoch eine reine Geschmacksfrage.

Sass ermöglicht eine einfachere Erstellung von CSS, indem es u.a. folgende Features bietet:

• Verwendung von Variablen (z.B. für Farben, Größen etc.)
• Verschachteln von Selektoren (erspart lange Selektoren wie z.B. #content p span.myClass a.externalLink)
• Mixins (quasi die Erstellung und den Aufruf von Funktionen)

Mit Sass können Stylesheets somit in einer vereinfachten und effizienteren Metasprache verfasst werden. Um daraus wieder normales CSS zu erzeugen, müssen die Sass-Dateien umgewandelt werden. Compass ist ein Compiler für Sass, der u.a. die Syntax checkt, Dateien zusammenfasst und diverse Optimierungen der Ladezeit vornehmen kann, indem er unnötige Leerzeilen und -zeichen sowie Kommentare auf Wunsch entfernt.

WordPress mit Bootstrap und Sass „verheiraten”

Nachdem die Technologien ausgewählt sind, gilt es diese zu „verheiraten“, also miteinander zu kombinieren. Die grundsätzliche Herangehensweise ist die Folgende:

1. neues, blankes WordPress Template erstellen
2. Template-Markup anpassen und Bootstrap-Klassen ergänzen
3. Bootstrap Default-Theme mit Sass anpassen

Man kann sich das Leben etwas erleichern und die ersten beiden Schritte zusammenfassen, indem man ein vorgefertigtes Bootstrap-Template für WordPress verwendet, etwa das Twitter Bootstrap 3 Blank Theme.

Möchte man lieber mit einem eigenen WordPress Template ohne jegliche Vorformatierung starten, empfiehlt sich bspw. das Blank Slate Theme. In diesem ergänzt man die Bootstrap-Klassen, um bspw. ein Grid-System einzuführen und den Content links bzw. die Sidebar rechts zu positionieren.

Im nächsten Schritt initalisiert man Sass im Rootverzeichnis unseres Themes (hierzu muss Sass/Compass bereits installiert sein, eine kurze Anleitung findet sich hier):

cd /pfad/zum/wordpress/verzeichnis
compass create wp-content/themes/mein_theme

Anschließend lassen wir Compass das Themeverzeichnis beobachten und bei Bedarf (sprich: bei Änderungen an den .sass Dateien) das Stylesheet neu kompilieren:

compass watch wp-content/themes/mein_theme

Änderungen an den .sass Dateien quittiert compass stehts über eine Ausgabe auf der Kommandozeile und gibt Auskunft darüber, ob die resultierende(n) .css Dateie(n) erfolgreich erstellt werden können oder gibt Tipps zur Fehlerbehebung.

Nun bindet man Bootstrap über Sass ein: In der Standardeinstellung schreibt Sass ein Stylesheet namens screen.css. Dieses Referenziert man als Stylesheet in der header.php Datei des Themes. Alternativ könnte man auch Sass beibringen, den WordPress Standard style.php im Rootverzeichnis des Themes zu verwenden. Dazu erstellt man eine screen.sass Datei im sass Verzeichnis des Themes und ändert den Zielpfad (wie dies geht, ist hier beschrieben).

Nun installiert man Bootstrap nach mein_theme/bootstrap und bindet es entgegen der verlinkten Anleitung in der Datei sass/web.sass ein:

@import url("../bootstrap/css/bootstrap.min.css");

Zusätzlich bindet man noch das Bootstrap-Javascript in der footer.php Datei des Themes ein:

<script type="text/javascript" src="/wp-content/themes/mein_theme/bootstrap/js/bootstrap.min.js"></script>

Jetzt kann man im WordPress Backend das selbst erstellte Theme auswählen. Im Ergebnis sollte das Frontend der Website nun Bootstrap einbinden und dank der Verwendung von Bootstrap-Klassen bereits sinnvoll formatiert sein.

Anpassungen der Optik

Möchte man von der Optik des Standard-Bootstrap-Themes abweichen, kann man dessen Gestaltung nun in den Sass-Dateien überschreiben oder gleich ein alternatives Bootstrap-Theme installieren.

Anpassung des Menüs

Neuere WordPress Versionen bringen den Menü-Editor mit, welcher es ermöglicht, im Backend bequem Menüs zu pflegen. Leider ist das Markup, welches WordPress bei der Verwendung des Menü-Tags generiert, nicht Bootstrap kompatibel. Damit man dennoch die von Bootstrap vorgesehene Markup-Struktur und Klassen verwendet, gibt es mit wp-bootstrap-navwalker ein tolles, einfach zu verwendendes WordPress Plugin.

Fazit

WordPress mit Bootstrap und Sass/Compass zu verwenden ist leicht, wenn man weiß wie. Zudem ist es sehr bequem, da einem vorgefertigte Komponenten eine Menge Arbeit abnehmen. Das Resultat ist einfach zu warten und anzupassen. Ich hoffe, dass Ihnen dieses Tutorial den Einstieg in die Verwendung von Bootstrap und Sass/Compass etwas erleichert hat.