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
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
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
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 Flat
Bootstrap-Theme Fullby
Bootstrap-Theme Inkness
Bootstrap-Theme Revera
Bootstrap-Theme Romangie
Bootstrap-Theme Ward
Bootstrap-Theme WP Knowledge Base
WordPress.org stellt außerdem gratis das puristische Theme Bootstrap Ultimate bereit:
Bootstrap-Theme 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
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
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
- Wie finde ich das richtige E-Rechnungs-Tool? - 11. Februar 2025
- Website erstellen? Wie geht das und was braucht man dafür? - 30. Mai 2024
- Microsoft Word kostenlos nutzen – die Online-Version mit allen Basisfunktionen - 30. Mai 2024
