Usar bootstrap menus nos menus nativos do wordpress
-
Galera, ja tentei varias vezes fazer isso, ja li e reli a doc do wp_nav_menu e nao consigo fazer com que funcione os menus dropdowns do bootstrap nos meus temas de wordpress.
Por exemplo, vejam o seguinte codigo de um menu responsivo do bootstrap:
<div class="navbar"> <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-inner"> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="">Home</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Topic 1</a></li> <li><a href="#">Topic 1</a></li> </ul> </ul> </nav> </div> </div> </div>
Para colocar isso no wordpress, ate o inicio da ul:
<ul class="nav">
Eu desenrrolo tranquilo, porem nao sei como colocar a classe dropdown em uma LI dentro de um menu do wordpress, nao achei nada que fizesse isso, e outra, vejam que no A onde ele chama o drop down tem mais atributos:
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
O que piora minha situação, pois nao consigo colocar esse bentito A no menu do wordpress com esse atributos.
Alguem ja fez isso ou ja achou algum tutor que funcione?!
Obrigado;
-
Você pode resolver isso usando este plugin:
http://wordpress.org/extend/plugins/wp-bootstrap-navmenu/Ele vai deixar exatamente como você precisa.
Hummmmm…
Vlw pela dica, mais gostaria de fazer isso na mão pra deixar
o tema tratando isso, sem plugins.Bem simples então, leia o código do plugin, desta forma você vai saber como o autor fez e poderá colocar no seu functions.php para resolver isso.
http://plugins.svn.wordpress.org/wp-bootstrap-navmenu/trunk/wp-bootstrap-navmenu.php
Outras soluções:
http://www.emanueletessore.com/bootstrap-navbar-under-wordpress/
https://github.com/twittem/wp-bootstrap-navwalkerhaha!!! Eu tava fazendo isso agora, dando uma sacada no cod do plugin, vlw pela dica Claudio, qualquer duvida volto a pertubar vcs 😉
Esse do GitHub eu já usei e é a melhor solução, pode colar ele no seu
functions.php
(copia a classe pra ele, tirando o cabeçalho de plugin) e instanciar a classe na hora de criar o menu.Segue o codigo do menu para quem precisar:
bootstrap_menu.php
<?php class twitter_bootstrap_nav_walker extends Walker_Nav_Menu { function start_lvl( &$output, $depth ) { $indent = str_repeat( "\t", $depth ); $output .= "\n$indent<ul class=\"dropdown-menu\">\n"; } function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { global $wp_query; $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; if (strcasecmp($item->title, 'divider')) { $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes[] = ($item->current) ? 'active' : ''; $classes[] = 'menu-item-' . $item->ID; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); if ($args->has_children && $depth > 0) { $class_names .= ' dropdown-submenu'; } else if($args->has_children && $depth === 0) { $class_names .= ' dropdown'; } $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args ); $id = $id ? ' id="' . esc_attr( $id ) . '"' : ''; $output .= $indent . '<li' . $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 ) .'"' : ''; $attributes .= ($args->has_children) ? ' data-toggle="dropdown" data-target="#" class="dropdown-toggle"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= ($args->has_children && $depth == 0) ? ' <span class="caret"></span></a>' : '</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } else { $output .= $indent . '<li class="divider">'; } } function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) { if ( !$element ) { return; } $id_field = $this->db_fields['id']; if ( is_array( $args[0] ) ) $args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] ); else if ( is_object( $args[0] ) ) $args[0]->has_children = ! empty( $children_elements[$element->$id_field] ); $cb_args = array_merge( array(&$output, $element, $depth), $args); call_user_func_array(array(&$this, 'start_el'), $cb_args); $id = $element->$id_field; if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) { foreach( $children_elements[ $id ] as $child ){ if ( !isset($newlevel) ) { $newlevel = true; $cb_args = array_merge( array(&$output, $depth), $args); call_user_func_array(array(&$this, 'start_lvl'), $cb_args); } $this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output ); } unset( $children_elements[ $id ] ); } if ( isset($newlevel) && $newlevel ){ $cb_args = array_merge( array(&$output, $depth), $args); call_user_func_array(array(&$this, 'end_lvl'), $cb_args); } $cb_args = array_merge( array(&$output, $element, $depth), $args); call_user_func_array(array(&$this, 'end_el'), $cb_args); } } ?>
menu.php
<?php require(get_template_directory() . '/bootstrap_menu.php'); ?> <div class="navbar"> <!-- Div Navbar --> <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-inner"> <!-- Navbar-inner --> <div class="nav-collapse collapse"> <!-- Nav-collapse --> <nav class="menu"> <!-- Main nav --> <?php wp_nav_menu(array( 'container' => false, 'items_wrap' => '<ul id="%1$s" class="%2$s nav">%3$s</ul>', 'walker' => new twitter_bootstrap_nav_walker )); ?> </nav> <!-- End Nav Tag --> </div> <!-- End Nav-collapse --> </div> <!-- End Navbar-inner --> </div> <!-- End Navbar -->
Chamando em qualquer parte do tema:
<?php get_template_part(‘menu’) ?>
Eu coloquei o menu em um arquivo e o codigo do walker em outro so por organização mesmo, e pq meu functions ta muito grande, hehe…
Mais podem colocar tudo junto, ou no functions, fica a criterio.É isso, vlw pela ajuda.
- O tópico ‘Usar bootstrap menus nos menus nativos do wordpress’ está fechado para novas respostas.