Criando Menus para seu Tema

Criando Menus para seu Tema

Se você é, ou já foi um usuário do WordPress, você sabe que alguns temas (se não a maioria), costumam habilitar uma opção chamada "Menus", dentro das opções do tema:

Só que... se você observar, o tema que nós criamos, não disponibiliza essa função 🤨

Para que tal função seja habilitada, precisamos fazer algumas pequenas modificações no arquivo functions.php.

O que é um Menu de um tema do WordPress?

Como o próprio nome já diz, um menu nada mais é do que um aglomerado de links, que ajudam o usuário a navegar na página.

Está vendo esses links no cabeçalho direito da página desta lição? Sabe aqueles links de início, conteúdos, quem somos, assinar? Aquilo é um menu.

Caso você estiver na versão mobile deste site, o mesmo menu pode ser encontrado no rodapé da pagina, na seção de links.

Se tratando do WordPress, a própria plataforma foi construída de modo que você (desenvolvedor de temas), possa fazer com que seu usuário gerencie os menus do seu tema, diretamente pelo painel administrativo.

Basicamente, você precisa fazer com que o seu tema, possua suporte ao gerenciamento de menus, de resto, o wordpress vai gerenciar tudo isso para você de forma automática.

Adicionando suporte ao menu no seu tema

O primeiro passo, é se certificar que o seu tema possui suporte a um menu.

Se você está comigo desde o início da jornada, e passou por todas as lições anteriores, verá que dentro do header.php, eu já deixei preparado uma seção chamada links-area que possui um menu com 3 links: Home, Sobre e Serviços.

<section class="links-area">
 <ul>
 <li>Home</li>
 <li>Sobre</li>
 <li>Serviços</li>
 </ul>
</section>

Se você ainda não possui elementos HTML que simulam um menu dentro do seu tema, então crie, pois a partir de agora você vai precisar 🙂

Adicionando suporte ao menu no functions.php

Já era de se esperar, que iríamos usar o functions.php para adicionar suporte ao menu no nosso tema.

Será pelo uso da função register_nav_menus, que o painel do wordpress saberá que o nosso tema possui suporte ao gerenciamento de menus.

Abrindo o nosso arquivo functions.php do nosso tema, vamos criar no final do arquivo a seguinte função:

register_nav_menus(
 array(
 'wp_micilini_header_menu' => 'Header Menu',
 'wp_micilini_footer_menu' => 'Footer Menu'
 )
);

É interessante ressaltar que essa função recebe um array de menus, de modo que podemos declarar quantos menus (estruturas de chave-valor) desejarmos.

Ali dentro do nosso array, criamos uma estrutura de chave e valor, uma chamada de wp_micilini_header_menu que vai representar o menu que será inserido no cabeçalho do nosso tema, e outro chamado de wp_micilini_footer_menu, que é o menu que será inserido no rodapé do tema.

Não esqueça de salvar o seu arquivo, ok?

Só com esses códigos inseridos no functions.php, o wordpress já será capaz de entender que o seu tema oferece suporte ao uso de menus, tanto que se você acessar o painel administrativo, uma nova opção de aparência vai ficar disponível:

Criando novas páginas

Para testar o nosso menu, vamos criar algumas páginas de teste dentro do painel administrativo do wordpress.

Dentro do painel administrativo, no menu esquerdo, selecione a opção Páginas > Adicionar nova.

Dentro do editor de texto, comece adicionando o título que vai representar a sua primeira página. No meu caso, eu escrevi "Home".

Em seguida, basta apenas digitar uma pequena descrição no parágrafo abaixo. No meu caso, eu escrevi "Página de Home".

Por fim, deixe as opções da página padrão (visibilidade: publico, publicar: imediatamente...), e clique no botão Publicar.

Repita essa mesmo processo sempre que quiser adicionar novas páginas.

No meu exemplo, eu vou precisar criar mais duas páginas, uma com o título "Sobre" e outra com "Serviços". Basta repetir o procedimento anterior.

Administrando seus Menus no WordPress

Acessando a página de administração de menus no seu painel administrativo do wordpress (Aparência > Menus).

Será neste local que você vai definir a criação dos seus menus, e em qual estrutura de chave e valor do functions.php, ele será atrelado.

Perceba que no canto inferior direito da figura acima, existem duas opções de local de exibição, que são Header Menu e Footer Menu, justamente aqueles valores que nós criamos no functions.php, está lembrado?

Isso significa que podemos criar um menu personalizado, que será atrelado a um ou mais locais de exibição simultaneamente.

Criando seu primeiro Menu

Para testar a criação de menus, eu comecei criando um nome para o meu menus, chamado de "Header Menu", e selecionei as seguintes opções: "Adicionar novas páginas de nível superior automaticamente" e "Header Menu":

Atenção: Após a criação do seu menu, não se esqueça de clicar no botão Criar Menu.

A opção "Adicionar novas páginas de nível superior automaticamente", faz com que todas as páginas estáticas criadas pelo wordpress, sejam adicionadas automaticamente dentro do seu menu.

Isso evita que você tenha queficar atualizando manualmente seu menu, sempre que for adicionar uma nova página.

Perceba que na figura acima, do lado esquerdo, você terá algumas opções de links que pode adicionar ao seu menu.

Ali, você pode adicionar deste páginas, posts, links personalizados ou categorias, bastando apenas clicar no botão adicionar menu, e organizar tudo isso no card Estrutura do Menu.

É possível também reordenar os itens do seu menu, clicando e arrastando suas posições, como também adicionar menus aninhados dentro de outros (famosos sub-menus):

Observe que na figura acima, dentro do Link Home, nós temos mais duas opções, que são Sobre e Serviços.

Atenção: Após a edição do seu menu, não se esqueça de clicar no botão Salvar Menu.

E também, não se esqueça de criar um novo menu para o Footer Menu, ok?

Adicionando nosso menu ao Header.php

Dentro do arquivo header.php, mais especificamente dentro da seção links-area, vamos excluir todos os elementos HTML ali existentes, e substituir pelo comando wp_nav_menu():

<section class="links-area">
 <?php wp_nav_menu(array(
 'theme_location' => 'wp_micilini_header_menu',
 'depth' => 1,
 ));
 ?>
</section>

A função wp_nav_menu(), é responsável por incluir um determinado tipo de Menu que configuramos no painel administrativo do wordpress.

Ele, por sua vez, recebe um array que contém as configurações do menu que será inserido.

theme_location: é a chave do menu que você definiu no functions.php, que representa o tipo de menu que será inserido.

depth: é o nível de hierarquia que será mostrada no seu menu. use 0para aceitar qualquer hierarquia, 1 para aceitar uma única hierarquia, 2 para aceitar dois níveis de hierarquia.

Se no painel administrativo, você tiver diversos menus aninhados dentro de outros (sub-menus), o parâmetro depth é quem vai delimitar até quantos níveis serão mostrados.

É importante ressaltar que o wp_nav_menu, aceita diversos outros tipos de parâmetros, tais parâmetros que estilizam a forma como o menu será mostrado no HTML, com classes prrsonalizadas, ids personalizados, ou dentro de tags HTML customizadas.

Atenção: Talvez você tenha que criar novos estilos dentro do style.css, de modo que eles consigam estilizar esses sub-menus.

O código abaixo, representa a estrutura HTML que foi adicionada pela função wp_nav_menu():

<ul id="menu-header-menu" class="menu">
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://localhost/minha-primeira-aplicacao/home/">Home</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://localhost/minha-primeira-aplicacao/sobre/">Sobre</a></li>
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://localhost/minha-primeira-aplicacao/servicos/">Serviços</a></li>
</ul>

Adicionando nosso menu ao Footer.php

Agora dentro do arquivo footer.php, nós não chegamos a criar nenhuma estrutura HTML que comporte um menu 🥲

Fica tranquilo, respira, que nós iremos resolver isso agora, editando o arquivo footer.php da seguinte forma:

<footer class="footer-area">
 <section class="copyright">
 Todos os direitos reservados, 2023
 </section>
 <section class="links-footer-area">
 ...
 </section>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Com a nova estrutura criada, chegou a hora de chamarmos a função wp_nav_menu(), passando a chave relacionada ao footer que definimos dentro do functions.php, (assim como fizemos no header.php):

<section class="links-footer-area">
 <?php 
 wp_nav_menu(array(
 'theme_location' => 'wp_micilini_footer_menu',
 'depth' => 1,
 ));
 ?>
</section>

Para saber mais sobre os outros parâmetros da função wp_nav_menu, não deixe de consultar a documentação.

E pronto, o seu menu também estará disponível no rodapé da sua página 😁

Argumentos da função wp-nav-menu()

É importante ressaltar que a função wp-nav-menu() responsável por trazer as configurações do menu possui alguns argumentos adicionais, vejamos cada um deles:

wp_nav_menu(array(
 'theme_location' => 'wp_micilini_header_menu',
 'depth' => 1,
 'container' => 'nav',
 'container_class' => 'menu-container',
 'menu_class' => 'menu-list',
 'menu_id' => 'menu-main',
 'fallback_cb' => 'wp_page_menu',
 'before' => '<span class="before-text">Item: </span>',
 'after' => '<span class="after-text"> - Fim</span>',
 'link_before' => '<span class="link-prefix">',
 'link_after' => '</span>',
));

'theme_location': é a chave do menu que você definiu no functions.php, que representa o tipo de menu que será inserido.  

'depth': é o nível de hierarquia que será mostrada no seu menu.

'container': define o tipo de contêiner que envolverá o menu. Por padrão, o wordpress cria uma div. Você pode definir o valor false para não usar um contêiner, ou quem sabe fornecer uma tag HTML específica.  

'container_class': é o nome da classe que será associada ao container acima.

'menu_class': é o nome da classe que estará associada ao menu <ul>.

'menu_id': é o id que estará associado ao menu <ul>.

'fallback_cb': aqui você pode especificar o nome de uma função de substituição que será chamada se o menu especificado não existir. Você pode criar sua própria função no functions.php.

'before': é o conteúdo que será adicionado antes de cada item do menu.

'after': é o conteúdo que será adicionado depois de cada item do menu.

'link_before': adiciona conteúdo antes do texto do link de cada item de menu.

'link_after': Adiciona conteúdo depois do texto do link de cada item de menu.

Para consultar mais informações sobre os parâmetros adicionais, não deixe de consultar a documentação.  

Conclusão

Nesta lição, você aprendeu a dar suporte ao uso de menus, dentro do seu tema do Wordpress 🚩

Te espero na próxima lição 🙂