Como registrar uma posição de menu no WordPress

Salve Salve Incuber beleza? Aqui é o Paulo Felipe com mais um tutorial para você.

Nesse tutorial você aprenderá como registrar uma posição de menu no WordPress e como inserir esse menu no seu tema WordPress.

Muitas vezes ficamos presos nas funcionalidades que o tema utilizado oferece, porém com um pouco de estudo você consegue customizar esse tema e adaptá-lo para as suas necessidades, se a sua dúvida nesse momento é “Como eu faço para inserir uma posição de menu customizado em meu site WordPress” continue comigo aqui porquê esse tutorial é especialmente para você!

Aperte o play e bons estudos!

Para complementar a aula em vídeo eu criei um tutorial passo-a-passo para mostrar como realizar o processo e também facilitar para eu disponibilizar os códigos necessários para concluir essa tarefa e facilitar na agilidade do procedimento.

Como registrar uma posição de menu no WordPress

Conheça o processo para registrar uma nova posição de menu no painel do WordPress para que apareça a opção de marcar uma posição exclusiva para um determinado menu, por padrão o WP já vem com a posição de “Menu Principal” criada e quando você marca essa posição para um menu, ele normalmente aparece no topo da página.

A proposta desse tutorial é realizarmos esse mesmo processo porém para outras posições do site, oferecendo assim mais facilidade ao gerenciar os menus do seu site.

A primeira etapa do processo é abrir o arquivo functions.php “/wp-content/themes/seu-tema/functions.php” do seu tema e pesquisar pela função “register_nav_menus“.

A função “register_nav_menus” é utilizada para registrar todas as posições de menus contidas no site, para esse tutorial nós vamos criar uma posição de menu no footer do nosso site, segue o como o código da sua “register_nav_menus” deve ficar:

register_nav_menus (
  array (
      'main-menu' => __( 'Main Menu', 'odin' ),
            'footer-menu-1' => __( 'Menu posição 01 Footer', 'odin' )
  )
);

Você já encontrará a opção ‘main-menu’ => __( ‘Main Menu’, ‘odin’ ) pois ela é padrão do WP e é aqui onde é registrado o menu principal do site.

Lembrando que ‘footer-menu-1‘ é o nome que será utilizado para chamar o menu no tema, busque sempre colocar nomes condizentes com o menu.

*No código acima o parâmetro ‘odin‘ é o “Text Domain” normalmente encontrado dentro do arquivo style.css na pasta raiz do seu tema. Porém você pode apenas copiar esse parâmetro do Main Menu para a sua nova posição.

Maravilha! Você já registrou o seu menu, para conferir basta ir em “Aparência/Menus” no painel do seu WordPress e conferir a nova posição.

Finalizamos aqui a primeira parte do tutorial, caso você tenha alguma dúvida, deixe nos comentários que eu ajudarei.

Exibir menu personalizado em tema WordPress

Depois de registrar uma nova posição de menu no painel, nós temos que fazer com que o menu apareça na página. No meu exemplo eu vou mostrar o menu no rodapé.

Para o menu funcionar perfeitamente integrado com as opções do painel do WordPress, como por exemplo ter a opção de menu dropdown, colocar uma classe no item do menu ou pedir para o link abrir em uma nova aba, essas opções são controladas pelo “Nav Walker” esse é o arquivo responsável pelas opções avançadas de um menu no painel do WP, cada tema tem o seu arquivo “Nav Walker”, peço então que você siga um dos passos abaixo para conseguir o seu arquivo Nav Walker.

Modo 01 – Pesquise na documentação do seu tema se ele tem o Nav Walker.

Modo 02 – Abra o arquivo header.php “wp-content/themes/seu-tema/header.php” e pesquise por Walker. Segue um print do main-menu do tema Odin e como é chamado o Nav Walker:

Modo 03 – Você pode baixar o arquivo padrão do Bootstrap para Nav Walker, segue o link do github para você baixar o seu Nav Walker:
https://github.com/wp-bootstrap/wp-bootstrap-navwalker/blob/master/class-wp-bootstrap-navwalker.php

*Eu vou fazer o modo 3 pois ele funciona para qualquer tema.

Baixe o arquivo class-wp-bootstrap-navwalker.php e insira-o na pasta raiz do seu tema “wp-content/themes/seu-tema/“

Depois de inserir o arquivo na raiz do tema você precisa importar esse arquivo para o WordPress, para isso abra o arquivo functions.php “/wp-content/themes/seu-tema/functions.php” do seu tema e insira o seguinte código:

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

No código acima estamos mostrando o caminho de onde está o arquivo class-wp-bootstrap-navwalker.php para que assim o WordPress reconheça as suas funcionalidades.

O layout do footer que irei utilizar é em 3 colunas, eu vou inserir o menu na primeira coluna. No seu caso, você define qual será o local do seu tema que o menu irá aparecer.

Se você for me acompanhar então abra o arquivo footer.php “wp-content/themes/seu-tema/footer.php” e insira o código abaixo no local desejado:

<?php
    wp_nav_menu(
        array(
            'theme_location' => 'footer-menu-1',
            'depth' => 2,
            'container' => false,
            'menu_class' => 'item-menu',
            'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
            'walker' => new WP_Bootstrap_Navwalker()
        )
    );
?>

Vamos entender um pouco o código acima:

Em resumo o código está falando assim – “WP pegue o menu que foi marcado na posição footer-menu-1 e mostre-o aqui”

theme_location – Nome da posição que você criou na primeira parte desse tutorial;

depth: Quantos níveis de hierarquia devem ser incluídos (permite submenus);

menu_class – Você pode inserir uma classe CSS para o menu a assim estilizar como desejar;

‘fallback_cb’ e ‘walker’  – Carregando as opções de menu do arquivo class-wp-bootstrap-navwalker.php

Segue o código completo do footer.php que estou utilizando como exemplo:

<footer id="footer" role="contentinfo">
    <div class="container">
        <div class="row">

            <!-- Posição 01 Footer -->
            <div class="col-xs-6 col-sm-3 col-md-3">
                <div class="menu-footer"> <!-- Classe para facilitar nos estilos CSS -->
                    <?php
                    wp_nav_menu(
                        array(
                            'theme_location' => 'footer-menu-1',
                            'depth' => 2,
                            'container' => false,
                            'menu_class' => 'item-menu',
                            'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
                            'walker' => new WP_Bootstrap_Navwalker()
                        )
                    );
                    ?>
                </div>
            </div>

            <!-- Posição 02 Footer -->
            <div class="col-xs-6 col-sm-3 col-md-3">
                Posição 02
            </div>

            <!-- Posição 03 Footer -->
            <div class="col-xs-12 col-sm-3 col-md-3">
                Posição 03
            </div>

            <!-- Posição 04 Footer -->
            <div class="col-xs-12 col-sm-3 col-md-3">
                Posição 04
            </div>
        </div>
    </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

Para testar se deu certo, basta criar um menu e marcar ele na posição que você criou, atualizar a página e correr pro abraço! ou para o comentário caso apareça alguma dúvida.

Segue um print do meu menu no rodapé mostrando dinâmico: *Sem CSS

Condições para sair da postagem :

• Se você ficou com alguma dúvida ou deseja acrescentar algum ponto no tutorial deixe nos comentários;
• Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também,
• Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Um abraço e até o próximo post!