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 von jedem 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 werden wir eine sticky Navigationsleiste in den WordPress-Header einfügen. 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 Theme per Mausklick
2. Bootstrap einrichten
Im zweiten Schritt laden wir Bootstrap in der aktuellen Version (3.3.5) herunter. Wir entpacken die Datei, legen sie in das Verzeichnis unseres gerade erstellen Themes (/wp-content/themes/meintheme) und benennen den Ordner in „bootstrap“ um. Das FTP-Verzeichnis sieht dann so aus:
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 sich 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.5', true );
wp_register_style( ‚bootstrap-css‘, get_template_directory_uri() . ‚/bootstrap/css/bootstrap.min.css‘, array(), ‚3.3.5‘, ‚all‘ );
wp_enqueue_script( ‚bootstrap-js‘ );
wp_enqueue_style( ‚bootstrap-css‘ );
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, muss in der functions.php unterhalb von add_action( 'wp_enqueue_scripts', 'meintheme_scripts' ); folgende Zeile eingefügt werden: 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 http://getbootstrap.com kopieren und in den WordPress-Editor (Text-Ansicht) einfügen. Nach dem Veröffentlichen erscheinen die Elemente im Frontend unseres Blogs.
Zu den Bootstrap-Komponenten gehören zum Beispiel animierte Fortschrittsbalken.
4. Navigationsleiste einfügen
Wenn Dir Elemente von Bootstrap gefallen, kannst Du diese mit der WordPress-Funktionalität verbinden. In der vorbildlichen Dokumentation wird zum Beispiel beschrieben, wie die sticky Navbar mit Dropdown-Menü in die Menü-Funktion von WordPress implementiert wird. Dazu lädst Du zunächst die wp-bootstrap-navwalker.php-Datei von der GitHub Respository herunter und legst sie in den Theme-Ordner ab, wo die functions.php-Datei liegt. Letztere muss erneut angepasst werden, damit sie die Datei aufrufen kann. Füge dazu folgende Zeilen ganz ans Ende ein:
// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');
Danach löschen wir die aktuelle WordPress-Navigation in der header.php-Datei, die sich ebenfalls im Theme-Ordner befindet. Wir entfernen erst den kompletten Code zwischen <header id=“masthead“ class=“site-header“ role=“banner“> und <!– #site-navigation ->.
In der header.php-Datei wird der hier markierte Code entfernt.
An gleicher Stelle fügen wir den hier verlinkten 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 Design → Menü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.
WordPress Menü-Einstellungen: per Drag&Drop lassen sich Menüpunkte verschieben und so Hierarchien aufbauen
Fertig!
Das Ergebnis Deiner Arbeit kannst Du Dir im Frontend anschauen, ein Bootstrap-Menü im WordPress-Blog:
Links das Menü auf dem Desktop, rechts in der mobilen Ansicht (nachdem es aufgeklappt und das Dropdown-Menü „Leistungen“ geöffnet wurde)