Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 18. November 2015

Aktualisiert am: 09. Januar 2018

Bootstrap Logo

Bootstrap-Navigation in WordPress implementieren

Bootstrap ist ein beliebter Baukasten für responsive Webdesigns. Wir zeigen Dir am Beispiel einer Navigationsleiste, wie Du Komponenten in WordPress einfügst.

Bootstrap ist ein Open-Source-Framework für Webdesigner mit fertigen Buttons, Navigationsleisten, Grid-Systemen, Tabellen und vielem mehr. Als Basis dienen vorformatierte CSS-Komponenten, typografische Elemente und JavaScript. Die benötigten Dateien und Code-Blöcke werden auf GitHub veröffentlicht und können frei verwendet werden.

Um eine Verbindung mit WordPress aufzubauen, werden wir zunächst ein Basis-Theme erstellen, in welchem wir die Bootstrap-Bibliothek einbinden. Anschließend fügen wir eine sticky Navigationsleiste in den WordPress-Header ein. Voraussetzungen sind ein lokales oder in einem Hosting-Paket installiertes WordPress sowie WordPress- und PHP-Kenntnisse.

1. Basis Theme erstellen

Zum Testen benötigst Du als Erstes ein möglichst einfaches Theme ohne Schnickschnack. Für solche Zwecke gibt es etwa das Starter Theme underscores von Automattic: einfach einen Namen eingeben (in unserem Beispiel „meintheme“) und generieren lassen. Das als .zip-Datei gepackte Theme kann dann über das Dashboard hochgeladen und aktiviert werden.

Wichtig: aus Sicherheitsgründen sollte mindestens ein alternatives Theme aktiviert sein, auf welches WordPress im Notfall zurückgreifen kann.

Underscores Website

Underscores Theme per Mausklick

2. Bootstrap einrichten

Im zweiten Schritt laden wir Bootstrap in der aktuellen Version (3.3.7) herunter. Wir entpacken die Datei, legen sie in das Verzeichnis unseres gerade erstellten Themes (/wp-content/themes/meintheme) und benennen den Ordner in „bootstrap“ um. Das FTP-Verzeichnis sieht dann so aus:

FTP-Verzeichnis

3. Bootstrap und WordPress verknüpfen

Damit WordPress die JavaScript- und CSS-Dateien von Bootstrap nutzen kann, musst Du nun die functions.php des Themes anpassen. Um Zeile 116 befindet sich function meintheme_scripts() (statt „meintheme“ steht dort der Name Deines Themes). Darunter folgen mehrere Funktionen. Füge vor der schließenden, geschweiften Klammer } die folgenden Zeilen ein:

Code in der functions.php

In die functions.php-Datei eingefügter Code (markiert)

WordPress wandelt Zeilenumbrüche im Editor standardmäßig in HTML-Paragrafen um. Weil dieses Verhalten mit Bootstrap-Code Probleme verursachen könnte, fügen wir in der functions.php unterhalb von add_action( ‚wp_enqueue_scripts‘, ‚meintheme_scripts‘ ); folgende Zeile ein:

Nach dem Upload ist das Theme mit Bootstrap verknüpft. Damit können wir Bootstrap-Elemente in unserem Blog testen: Einfach die vorgefertigten Code-Blöcke von getbootstrap.com kopieren und in den WordPress-Editor (Text-Ansicht) einfügen. Nach dem Veröffentlichen erscheinen die Elemente im Frontend unseres Blogs.

Bootstrap Fortschrittsbalken

Zu den Bootstrap-Komponenten gehören zum Beispiel animierte Fortschrittsbalken.

4. Navigationsleiste einfügen

Um die Navbar mit Dropdown-Menü in die Menü-Funktion von WordPress zu implementieren, lädst Du zunächst die wp-bootstrap-navwalker.php von der GitHub Respository herunter und legst sie im Theme-Hauptverzeichnis ab. Die functions.php muss nun erneut angepasst werden, damit sie die neue Datei aufrufen kann. Füge dazu folgende Zeile ganz ans Ende ein:

Danach löschst Du die aktuelle WordPress-Navigation in der header.php, die sich ebenfalls im Theme-Ordner befindet. Entferne erst den kompletten Code zwischen <header id=“masthead“ class=“site-header“> und <!– #site-navigation ->.

Code in der header.php

In der header.php-Datei wird der hier markierte Code entfernt.

An gleicher Stelle fügst Du folgenden Code-Block ein:

5. Menü erstellen

Wenn Du es bis hierher geschafft hast, bist Du (fast) am Ziel angekommen! Nachdem Du die aktualisierten Dateien hochgeladen hast, kannst Du im Dashboard unter DesignMenüs ein Menü erstellen. Damit ein Dropdown-Menü angezeigt wird, müssen Unterpunkte angelegt werden. Bitte nicht vergessen bei Primary Menu das Häkchen zu setzen.

WP Menü Einstellungen

WordPress Menü-Einstellungen: Per Drag&Drop lassen sich Menüpunkte verschieben und so hierarchisch aufbauen.

Fertig!

Das Ergebnis Deiner Arbeit kannst Du Dir im Frontend anschauen, ein Bootstrap-Menü im WordPress-Blog:

Bootstrap Menü in WordPress

Links siehst Du das Menü auf dem Desktop, rechts in der mobilen Ansicht (aufgeklappt und mit geöffnetem Dropdown-Menü „Leistungen“)

Der Autor:

Autor: Christian Lingnau

Ich heiße Christian Lingnau und bin freier Redakteur für Hosting-Themen, insbesondere WordPress.

15 Kommentare

  1. Max Schmitt sagte am 22. November 2015 um 15:56:

    Hallo,
    Hab alles wie beschrieben befolgt doch beim intigrieren von Boostrap scheitert es. Hier meine functions.php
    http://pastebin.com/fzJE39M8
    Mfg Max

    Antworten
  2. Max Schmitt sagte am 22. November 2015 um 16:09:

    Fehler gefunden
    ihr habt einen Fehler bei Schritt 3 mit den Klammern gemacht.
    Siehe hier ist es richtig geschrieben.
    https://digitalfellows.commons.gc.cuny.edu/2013/11/18/learn-bootstrap-part-2-adding-bootstrap-to-wordpress/
    Mfg Max

    Antworten
  3. Max Schmitt sagte am 25. November 2015 um 16:21:

    Sorry, war ein fehler meinerseits 🙂

    Antworten
  4. Gabriel Dogadov sagte am 28. Juni 2016 um 22:36:

    Was ist wenn man kein vorhandenes Theme benutzt ? Also ich habe das so versucht und die js datei funktioniert nicht

    Antworten
    • Christian Lingnau sagte am 30. Juni 2016 um 12:00:

      Hallo Gabriel,

      das lässt sich aus der Ferne schlecht beantworten. Vielleicht wird an anderer Stelle deines Themes ebenfalls JS geladen, was zu Problemen führen kann. Am besten lässt sich das über die Entwickler-Werkzeuge des Browsers (meist per F12-Taste) herausfinden. Grundsätzlich sollte möglichst immer die in WordPress integrierte jQuery-Version geladen werden (über die Funktion wp_enqueue_script). Mehr Infos dazu findest du unter https://developer.wordpress.org/reference/functions/wp_enqueue_script/.

      Wenn dir das zu kompliziert ist, würde ich es mit einem anderen Theme probieren.

      Viele Grüße
      Christian

      Antworten
  5. Frank Oswald sagte am 3. Juli 2016 um 18:55:

    Hallo Christian,
    super Anleitung. Danke!

    Antworten
  6. Kai sagte am 17. März 2018 um 19:21:

    Hi,
    super Anleitung. Funktioniert auch alles soweit. Bis auf den letzten Schritt. Wenn ich nun ein Menü anlege und den Hake bei primären Menü setze, erkennt er das Menü trotzdem nicht und zeigt noch „Add a menu“ an. Kann da so aus der Ferne geholfen werden?

    Beste Grüße
    Kai

    Antworten
    • Kai sagte am 18. März 2018 um 17:03:

      Wenn ich die Zeile
      ‚theme_location‘ => ‚menu-1‘,
      lösche, dann erscheint das Menü, allerdings nicht untergeordnete Menüs.

      Antworten
      • Christian Lingnau sagte am 19. März 2018 um 23:41:

        Hallo Kai, ich habe das jetzt nochmal getestet und kann den Fehler nicht reproduzieren. Allerdings wurde die Funktion remove_filter oben im Fließtext falsch dargestellt. Ich hab das korrigiert, so dass man sich die Zeile jetzt wie die anderen Code-Blöcke kopieren kann. Vielleicht hatte sich da ein Fehler bei Dir eingeschlichen.
        Viele Grüße
        Christian

        Antworten
        • Kai sagte am 22. März 2018 um 19:35:

          Das war leider nicht die Ursache :/
          Falls dir noch was einfallen sollte, würde ich mich freuen. Ich bin leider ratlos…

          Beste Grüße
          Kai

          Antworten
        • Kai sagte am 25. März 2018 um 23:47:

          Habe mich nochmal ein wenig mit dem Punkt Theme_Location beschäftigt. Ich muss das Menü eben auch so nennen, wie es dort steht. Alternativ kann man dort auch „primary“ schreiben…

          Jetzt hat es auch bei mir geklappt. Vielen Dank für diese super Anleitung 🙂

          Antworten
  7. Sebastian sagte am 20. März 2019 um 10:19:

    Hallo Christian,

    hab alles gemäß deiner Anleitung erledigt. Jetzt erscheint anstelle des Menus eine leere graue Box. Wenn ich auf diese klicke erscheint darunter das (unformatierte) Menu.
    Weisst Du Rat?

    Vielen Dank,
    Sebastian

    Antworten
    • Oliver Meiners sagte am 21. März 2019 um 15:53:

      Hallo Sebastian,

      ich habe mal für Dich bei Christian nachgefragt. Hier die Antwort:

      Wo der Fehler genau liegt, lässt sich aus der Ferne leider schlecht sagen. Bitte beachte auch, dass sich diese Anleitung auf Bootstrap 3.3 und WordPress 4.9 bezieht. Mittlerweile gibt es aktuellere Versionen, so dass das Vorgehen ggf. von dem hier beschriebenen Weg abweichen kann.

      Viele Grüße

      Antworten

Hinterlasse eine Antwort

Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.
Wir freuen uns, wenn Du uns Deinen Namen hinterlässt. So wissen wir, wie wir Dich bei unserer Antwort ansprechen können.
Wenn Du Deine E-Mail-Adresse einträgst, wirst Du per Mail über unsere Antwort informiert. Sie wird zum Schutz Deiner Daten aber nicht veröffentlicht. Beide Angaben sind freiwillig.

Hier bloggen

Lisa Kopelmann
Ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Oliver Meiners
Schreibt über alles, was für Dich als STRATO Kunde wichtig ist

Tobias Mayer
Berichtet über Neuigkeiten aus dem Unternehmen

Michael Poguntke
Schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und Server

Christian Lingnau
Bloggt über WordPress & andere CMS

Franz Neumeier
Gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
Kennt sich bei Domains hervorragend aus

Patrick Schroeder
Erzählt die Stories unserer Kunden

Ann-Christin Schmitt
Schreibt über HiDrive, den Homepage-Baukasten und guten Websitecontent

Christian Rentrop
bloggt über Software-Themen