Eigenes WordPress Theme mit Bootstrap Tutorial – Einführung

Wordpress Theme mit Bootstrap Tutorial Teil 1

Jeder ambitionierte WordPress-Benutzer kennt diesen Moment: Man hat sich ein sehr gutes Theme gekauft, einiges lässt sich anpassen, aber der Feinschliff lässt sich dann oft doch erst mit Hilfe von eigenem Code realisieren. Für eine wirklich individuelle und professionelle Lösung sollte man sein eigenes Theme entwickeln.
In dieser Tutorial-Reihe möchte lernt ihr, das CSS-Framework Bootstrap mit WordPress zu einem erfolgreichen Web-Projekt zu verbinden. Schritt für Schritt und Zeile für Zeile erkläre ich, wie ich mit diesen zwei Bausteinen meinen Blog erstellt habe. Am Ende eines jeden Eintrags gibt es das Ganze nochmal als Video!

Was ist eigentlich Bootstrap und warum sollte ich es benutzen?

Bootstrap ist ein sogenanntes CSS-Framework, also das Gerüst für die Gestaltung einer Webseite. Entwickelt wurde es von Twitter-Mitarbeitern, die die Aufgabe hatten, den Entwicklungsprozess von Programmen in ihrem Konzern zu vereinfachen und zu verbessern. Und da Twitter ein Online-Dienst ist, lag es sehr nahe, die Entwicklung von Web-Inhalten zu optimieren. Schnell fiel auf, dass man dieses Framework nicht nur bei Twitter, sondern auch überall sonstwo benutzen kann. Ab diesem Zeitpunkt entstand die Erfolgsgeschichte von Bootstrap. Um sich der Vielfalt und Leistungsfähigkeit bewusst zu werden, kannst du bei der Bootstrap Expo vorbeischauen, wo die (mit) besten „Bootstrap based websites“ vorgestellt werden :). Oben im Bild siehst du ein Beispiel.
Der wichtigste Teil von Bootstrap ist das sog. Grid-System, dass eine Webseite in 12 Spalten einteilt. So kann man schnell ästhetische und responsive Designs erstellen. Wenn man beispielsweise 4 Spalten (4×3) auf einem Computer nebeneinander sieht, rutschen sie auf einem Smartphone sofort untereinander. Durch dieses Grid-System, Javascript-Komponenten, und vordefinierte CSS-Elemente ist Bootstrap der „Baukasten“, um ein individuelles WordPress-Theme zu entwickeln. Es nimmt dir bei der Entwicklung einfach eine Menge Arbeit ab und deswegen ist es wirklich sinnvoll, einmalig Zeit zu investieren, um dich mit diesem genialen Framework vertraut zu machen!

WordPress und Bootstrap – Wie geht das zusammen?

Durch die Einbindung von Bootstrap in WordPress lässt sich in Minutenschnelle eine Grund-Layout entwickeln. Du möchtest zum Beispiel bei deinem Blog 3/4 für die Posts und 1/4 für die Sidebar haben? Das lässt sich mit dem Grid-System kinderleicht umsetzen. In diesem Tutorial lernst du aber nicht nur die Gestaltung mit Bootstrap kennen, sondern auch die Einbindung von Beiträgen und Seiten aus WordPress in dein Design. So kannst du am Ende des Prozesses wieder ganz bequem deine Artikel über die WordPress-Oberfläche schreiben – den Rest übernimmt dein eigenes Theme!


Kommentar absenden

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