• Resolvido Angelo Rocha

    (@angelorocha)


    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;

Visualizando 6 respostas - 1 até 6 (de um total de 6)
  • Moderador Claudio Sanches

    (@claudiosanches)

    Você pode resolver isso usando este plugin:
    http://wordpress.org/extend/plugins/wp-bootstrap-navmenu/

    Ele vai deixar exatamente como você precisa.

    Criador do tópico Angelo Rocha

    (@angelorocha)

    Hummmmm…
    Vlw pela dica, mais gostaria de fazer isso na mão pra deixar
    o tema tratando isso, sem plugins.

    Moderador Claudio Sanches

    (@claudiosanches)

    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-navwalker

    Criador do tópico Angelo Rocha

    (@angelorocha)

    haha!!! Eu tava fazendo isso agora, dando uma sacada no cod do plugin, vlw pela dica Claudio, qualquer duvida volto a pertubar vcs 😉

    Moderador Claudio Sanches

    (@claudiosanches)

    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.

    Criador do tópico Angelo Rocha

    (@angelorocha)

    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.

Visualizando 6 respostas - 1 até 6 (de um total de 6)
  • O tópico ‘Usar bootstrap menus nos menus nativos do wordpress’ está fechado para novas respostas.