Download do wp bootstrap navwalker - download do código fonte do wp bootstrap navwalker

WP Bootstrap Navwalker

Este código na ramificação principal do repositório está passando por uma grande reformulação para alinhá-lo com os padrões recentes e para mesclar e testar o acúmulo de PRs que deixei por muito tempo. Use a tag v4.3.0 para versão estável enquanto esse processo ocorre. https://github.com/wp-bootstrap/wp-bootstrap-navwalker/releases/tag/v4.3.0

Uma classe WordPress Nav Walker personalizada para implementar totalmente o estilo de navegação Bootstrap 4 em um tema personalizado usando o gerenciador de menu integrado do WordPress.

NOTAS

Esta é uma classe utilitária destinada a formatar o menu do tema WordPress com a sintaxe correta e classes CSS para utilizar a navegação suspensa do Bootstrap. Ele não inclui os arquivos Bootstrap JS e CSS necessários - você terá que incluí-los manualmente.

Conformidade do tema WordPress.org

Este andador é totalmente compatível com todas as diretrizes de revisão de temas para envio de temas no wordpress.org. Não requer nenhuma modificação para ser compatível, mas você pode opcionalmente substituir o domínio de texto wp-bootstrap-navwalker (que aparece duas vezes na função fallback ) pelo domínio de texto do seu tema.

Notas de atualização

Entre a versão 3 e a versão 4 do walker houve mudanças significativas na base de código. A versão 4 do walker foi criada para funcionar com o Bootstrap 4 e não foi testada para compatibilidade com versões anteriores do Bootstrap 3. Uma ramificação separada para o Bootstrap 3 é mantida aqui: https://github.com/wp-bootstrap/wp-bootstrap- navwalker/tree/v3-branch

Aqui está uma lista das mudanças mais notáveis:

O nome do arquivo foi alterado e prefixado com class- para melhor se adequar às convenções de nomenclatura dos padrões de codificação PHP.
- Novo nome: class-wp-bootstrap-navwalker.php
- Nome antigo: wp-bootstrap-navwalker.php
O manuseio de modificadores de ícones e links agora é feito por meio da entrada do item de menu CSS Classes em vez da entrada Title .
Itens somente de ícone são possíveis usando classes de ícone em combinação com o nome de classe sr-only .

Instalação

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

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

 /**
 * Register Custom Navigation Walker
 */
function register_navwalker (){
	require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
}
add_action ( ' after_setup_theme ' , ' register_navwalker ' );

Se você encontrar erros com o código acima, use uma verificação como esta para retornar erros limpos e ajudar a diagnosticar o problema.

 if ( ! file_exists ( get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ) ) {
    // File does not exist... return an error.
    return new WP_Error ( ' class-wp-bootstrap-navwalker-missing ' , __ ( ' It appears the class-wp-bootstrap-navwalker.php file may be missing. ' , ' wp-bootstrap-navwalker ' ) );
} else {
    // File exists... require it.
    require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
}

Você também precisará declarar um novo menu em seu arquivo functions.php , caso ainda não exista.

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

Uso

Adicione ou atualize qualquer função wp_nav_menu() em seu tema (geralmente encontrada em header.php ) para usar o novo walker adicionando um item 'walker' ao array wp_nav_menu args.

 wp_nav_menu ( array (
    ' theme_location '  => ' primary ' ,
    ' depth '           => 2 , // 1 = no dropdowns, 2 = with dropdowns.
    ' container '       => ' div ' ,
    ' container_class ' => ' collapse navbar-collapse ' ,
    ' container_id '    => ' bs-example-navbar-collapse-1 ' ,
    ' menu_class '      => ' navbar-nav mr-auto ' ,
    ' 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.

Normalmente, o menu é encapsulado com marcação adicional. Aqui está um exemplo de um menu fixed-top que é recolhido para navegação responsiva no ponto de interrupção md.

<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
        <?php
        wp_nav_menu ( array (
            ' theme_location '    => ' primary ' ,
            ' depth '             => 2 ,
            ' container '         => ' div ' ,
            ' container_class '   => ' collapse navbar-collapse ' ,
            ' container_id '      => ' bs-example-navbar-collapse-1 ' ,
            ' 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 nomes de classes de navegação Bootstrap à declaração menu_class .

Revise as opções na documentação do Bootstrap para obter mais informações sobre classes de navegação.

Exibindo o Menu

Para exibir o menu você deve associar o seu menu à localização do seu 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.

Tornando este Walker o Walker padrão para menus de navegação

Tem havido algum interesse em tornar este andador o andador padrão para todos os menus. Isso pode resultar em algumas situações inesperadas, mas pode ser conseguido adicionando esta função ao seu arquivo functions.php.

 function prefix_modify_nav_menu_args ( $ args ) {
    return array_merge ( $ args , array (
        ' walker ' => new WP_Bootstrap_Navwalker (),
    ) );
}
add_filter ( ' wp_nav_menu_args ' , ' prefix_modify_nav_menu_args ' );

Simplesmente atualizar o walker pode não ser suficiente para que os menus funcionem corretamente, você pode precisar adicionar wrappers ou classes adicionais, você também pode fazer isso através da função acima.

Uso com Bootstrap 5

Bootstrap 5 usa atributos de dados com namespace. Todos os atributos data agora incluem bs como infixo. Os novos atributos funcionam exatamente como os antigos. Aqui está o botão de alternância de menu do exemplo acima com os atributos de dados renomeados.

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
    <span class="navbar-toggler-icon"></span>
</button>

O andador também adiciona um atributo de dados para alternar o menu suspenso por meio do método start_el() . Cole isso em seu functions.php para fazer o walker usar o atributo de dados infixo.

 add_filter ( ' nav_menu_link_attributes ' , ' prefix_bs5_dropdown_data_attribute ' , 20 , 3 );
/**
 * Use namespaced data attribute for Bootstrap's dropdown toggles.
 *
 * @param array    $atts HTML attributes applied to the item's `<a>` element.
 * @param WP_Post  $item The current menu item.
 * @param stdClass $args An object of wp_nav_menu() arguments.
 * @return array
 */
function prefix_bs5_dropdown_data_attribute ( $ atts , $ item , $ args ) {
    if ( is_a ( $ args -> walker , ' WP_Bootstrap_Navwalker ' ) ) {
        if ( array_key_exists ( ' data-toggle ' , $ atts ) ) {
            unset( $ atts [ ' data-toggle ' ] );
            $ atts [ ' data-bs-toggle ' ] = ' dropdown ' ;
        }
    }
    return $ atts ;
}

Cache de Menu

Em alguns sites, gerar um menu grande que raramente muda a cada solicitação de página é uma sobrecarga que você pode querer evitar. Nesses casos, posso sugerir que você armazene os resultados do menu em um transiente.

A maior desvantagem de armazenar menus de navegação em cache com este método é que ele não pode aplicar facilmente o .current-menu-item ou a classe .active ao item atualmente ativo, pois o WP decide o que está atualmente ativo no carregamento da página - e como o menu está armazenado em cache ele conhece apenas a página ativa em que foi originalmente armazenada em cache.

Você pode decidir por si mesmo se deseja tolerar essas desvantagens em benefício da remoção do tempo de geração de menu na maioria dos carregamentos de página. Você pode seguir este artigo de Dave Clements para ver como armazenamos em cache os menus de navegação que foram gerados por este andador: https://www.doitwithwp.com/use-transients-speed-wordpress-menus/

Certifique-se de definir o argumento echo como FALSE na chamada the wp_nav_menu() ao fazer isso para que os resultados possam ser armazenados em vez de ecoados na página.

Veja também:

https://generatewp.com/how-to-use-transients-to-speed-up-wordpress-menus/
https://vip-svn.wordpress.com/plugins/cache-nav-menu/cache-nav-menu.php

Extras

Este script incluiu a capacidade de usar mods de link de navegação Bootstrap em seus menus por meio da interface do menu do WordPress. Links desativados, cabeçalhos suspensos e divisores suspensos são suportados. Além disso, o suporte a ícones está integrado para Glyphicons e Font Awesome (nota: você precisará incluir as folhas de estilo ou ativos dos ícones separadamente).

Ícones

Para adicionar um ícone ao seu link, basta inserir os nomes das classes Glyphicons ou Font Awesome no campo Classes CSS do link na interface do menu e a classe walker fará o resto. IE glyphicons glyphicons-bullhorn ou fa fa-arrow-left ou fas fa-arrow-left .

Itens somente de ícone

Para fazer um item aparecer com o ícone, aplique apenas a classe de leitor de tela bootstrap sr-only ao item ao lado de qualquer nome de classe de ícone. Isso ocultará apenas o texto que apareceria como texto do link.

Links desativados

Para definir um link desabilitado, basta adicionar disabled ao campo Classes CSS na interface do menu e a classe walker fará o resto. Nota: Além de adicionar a classe .disabled, isso também alterará o link href para # para que não seja um link que possa ser seguido.

Cabeçalhos suspensos, divisores suspensos e texto de item suspenso

Cabeçalhos, divisórias e itens somente de texto podem ser adicionados em menus suspensos adicionando um link personalizado e adicionando dropdown-header , dropdown-divider ou dropdown-item-text na entrada de classes CSS . Nota: Isso removerá o href do item e o alterará para <span> para cabeçalhos ou <div> para divisórias.

Atalho de edição ausente na visualização do personalizador

De acordo com a documentação de wp_nav_menu() é necessário fornecer uma instância da classe do andador personalizado para aplicar o andador personalizado ao menu. Como a instância não é serializável por JSON, isso fará com que o atalho de edição do menu não apareça na visualização do Personalizador. Para corrigir isso, faça o seguinte:

Forneça a string do nome da classe em vez da instância da classe como valor para a chave 'walker' na matriz de argumentos do wp_nav_menu,

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
-    'walker'          => new WP_Bootstrap_Navwalker(),
+    'walker'          => 'WP_Bootstrap_Navwalker',
) );

adicione novamente a instância da classe adicionando este filtro ao seu functions.php

 function slug_provide_walker_instance ( $ args ) {
    if ( isset ( $ args [ ' walker ' ] ) && is_string ( $ args [ ' walker ' ] ) && class_exists ( $ args [ ' walker ' ] ) ) {
        $ args [ ' walker ' ] = new $ args [ ' walker ' ];
    }
    return $ args ;
}
add_filter ( ' wp_nav_menu_args ' , ' slug_provide_walker_instance ' , 1001 );