Bootstrap mit WordPress verbinden (underscores.me)

folder_openBlog, Webentwicklung
comment6 Kommentare
Wordpress mit Bootstrap verbinden - Titelbild

In dieser Anleitung erfahren Sie, wie man schnell und einfach Bootstrap in WordPress einbinden und so responsive Templates erstellen kann.

Responsive Design (RWD) ist für Entwickler von Websites nicht mehr wegzudenken. Alle namhaften Hersteller für Tablets, Smartphones, SmartWatches oder auch zum Teil Waerables oder die überbreiten Curved Monitore und Flat-TV’s setzten auf digitale Inhalte und daher auf optimierte Designs und Layouts für den mobilen Betrieb. 

Der Trend von Websites á la “1024×768 Pixel” ist schon längst überholt und wird nur noch müde belächelt. Doch wie geht man nun damit um? Was braucht man für den eigenen Webauftritt mit responsiven Webdesign? Das schauen wir uns jetzt genauer an.

Anzeige

[ultimate_heading main_heading=”Bootstrap Responsive Designs” alignment=”left”][/ultimate_heading]

Wer nicht auf eines der tausenden fertigen Thema zurückgreifen möchte, die WordPress in der Design Galerie bereitstellt und stattdessen sich selbst die Mühe machen möchte, ein WordPress Bootstrap Theme zu erstellen, kann sich dabei auf umfangreiche Unterstützung in Sachen Responsive Design verlassen.

Es gibt vielerlei nötzliche Boilerplates und fertige CSS/JS Frameworks, seine Responsive Themes umzusetzen. Eines hat sich in der Vergangenheit bei mir schon oft bewährt und kommt mit vielen nützlichen Feateres daher. Der Name: Underscore.me – Doch dazu gleich mehr

[ultimate_heading main_heading=”Warum ein Resposive Design für meine WordPress Webseite ?” alignment=”left”][/ultimate_heading]

Responsive Websites zeichnen sich dadurch aus, dass sie ihre Darstellung an den verfügbaren Monitor- oder Browserbereich anpassen kann. Somit wird das Layout auf einem 27 Zoll Monitor genauso gut aussehen wie auf einem 17 Zoll oder auch einem Tablett und Smartphone-Handy. Elemente wie Tabellen, Absätze, Bilder und Texte passen sich automatisch an.

Zudem kommt dazu, dass Sie nicht für jedes Endgerät ein eigenes Template kaufen oder erstellen lassen bzw. selbst entwickeln müssen. Das spart nicht nur Zeit und Nerven, sondern auch bares Geld!

[ultimate_spacer height=”50″ height_on_tabs=”30″ height_on_tabs_portrait=”30″ height_on_mob_landscape=”20″ height_on_mob=”20″][us_testimonial style=”2″ author=”Mathias Elle” company=”Hinweis für Ihr SEO!” img=”5330″]GUT ZU WISSEN: Google prüft seit dem 21. April 2015 Websites nach mobilen Versionen und rankt Websites mit Responsive Design in den Google Suchergebnissen weiter oben als Websites ohne mobile Optimierung. Hier geht es zu dem Beitrag dazu.[/us_testimonial]
[ultimate_heading main_heading=”1. WordPress Theme mit Bootstrap 3.x. erstellen – los gehts!” alignment=”left”][/ultimate_heading]

Screenshot der Website von Underscores.me

Website von Underscores.me | Quelle derMatz.de

Bootstrap hört sich nicht nur an wie ein solides  für alle bekannten Browser- und Mediaqueries, sondern wird im Laufe der Zeit zu einem echten Freund in Sachen Gestaltung und Umsetzung der Website für möglichst viele Darstellungsweisen und Endgeräte.

[ultimate_heading main_heading=”1.2. Theme Grundgerüst erstellen” alignment=”left”][/ultimate_heading]

Um möglichst einfach und effektiv mit der Umsetzung der Website zu beginnen, kann man im Internet auf viele Tools für Bootstrap zurückgreifen. Die einfachste die ich finden konnte, nennt sich underscores.me. Underscores.me ist ein dynamisches Themepaket, mit dem das WordPress Theme-Grundgerüst mit allen aktuellen Bootstrap-Technologien frisch ausgerüstet zum Download zur Verfügung gestellt wird.

Ein klick – los geht’s!
Kurz auf der Startseite den Theme Name deines Templates eingeben, den Button “Generate” klicken und schon gehts los! – Dein Leeres Theme-Grundgerüst ist erstellt und bereit zur Anpassung. Nun erhält man die ZIP Datei mit seinem neuen Theme (im Beispiel: My-Theme-Name.ZIP) als automatischen Download. Entpacke dies und lade das Theme via FTP oder im lokaler Umgebung in das WordPress Theme-Verzeichnis im Ordner root/wp-content/themes
.

[ultimate_heading main_heading=”2. Das neue WordPress Theme mit Bootstrap ausstatten” alignment=”left”][/ultimate_heading]
[ultimate_heading main_heading=”Weitere interessante Blogartikel” alignment=”left”][/ultimate_heading][ultimate_spacer height=”25″ height_on_tabs=”15″ height_on_tabs_portrait=”15″ height_on_mob_landscape=”10″ height_on_mob=”10″]
Tags: , , ,

Related Posts

Kommentar verfassen

Menü