Bootstrap-Navigation in WordPress implementieren

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:

wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ), '3.3.7', true );
	wp_register_style( 'bootstrap-css', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css', array(), '3.3.7', 'all' );
	wp_enqueue_script( 'bootstrap-js' );
	wp_enqueue_style( 'bootstrap-css' );
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:

remove_filter( 'the_content', 'wpautop' );

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:

require_once get_template_directory() . '/wp-bootstrap-navwalker.php';

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:

<nav class="navbar navbar-default" role="navigation">
          		<div class="container-fluid">
            
            	<!-- Brand and toggle get grouped for better mobile display -->
            	<div class="navbar-header">
              	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                	<span class="sr-only">Toggle navigation</span>
                	<span class="icon-bar"></span>
                	<span class="icon-bar"></span>
                	<span class="icon-bar"></span>
              	</button>
              
              		<a class="navbar-brand" href="<?php echo home_url(); ?>">
                        <?php bloginfo('name'); ?>
                    </a>
            	</div>

                <?php
                    wp_nav_menu( array(
                     'menu'              => 'primary',
                     'theme_location'    => 'menu-1',
                     'depth'             => 2,
                     'container'         => 'div',
                     'container_class'   => 'collapse navbar-collapse',
                     'container_id'      => 'bs-example-navbar-collapse-1',
                     'menu_class'        => 'nav navbar-nav',
                     'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                     'walker'            => new wp_bootstrap_navwalker())
                    );
                ?>
                    </div>
                </nav>

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“)
Schlagworte: ,

Teilen

  1. Avatar

    Sebastian sagte am

    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
    • Avatar

      Oliver Meiners sagte am

      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
  2. Avatar

    Kai sagte am

    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
    • Avatar

      Kai sagte am

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

      Antworten
      • Avatar

        Christian Lingnau sagte am

        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
        • Avatar

          Kai sagte am

          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
        • Avatar

          Kai sagte am

          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
Weitere Kommentare laden

Sie können erst kommentieren, wenn Sie unseren Datenschutzbestimmungen und den Cookies zugestimmt haben. Aus Datenschutzrechtlichen Gründen dürfen wir andernfalls keine personenbezogenen Daten von Ihnen aufzeichnen.

Klicken Sie dazu einfach unten im Browser Fenster auf den blauen Button Akzeptieren. Nach dem Neuladen der Seite können Sie Ihr Kommentar schreiben.

 

Diese Webseite verwendet Cookies, um die Nutzung der Seite zu verbessern, den Erfolg von Werbemaßnahmen zu messen und interessengerechte Werbung anzuzeigen. Durch die Nutzung dieser Seite erklären Sie sich damit einverstanden. Informationen