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.

[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├╝