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


Download Adament

Bootstrap-Theme Flat


Download Flat

Bootstrap-Theme Fullby

Download Fullby

Bootstrap-Theme Inkness

Download Inkness

Bootstrap-Theme Revera

Download Revera

Bootstrap-Theme Romangie

Download Romangie

Bootstrap-Theme Ward

Download Ward

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

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


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

Wolf-Dieter Fiege

Wolf-Dieter Fiege ist Senior Specialist für Content Marketing & SEO und Chefredakteur des Blogs der Host Europe GmbH, einem der größten Anbieter von Domain- und Webhosting sowie Serverprodukten in Europa.

9 thoughts on “Responsive Bootstrap-Themes für WordPress

  1. Sehr schöner Artikel, Herr Fiege. Danach habe ich vergangene Woche lange gesucht und ich konnte nichts in vergleichbarer Übersicht finden.

  2. Hallo Herr Fiege,
    danke für diesen nützlichen Artikel mit einem sehr informativen Überblick des Themas. Heißt das konkret, dass ich Bootstrapp Themes wie einen Countdown (https://creativemarket.com/csainath/45684-Saturn-Coming-Soon-Responsive) einfach mittels Plugins wie Cherry Framework direkt in eine Word Press Installation einbauen kann? Oder ist das ein eigenständiges CMS wie Word Press? Sorry, wegen der Anfängerfrage und Danke für die Aufklärung.

    Beste Grüße
    Andreas Einbock

    • Hallo Herr Einbock,
      wenn ich Sie richtig verstehen, möchten Sie gerne das erwähnte Bootstramp-Theme nutzen. Dazu müssen Sie als erstes das Theme downloaden. Wechseln Sie dann zum Dashboard Ihrer WordPress-Installation. Wählen Sie unter „Design“/“Themes“ die Funktion „Theme installieren“. Klicken Sie auf „Theme hochladen“. Wählen Sie das neue Theme aus, laden Sie es hoch und aktivieren Sie es.

      • Hallo HErr Fiege,

        ich habe das Problem inzwischen anders gelöst. In Word Press kann ich diese html-, js- und css-Dateien nicht einbauen. Ich habe es per ftp-Upload und Anpassungen direkt in diesen einzelnen Dateien gelöst. Erste Ergebnisse siehen Sie hier http://www.biancheria.boutique. Ganz fertig ist es aber noch nicht.

        Beste Grüße
        Andreas Einbock

        • Hallo Herr Einbock, ja, sehr gut. Hatte auf die Schnelle gar nicht gesehen, dass es bei diesem Theme noch html-, js- und css-Dateien gibt, die gesondert hochgeladen werden müssen. Aber über einen FTP-Account geht das natürlich sehr gut. VG Wolf-Dieter Fiege

  3. Dies ist eine vielfältige und einzigartige Themensammlung mit den hochwertigen und verschiedene Stile sowie Themen Funktionen. Ich möchte noch eine erstaunliche Thema in dieser Liste sugget . Biznetic – Eine Seite Business- WordPress – Theme – Biznetic ist eine One Page Premium- Responsive WordPress -Theme mit erstaunlichen Eigenschaften wie Optionen von Homepage-Einstellungen , Übersetzung Ready, Blog-Einstellungen und vieles mehr. https://goo.gl/Nn1KjJ

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.