Wer Webseiten im Responsive Design erstellen will, kommt an Bootstrap kaum vorbei. Das gilt natürlich auch für WordPress-Anwendungen. Im meinem folgenden Artikel möchte ich daher einige Wege vorstellen, wie man die Möglichkeiten von zwei der erfolgreichsten Open Source-Projekte: dem Publishing System WordPress und dem das Framework Bootstrap miteinander verbinden kann.

Was macht Bootstrap-Themes so interessant für WordPress?

Durch den Siegeszug mobiler Endgeräte wurde das CSS Framework Bootstrap praktisch zum Maßstab für das Responsive Webdesign. Aufgrund eines zwölfspaltigen Grid-Layouts lassen sich Webseiten hervorragend an unterschiedlichste Auflösungen anpassen, wie zum Beispiel an Smartphone-Displays, Tablets, Notebooks und Widescreen-Monitore. Zudem ist Bootstrap modular aufgebaut. Es gibt einen relativ schlanken Kern, zu dem man – je nach Bedarf – weitere Komponenten hinzufügen kann.
Für WordPress-Anwender ist Bootstrap aus mindestens zwei Gründen interessant. Zum einen, da eine ganze Reihe von klassischen WordPress-Templates, die zwar als responsiv deklariert sind, auf mobilen Endgeräten leider immer noch ein grafisches Chaos anrichten. Zum anderen, da man bestimmte Bootstrap-Funktionen wie zum Beispiel attraktive Preistabellen oder Mediengallerien schnell und einfach in seine WordPress-Webseite integrieren kann.

Responsive WordPress-Themes mit Bootstrap selbst erstellen

Beginnen wir mit dem professionellsten Weg: man erstellt seine Responsive WordPress-Themes mit Bootstrap einfach selbst. Dieses Vorgehen ist jedoch für Anfänger nicht unbedingt zu empfehlen, da nahezu alle relevanten PHP- und CSS-Dateien manuell angepasst werden müssen. Außerdem ist der Austausch zahlreicher weiterer Elemente wie zum Beispiel der Navigationsbar, der Sidebar und vieles mehr erforderlich. Da hierbei, wie bei jeder anderen Anpassung, Einiges schief gehen kann, empfiehlt es sich, diese Änderungen nicht live, sondern in einer Testumgebung vorzunehmen. Neben WordPress und Bootstrap sollte man daher sicherheitshalber auch das Plugin Theme Test Drive installieren.

Eine hervorragende Anleitung für die Entwicklung von Responsive WordPress-Themes mit Bootstrap bietet das Tutorial von Zac Gordon: How to Build a Responsive WordPress Theme with Bootstrap

How to build a Responsive WordPress-Theme with Bootstrap

How to build a Responsive WordPress-Theme with Bootstrap

Ein zweiteiliges Tutorial auf Deutsch gibt es von elma studio: Ein WordPress-Theme mit Bootstrap entwickeln für Einsteiger Teil 1 sowie Ein WordPress-Theme mit Bootstrap entwickeln für Einsteiger Teil 2

Ein WordPress-Theme mit Bootstrap entwickeln

Ein WordPress-Theme mit Bootstrap entwickeln

Blank Bootstrap-Themes für WordPress

Einfacher ist es natürlich, wenn man bereits auf ein fertiges Bootstrap-Theme zurückgreifen kann. Im Web findet man dazu eine Reihe von Blank Bootstrap-Themes, die man kostenlos downloaden kann. Beispielsweise das Theme von WP-Bootstrap oder das BIC Bootstrap von besserdich

BT-besserdich

Mit den Blank Bootstram-Themes erspart man sich einerseits einen Großteil der PHP- und CSS-Anpassungen. Andererseits sind diese Themes aber in erster Linie etwas für die Freunde ausgesprochen puristischer Webseiten t. Und natürlich für Web-Developer, die auf dieser Grundlage mittels Style-Anpassung individuelle Themes gestalten wollen.

Kostenlose Bootstrap-Themes für WordPress

Einsteiger und alle, die eine sehr komfortable Möglichkeit zur Einbindung von Bootstrap suchen, können aber auch direkt vorgefertigte Responsive Bootstrap-Themes für WordPress installieren. Das Angebot wird immer vielfältiger, mittlerweile gibt es Bootstrap-Themes praktisch für jede Anwendung: vom puristischen Informations-Design, über imagebasierte Styles bis zum Flat-Design. Eine Zusammenstellung interessente Bootstrap-Themes zum kostenlosen Download findet man zum Beispiel auf wptavern.
Hier einige Beispiele:

Bootstrap-Theme Adament

Bootstrap-Theme Adament

Bootstrap-Theme Flat

Bootstrap-Theme Flat

Bootstrap-Theme Fullby

Bootstrap-Theme Fullby

Download Fullby

Bootstrap-Theme Inkness

Bootstrap-Theme Inkness

Download Inkness

Bootstrap-Theme Revera

Bootstrap-Theme Revera

 

Bootstrap-Theme Romangie

Bootstrap-Theme Romangie

Download Romangie

Bootstrap-Theme Ward

Bootstrap-Theme Ward

Download Ward

Bootstrap-Theme WP Knowledge Base

Bootstrap-Theme WP Knowledge Base

Download WP Knowledge Base

WordPress.org stellt außerdem gratis das puristische Theme Bootstrap Ultimate bereit:

Bootstrap-Theme Bootstrap Ultimate

Bootstrap-Theme Bootstrap Ultimate

Download Bootstrap Ultimate

Wer bereit ist, für seine Templates ein paar Euros bzw. Dollars zu bezahlen, findet bei wrapbootstrap.com https://wrapbootstrap.com/themes/wordpress günstige Bootstrap Themes ab 14$. Etwas teurere Themes gibt es auf colorlib.com http://colorlib.com/wp/best-bootstrap-wordpress-themes/. Wie zum Beispiel das WordPress Shop-Theme HumbleShop

Bootstrap-Theme Humble Shop

Bootstrap-Theme Humble Shop

Download HumbleShop

Bootstrap-Funktionen über Plugins in WordPress integrieren

Nicht jeder WordPress-Anwender ist bereit, sein aktuelles Theme gegen ein neues Bootstrap-Theme zu tauschen. Vor allem dann, wenn man viel Zeit und Geld in die Entwicklung eines eigenen Erscheinungsbildes gesteckt hat. Denn letztlich ist das Seitendesign ein Markenzeichen und eine wesentliche Komponente des CI (Corporate Identity) im Netz. Veränderungen sollte deshalb mit der gleichen Sensibilität behandelt werden, wie CI-Änderungen bei Print-Medien. Dennoch gibt es Möglichkeiten, über Plugins eine ganze Reihe praktischer Bootstrap-Elemente in ein WordPress-Theme zu integrieren, wie z.B. mit dem Cherry Framework

CherryFramework

CherryFramework

Eine Übersicht, mit welchen Bootstrap-Plugins man WordPress außerdem erweitern kann, findet man im WordPress Plugin Archive

Fazit

Wie man sieht, ist es ausgesprochen einfach, die Möglichkeiten von Bootstrap für Responsive Design auch mit WordPress zu nutzen: durch die individuelle Anpassung einer bereits bestehenden WordPress-Installation, durch die Style-Anpassung von Blank-Bootstrap-Themes oder durch die Installation von Bootstrap-Plugins bzw. vordefinierter Bootstrap-Themes für WordPress. Probieren Sie es doch einfach mal aus, zum Beispiel auf einem WebHosting- oder WebServer-Produkt.

Welche Erfahrungen haben Sie mit Bootstrap gemacht? Nutzen Sie die Möglichkeiten dieses Frameworks bereits für Ihre WordPress-Webseite?

Bildnachweis: Fotolia, Lizenz: Host Europe

Wolf-Dieter Fiege

Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten