wp-bootstrap-navwalker

Uma classe de andador de navegação WordPress personalizada para implementar totalmente o estilo de navegação Bootstrap 3.0+ em um tema personalizado usando o gerenciador de menus embutido no WordPress.

Bootstrap 2.x vs Bootstrap 3.0

Existem muitas mudanças no Bootstrap 2.x e no Bootstrap 3.0 que afetam a forma como a classe nav walker é usada e o que o walker suporta. Para alterações de CSS, recomendo a leitura de Migrating from 2.x to 3.0 na documentação oficial do Bootstrap http://getbootstrap.com/getting-started/#migration

A alteração de funcionalidade mais notável no Bootstrap 3.0.0+ é que ele suporta apenas um único nível suspenso. Este script tem como objetivo implementar a estrutura de menu do Bootstrap 3.0 sem adicionar recursos adicionais, portanto, níveis suspensos adicionais não serão suportados.

Se você gostaria de usar o Bootstrap 2.x, você pode encontrar a versão legada da classe walker aqui https://github.com/twittem/wp-bootstrap-navwalker/tree/For-Bootstrap-2.3.2

NOTA

Esta é uma classe de utilitário destinada a formatar seu menu de tema WordPress com a sintaxe e classes corretas para utilizar a navegação suspensa Bootstrap e não inclui os arquivos JS Bootstrap necessários. Você terá que incluí-los manualmente.

Instalação

Visite https://github.com/twittem/wp-bootstrap-navwalker/ e faça downlaod wp bootstrap navwalker.php

Coloque wp bootstrap navwalker.php na pasta de temas do WordPress/wp-content/your-theme/

Abra seu arquivo functions.php de temas do WordPress e adicione o seguinte código:/wp-content/your-theme/functions.php

// Register Custom Navigation Walker
require_once('wp_bootstrap_navwalker.php');

Uso

Atualize sua função para usar o novo andador adicionando um item “andador” ao menu de navegação wp .wp_nav_menu()header.php

<?php
    wp_nav_menu( array(
        'menu'              => 'primary',
        'theme_location'    => 'primary',
        'depth'             => 2,
        'container'         => 'div',
        'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse',
        'menu_class'        => 'nav navbar-nav',
        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
        'walker'            => new wp_bootstrap_navwalker())
    );
?>

Seu menu agora será formatado com a sintaxe e classes corretas para implementar a navegação suspensa do Bootstrap.

Você também desejará declarar seu novo menu em seu arquivo.functions.php

register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'THEMENAME' ),
) );

Normalmente, o menu é empacotado com marcação adicional. Aqui está um exemplo de um menu que se fecha para navegação responsiva.navbar-fixed-top

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="<?php bloginfo('url'); ?>">
                <?php bloginfo('name'); ?>
            </a>
        </div>

        <?php
            wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>
    </div>
</nav>

Para alterar o estilo do menu, adicione os nomes das classes de navegação do Bootstrap à menu_classdeclaração.

Revise as opções nos documentos do Bootstrap para obter mais informações sobre as classes de navegação
http://getbootstrap.com/components/#nav

Exibindo o Menu

Para exibir o menu, você deve associá-lo ao local do tema. Você pode fazer isso selecionando o local do seu tema na lista Locais do tema enquanto edita um menu no gerenciador de menus do WordPress.

Extras

Este script incluiu a capacidade de adicionar divisores Bootstrap, cabeçalhos suspensos, glifos e links desabilitados para seus menus por meio da IU do menu do WordPress.

Divisores

Basta adicionar um item de menu Link com um URL de #e um Texto de Link ou Atributo de Título de divider(não diferencia maiúsculas de minúsculas, então ‘divisor’ ou ‘Divisor’ funcionarão) e a classe fará o resto.

Glifos

Para adicionar um ícone ao seu link, basta colocar o nome da classe Glyphicon no campo Atributo do título do link e a classe fará o resto. IEglyphicon-bullhorn

Cabeçalhos suspensos

Adicionar um cabeçalho suspenso é muito semelhante, adicione um novo link com uma URL de #e um Atributo de título de (ele corresponde à classe CSS do Bootstrap, portanto, é fácil de lembrar). defina o rótulo de navegação para o texto do seu cabeçalho e a classe fará o resto.dropdown-header

Links Desabilitados

Para definir um link desabilitado, basta definir o Atributo do Título como disablede a classe fará o resto.