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. 

Anzeige

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.

Bootstrap Responsive Designs

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

Warum ein Resposive Design für meine WordPress Webseite ?

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!

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

1. WordPress Theme mit Bootstrap 3.x. erstellen - los gehts!

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.

1.2. Theme Grundgerüst erstellen

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
.

2. Das neue WordPress Theme mit Bootstrap ausstatten

Weitere interessante Blogartikel

6 Kommentare. Hinterlasse eine Antwort

  • Hallo, entschuldugung fur meine deutsche schrift…

    es functioniert in meine hauptthema aber wie mache ich dies in ein child thema, wann mein hauptthema ein update bekommt ist alles weg

    Vielen dank

    Antworten
  • Hallo,
    wo genau kommt das “remove_filter (‘the_content’, ‘wpautop’);” denn hin, bzw. wie sieht der Code genau aus.
    Meine Zeile in functions.php sieht so aus:
    add_action( ‘wp_enqueue_scripts’, ‘mytheme_scripts’ );

    Soll ich das in die Klammern einfach reinschreiben? Da hatte icheinf Fehlermeldung.

    Vielen Dank schon einmal im Voraus!
    Jürgen

    Antworten
  • Hallo. Nach dieser Anleitung funktioniert das nicht. Ich habe es genauso gemacht. Läuft nicht.
    function my_theme_name_scripts() { gibt es in der function.php nicht.

    Antworten
    • Hallo Tom,

      das und bitte weglassen, das war nur zur verdeutlichung des PHP Codes (habe ich jetzt angepasst, damit es besser dargestellt wird.)

      und bitte “my_theme_name” durch den name deines Themes erstetzen. “my_theme_name” dient hier als Platzhalter.

      Ich hoffe ich konnte dir weiterhelfen :)

  • Hallo Matthias,

    vielen Dank für Deine Anleitung.

    EIne Frage habe ich:
    Ich will WP mit Bootstrap installieren, soweit nehme ich Deine Anleitung.
    Jetzt will ich beispielsweise den http://bootstrapformhelpers.com/ installieren.
    Hast Du einen Tipp, wie dies funktionieren könnte?

    Danke und Gruß
    Joachim

    Antworten
    • Hallo Hans-Joachim,

      ich kann leider die Erweiterung nicht beschreiben, da ich sie noch nicht Eingesetzt habe.
      Jedoch denke ich, sollte es recht einfach über die function.php zu integrieren sein.

      Lt. der Anleitung unter http://bootstrapformhelpers.com/gettingstarted/#jquery-plugins
      muss das so erfolgen:
      Bootstrap Formhelper downloaden und entpacken. Folgende inhalte dann in ihren Themen-Ordner in einen neuen Ordner “bootstrap-formhelper” kopieren.

      | |— css/
      | |— bootstrap-formhelpers.css
      | |— bootstrap-formhelpers.min.css
      | |— img/
      | |— bootstrap-formhelpers-countries.flags.png
      | |— bootstrap-formhelpers-currencies.flags.png
      | |— bootstrap-formhelpers-googlefonts.png
      | |— js/
      | |— bootstrap-formhelpers.js
      | |— bootstrap-formhelpers.min.js

      Dann die “function.php” öffnen und die Daten im Theme “registrieren”.
      wp_register_script( 'bootstrap-formhelper-js', get_template_directory_uri() . '/bootstrap-formhelper/js/bootstrap-formhelpers.min.js, array( 'jquery' ), '3.0.1', true );
      wp_register_style( 'bootstrap-formhelper-css', get_template_directory_uri() . '/bootstrap-formhelper/css/bootstrap-formhelpers.min.css', array(), '3.0.1', 'all' );
      wp_enqueue_script( 'bootstrap-js' );
      wp_enqueue_style( 'bootstrap-css' );

      Wichtig ist noch, die jQuery Version 1.10.2 in Dein Projekt einzubauen.

Schreibe einen Kommentar

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

Bitte füllen Sie dieses Feld aus
Bitte füllen Sie dieses Feld aus
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren

Menü