Das Twitter Bootstrap Framework ist ein freies Open-Source-Toolkit von Twitter, für eine schnelle und trotzdem durchdachte Gestaltung von Webseiten, basierend auf HTML5, CSS und Javascript. Neben Gestaltungsvorlagen für Typografie, Formularen, Buttons, Tabellen, Grid-Systemen, Navigations- und andere Front-End-Elementen, beinhaltet das Framework zusätzlich optionale Javascript-Erweiterungen.
Integration der Twitter Bootstrap CSS:
Damit unsere Webseite von der Bootstrap Navbar überhaupt profitieren kann, muss das Bootstrap Framework natürlich zuvor eingebunden werden. Für diesen Schritt empfehle ich gleich das Plugin “Twitter Bootstrap CSS“, welches nicht nur eine einfache Einbindung des Frameworks, sondern gleichzeitig auch einen Shortcode-Support mitbringt. So lassen sich auch in Artikeln die Bootstrap Grids und Button einbinden. Zusätzlich kommt das Plugin mit einem LESS-Compiler für eine einfache Anpassung der Elemente.
WordPress Custom Menü:
Nun fehlt natürlich noch das Custom-Menü für unsere WordPress-Installation. Später wollen wir schließlich ganz einfach über unser WordPress-Backend die Menüpunkte konfigurieren und ggf. ändern. Für dieses Vorhaben hat der User johnmegahan auf seinem Blog eine passende Lösung präsentiert. Der Code für die Unterstützung des Custom Menüs wurde auf Github veröffentlicht und muss in die functions.php des WordPress-Themes eingebunden werden. Die aktuelle Version unterstützt übrigens bereits die Dropdown-Navigation.
Implementation:
Anschließend muss das Menü in WordPress eingebunden werden, bevor es dann benutzt werden kann. Auch dies erweist sich nicht als sonderlich schwierig: Folgenden Quellcode müsst ihr direkt an der obersten Stelle innerhalb vom <body> einfügen und ggf. ein wenig anpassen.
[php]
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!– Optional: Button zum Menü einklappen auf Mobilgeräten, benötigt responsive.css –>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!– Ende Button –>
<!– Optional: Website Branding –>
<a class="brand" href="http://domain.tld">Website Brand</a>
<!– Branding Ende –>
<div class="nav-collapse">
<?php $args = array( ‚theme_location‘ => ‚top-bar‘,
‚depth‘ => 2,
‚container‘ => false,
‚menu_class‘ => ’nav‘,
‚walker‘ => new Bootstrap_Walker_Nav_Menu()
);
wp_nav_menu($args);
?>
</div>
</div>
</div>
</div>
[/php]
Einbindung der Searchbox in WordPress:
Zusätzlich lässt sich natürlich auch eine Searchbox in die Navbar einbauen. Diese können wir selbstverständlich nicht direkt übernehmen, da wir die Suche über WordPress laufen lassen müssen. Die benötigen Anpassungen sind trotzdem leicht zu handhaben:
Innerhalb des Containers unserer Navbar (head.php) muss folgender Code eingefügt werden. Pull-right bestimmt dabei, ob sich die Searchbox auf der rechten Seite oder der linken Seite (pull-left) befindet. Anschließend finden wir die Searchbox in der Navbar und unser Bootstrap Navbar WordPress Menü wurde erfolgreich eingebunden.
[php]
<form method="get" id="searchform" action="<?php bloginfo(‚url‘); ?>/" class="navbar-search pull-right ">
<input type="text" name="s" id="s" class="search-query" placeholder="Search">
</form>
[/php]
© 2008 ¥akuza112 Inc.
