Bootstrap mit WordPress verbinden (underscores.me)

26. August 2014

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]

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]

Um alle Funktionen der Bootstrap-Framework für das neue Theme nutzen zu können, muss es noch gedownloadet und anschließend nach den WordPress-Anforderung in der funktion.php des Themes verknüpft werden. Gehen Sie dazu nun auf die Website von Bootstrap unter getbootstrap.com und wechseln auf die Seite Getting-started. Downloade Dir dort die Bootstrap-Source Codes und entpacke anschließend die ZIP Datei auf deinem Rechner.

Verzeichnisstruktur von Bootstrap

Bootstrap Framework integrieren

Nach dem Entpacken den Ordner “dist” zu “bootstrap” umbenennen und in Deinen Theme-Ordner in WordPress (root/wp-content/themes/DeinTemplate/bootstrap) kopieren. Prima! – Als nächstes muss nur noch WordPress mit dem Bootstrap Framework verknüpft werden

Bootstrap in WordPress einbinden

Öffne dazu die /themes/DeinTheme/function.php in einem Editor deiner Wahl. Scroll nach unten bis Zeile 74 zum Abschnitt “Register widget area.“. Ab hier können und müssen wir Bootstrap bei WordPress “anmelden”. Dies geht recht simpel.

Wir suchen uns dazu folgende Zeile:

function my_theme_name_scripts() {

und fügen danach folgende Zeilen ein:

wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ), '3.0.1', true );
wp_register_style( 'bootstrap-css', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css', array(), '3.0.1', 'all' );
wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_style( 'bootstrap-css' );

Das ganze teilt in der 1. Zeil WordPress mit, dass es ein weiteres Script mit dem Namen “bootstrap.min.js” gibt und wo WordPress es finden kann. Ebenso arbeitet es die CSS Styles durch, die Bootstrap von Haus aus mitbringt.

Abschließend vor dem Speichern der functions.php fügen wir in der Gegend um Zeile 100 bei add_action(... noch folgende Zeile ein:
remove_filter ('the_content', 'wpautop'); danach speichern.

Die Einrichtung und Installation von Bootstrap und WordPress ist damit abgeschlossen. Theoretisch und praktisch kann man nun mit dem eigentlichen Templating beginnen.

[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″]