Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!
Achtung! Dieser Artikel wurde nach dem Relaunch von wpsnippets.de noch nicht überarbeitet und kann fehlerhaft in der Formatierungen sein.

WordPress Navigation mit Twitter Bootstrap Klassen

Twitter’s Bootstrap ist ein sehr beliebtes Framework, viele Entwickler steigen mittlerweile auf Bootstrap um. Damit die Navigation (Funktion wp_nav_menu()) korrekt mit allen Bootstrap Klassen dargestellt wird, ist eine kleine Anpassung nötig.

In diesem Snippet wird mit einer sogenannten „Custom Walker Function“ gearbeitet. Anhand dieser Funktion kann man unkompliziert Klassen in der Funktion wp_nav_menu() ergänzen.

Fügt folgendes in die functions.php ein:

class description_walker extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
$indent = ( $depth ) ? str_repeat( "t", $depth ) : '';

$class_names = $value = '';

// If the item has children, add the dropdown class for bootstrap
if ( $args->has_children ) {
$class_names = "dropdown ";
}

$classes = empty( $item->classes ) ? array() : (array) $item->classes;

$class_names .= join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="'. esc_attr( $class_names ) . '"';

$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
// if the item has children add these two attributes to the anchor tag
if ( $args->has_children ) {
$attributes .= ' class="dropdown-toggle"';
// remove data-toggle="dropdown" after class="" ...
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
$item_output .= $args->link_after;
if($depth!=0){
$description = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';
$item_output .= $description;
}
// if the item has children add the caret just before closing the anchor tag
if ( $args->has_children ) {
$item_output .= '</a>';
// remove <b class="caret"></b> before </a>
}
else{
$item_output .= '</a>';
}
$item_output .= $args->after;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}

function start_lvl(&$output, $depth) {
$indent = str_repeat("t", $depth);
$output .= "n$indent<ul class="dropdown-menu">n";
}

function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output )
{
$id_field = $this->db_fields['id'];
if ( is_object( $args[0] ) ) {
$args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
}

return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
}

Anschließend müsst ihr die Funktion wp_nav_menu() z.B. in der header.php wie folgt aufrufen:

wp_nav_menu(
	array(
	'menu' => 'main_nav', /* name des menues */
	'menu_class' => 'nav pull-left', /* klasse: z.B. pull-right (rechtsbndig) */
	'theme_location' => 'nav_main', /*  position des menues  */
	'container' => 'false', /* container klasse  */
	'depth' => '2', /* tiefe des menues angeben (fr ein Sub-Sub Menu muessen extra CSS-Styles angegeben werden!!) */
	'walker' => new description_walker()
	)
);

Das wars! Schon habt ihr die schöne Bootstrap Navigation! Bei Fragen einfach ein Kommentar hinterlassen.

Über Christian

Die Webentwicklung ist seit 2006 ein großer Teil meines Lebens und seit 2010 kann ich damit auch meine Brötchen verdienen. Ich beschäftige mich speziell mit WordPress und entwickle auch eigene Themes. Die Anpassungsfähigkeit von Wordpress begeistert mich immer wieder, daher möchte ich euch interessante Snippets und Plugins nicht vorenthalten.

WordPress Affiliate ThemeAnzeige

7 Kommentare

Avatar von Andreas

Andreas 21. Januar 2013 um 17:03

Hallo Christian,

bin durch Google auf deinen Beitrag gestoßen. Klasse Erklärung.

Ich bin gerade dabei ein deutsches Bootstrap Tutorial zu erstellen: http://www.catmoney.de/bootstrap-tutorial/

Ich überlege gerade, ob es Sinn macht dort eine spezielle Unterkategorie „Bootstrap für WordPress“ aufzubauen. Da könnte dann z. B. dein Script hinein, wenn du zustimmst.

Ich selbst nutze übrigens das Bootstrap Theme (http://wordpress.org/extend/themes/the-bootstrap) für meinen Blog.

Viele Grüße

Andreas

Antworten
Avatar von Christian Lang

Christian Lang 21. Januar 2013 um 17:46

Hallo Andreas,

eine eigene Unterkategorie für Bootstrap ist bestimmt ganz sinnvoll. Es gibt noch mehrere Anpassungen, welche man an WordPress vornehmen kann, damit man weitere Funktionen von Bootstrap nutzen kann.

Du kannst auch gerne dieses Snippet benutzen, über einen kleinen Link auf wpsnippets.de würde ich mich natürlich freuen ;-)

Gruß
Christian

Antworten
Avatar von Andreas

Andreas 21. Januar 2013 um 19:58

Hallo Christian,

oder halt gleich das Bootstrap Theme nutzen ;-)

Eine Verlinkung zu dir setze ich selbstverständlich.

Ich gebe dir bescheid, sobald die Kategorie online ist.

Danke nochmal & Gruß

Andreas

Antworten
Avatar von erik

erik 18. November 2013 um 15:58

Hallo Christian,

wie kann ich denn Level 3 im Pulldown sichtbar machen?

Viele Grüße
Erik

Antworten
Avatar von Christian Lang

Christian Lang 18. November 2013 um 17:37

Hallo Erik,

dazu einfach die „depth“ in der Funktion wp_nav_menu anpassen. So z.B:

[php]
wp_nav_menu(
array(
‚menu‘ => ‚main_nav‘, /* name des menues */
‚menu_class‘ => ’nav pull-left‘, /* klasse: z.B. pull-right (rechtsbündig) */
‚theme_location‘ => ’nav_main‘, /* position des menues */
‚container‘ => ‚false‘, /* container klasse */
‚depth‘ => ‚3‘, /* tiefe des menues angeben (für ein Sub-Sub Menu muessen extra CSS-Styles angegeben werden!!) */
‚walker‘ => new description_walker()
)
);
[/php]

Antworten
Avatar von erik

erik 19. November 2013 um 9:57

Hallo Christian,
vielen Dank für die Rückmeldung. Die „depth“ Funktion habe ich angepasst aber dennoch erscheint der Sub-Sub Menü-Punkt nicht. Wie passe ich denn den CSS-Style an?

Vielen Dank im voraus.

Antworten
Avatar von Christian Lang

Christian Lang 19. November 2013 um 18:42

Hallo Erik,

schau mal im Quellcode nach (mit Firebug oder ähnlichem) ob der HTML für die dritte Ebene ausgegen wird. Wenn ja, dass CSS wie folgt ansprechen:

[css]
.nav ul li:hover ul{display:block;}
.nav ul ul{background:red;}
[/css]

Als Beispiel…

Viele Grüße
Christian

Antworten

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*