15 Melhores Tutoriais para Dominar Menus de Navegação do WordPress

Você está procurando os melhores tutoriais para trabalhar com menus de navegação do WordPress? Os menus de navegação do WordPress permitem que você personalize e gerencie facilmente os menus em seu site. Neste artigo, mostraremos os melhores tutoriais para dominar os menus de navegação do WordPress.

Como este é um artigo extenso, adicionamos uma lista de conteúdos para facilitar a navegação.

1. Primeiros Passos com Menus de Navegação do WordPress
2. Adicionar Ícones de Mídias Sociais aos Menus do WordPress
3. Mostrar Menus Diferentes para Usuários Conectados no WordPress
4. Adicionar Lógica Condicional aos Menus de Navegação
5. Estilizando Menus de Navegação do WordPress
6. Adicionar Ícones de Imagem com Menus de Navegação no WordPress
7. Adicionar Menus de Navegação Personalizados no WordPress
8. Adicionar Menu de Painel Deslizante em Temas do WordPress
9. Criando um Menu Responsivo Pronto para Dispositivos Móveis no WordPress
10. Adicionar um Menu Responsivo em Tela Cheia no WordPress
11. Adicionando Descrição com Menus de Navegação no WordPress
12. Como Adicionar Tópicos em Menus de Navegação do WordPress
13. Como Adicionar Menus de Navegação na Barra Lateral do WordPress
14. Adicionar Menu de Navegação do WordPress em Posts e Páginas
15. Adicionar Links NoFollow em Menus de Navegação do WordPress

1. Primeiros Passos com Menus de Navegação do WordPress

Em design web, um menu de navegação é uma lista de links que permite aos visitantes do seu site visitar diferentes páginas e seções em seu site. Ele ajuda os usuários a navegar pelo seu site, daí o nome menu de navegação.

O WordPress vem com uma ferramenta integrada que permite criar e usar menus em seu site. Essa ferramenta está localizada na página Aparência » Menus em sua área de administração do WordPress.

Aqui você pode criar menus adicionando itens da coluna da esquerda para a direita. Você pode adicionar qualquer post, página, categorias e links personalizados do WordPress aos seus menus.

Para instruções detalhadas, consulte nosso guia para iniciantes sobre como adicionar menus de navegação no WordPress.

2. Adicionar Ícones de Mídias Sociais aos Menus do WordPress

Os menus do WordPress também podem ser usados para adicionar botões de mídias sociais ao seu site. Isso permite que você atualize ícones facilmente, os reorganize e adicione novos ícones de mídias sociais sempre que desejar.

A maneira mais fácil de fazer isso é usando o plugin Menu Social Icons. Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, acesse a página Aparência » Menus. Crie um novo menu social e, em seguida, na aba de links personalizados na coluna da esquerda.

Você verá os ícones de mídias sociais abaixo dos campos de texto do link e URL. Tudo o que você precisa fazer é clicar em um ícone de mídia social e inserir a URL do seu perfil social. Quando terminar, clique no botão adicionar ao menu.

Repita este processo para todos os perfis de mídias sociais que você deseja adicionar. Assim que terminar, selecione um local para o menu e clique no botão salvar menu.

Para instruções mais detalhadas, consulte nosso guia sobre como adicionar ícones de mídias sociais aos menus do WordPress.

3. Mostrar Menus Diferentes para Usuários Logados no WordPress

Se você gerencia um site de membros no WordPress, talvez queira exibir menus diferentes para seus usuários logados. Veja como você pode conseguir isso facilmente.

Primeiro, você precisa criar dois menus diferentes. Um para seus usuários logados e outro para usuários que não estão logados. Você pode nomear esses menus como logado e deslogado.

Em seguida, você precisa adicionar este código ao arquivo functions.php do seu tema ou a um plugin específico do site.

function my_wp_nav_menu_args( $args = '' ) {

if( is_user_logged_in() ) { 
	$args['menu'] = 'logged-in';
} else { 
	$args['menu'] = 'logged-out';
} 
	return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

Isso é tudo. Agora você pode testar seus menus de navegação em ação.

Para instruções mais detalhadas, veja nosso tutorial sobre como exibir menus diferentes para usuários logados no WordPress.

4. Adicionar Lógica Condicional aos Menus de Navegação

Quer alterar menus com base em certas condições? Como um menu diferente na página inicial, ou ocultar um item em posts individuais. Veja como você pode conseguir isso no WordPress.

Primeiro, você precisa instalar e ativar o plugin If Menu.

Após a ativação, visite a tela Aparência » Menus e clique em um item de menu que você deseja editar. Você notará uma nova opção para 'Habilitar lógica condicional'.

Marcar esta opção mostrará duas opções de menu suspenso. Você pode selecionar exibir ou ocultar um menu se ele corresponder a certas condições. Por exemplo, ocultar um item de menu se um usuário for um administrador ou exibir um item de menu apenas se um usuário estiver visualizando um post individual.

Para instruções mais detalhadas, consulte nosso artigo sobre como adicionar lógica condicional a menus do WordPress.

5. Estilizando Menus de Navegação do WordPress

O tema do seu WordPress controla a aparência dos menus de navegação em seu site. Usando CSS, você pode personalizar a aparência dos menus de navegação.

A maneira mais fácil de fazer isso é usando o plugin CSS Hero. É um plugin premium do WordPress que permite personalizar qualquer tema do WordPress sem escrever uma única linha de código (sem necessidade de HTML ou CSS). Veja nossa revisão do CSS Hero para saber mais.

Você também pode estilizar seus menus de navegação escrevendo CSS manualmente. Para instruções detalhadas, consulte nosso guia sobre como estilizar menus de navegação do WordPress.

6. Adicionar Ícones de Imagem com Menus de Navegação no WordPress

Muitos sites populares usam ícones de imagem ao lado de seus menus de navegação para torná-los mais notáveis. Veja como você pode adicionar ícones de imagem com menus de navegação no WordPress.

Primeiro, você precisa instalar e ativar o plugin Menu Image. Após a ativação, vá para Aparência » Menus. Lá você verá uma opção para adicionar imagens a cada item do seu menu existente.

Você também pode usar CSS para adicionar ícones de imagem. Para instruções detalhadas, consulte nosso guia sobre como adicionar ícones de imagem com menus de navegação no WordPress.

7. Adicionar Menus de Navegação Personalizados no WordPress

A maioria dos temas gratuitos e premium do WordPress vêm com locais predefinidos para exibir seus menus de navegação. No entanto, você também pode adicionar menus de navegação personalizados aos seus temas.

Primeiro, você precisará registrar seu novo menu de navegação adicionando este código ao arquivo functions.php do seu tema.

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Este código criará o ‘Meu Menu Personalizado’ para o seu tema. Você pode ver isso editando um menu na página Aparência » Menus.

Para exibir seu menu personalizado, você precisará adicionar este código ao seu tema onde deseja exibir o menu.

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

Para instruções mais detalhadas, consulte nosso artigo sobre como adicionar menus de navegação personalizados em temas do WordPress.

8. Adicionar Menu de Painel Deslizante em Temas do WordPress

Quer que o menu de navegação do seu site apareça em um painel deslizante? Usar painéis deslizantes torna seus menus mais interativos, menos intrusivos e divertidos, especialmente em dispositivos móveis.

No entanto, para adicioná-los, você precisará de um entendimento de nível médio de JavaScript, temas do WordPress e CSS.

Para instruções passo a passo, consulte nosso guia sobre como adicionar um menu de painel deslizante em temas do WordPress.

9. Criando um Menu Responsivo para WordPress Pronto para Dispositivos Móveis

A maioria dos temas do WordPress são responsivos e vêm com menus de navegação prontos para dispositivos móveis. No entanto, se o seu tema não gerencia bem os menus de navegação em dispositivos móveis, isso afeta a experiência do usuário nesses dispositivos.

Felizmente, existem algumas maneiras fáceis de adicionar menus responsivos prontos para dispositivos móveis sem escrever nenhum código.

Primeiro, você precisa instalar e ativar o plugin Responsive Menu.

Após a ativação, você precisa clicar em 'Responsive Menu' na barra de administração do seu WordPress para configurar as opções do plugin.

Simplesmente selecione uma largura após a qual o menu responsivo para dispositivos móveis deve ser visível. Depois disso, você precisa selecionar um menu de navegação existente.

Não se esqueça de clicar no botão 'Update Options' para salvar suas configurações. É tudo! Agora você pode visitar seu site e redimensionar a tela do navegador para ver o menu responsivo para dispositivos móveis.

Existem muitas outras maneiras de adicionar um menu responsivo para dispositivos móveis. Como um menu que aparece com um efeito de alternância, um menu deslizante e um menu de seleção responsivo. Saiba mais sobre todos eles em nosso guia sobre como criar um menu responsivo do WordPress pronto para dispositivos móveis.

10. Adicionar um Menu Responsivo em Tela Cheia no WordPress

Você já notou como alguns sites populares usam um menu de navegação em tela cheia? Geralmente, isso requer um uso criativo de JavaScript e CSS. Felizmente, você pode fazer isso no WordPress sem escrever nenhum código.

Primeiro, você precisa instalar e ativar o DC – Full Screen Responsive Menu. Após a ativação, você precisa visitar a página Aparência » DC Fullscreen Menu para configurar as opções do plugin.

Aqui você pode escolher um menu, cor de fundo e de texto, e fonte do Google para o seu menu em tela cheia.

Clique no botão enviar para salvar suas configurações. Agora você pode visitar seu site para ver seu menu responsivo em tela cheia em ação.

Para mais informações sobre este tópico, veja nosso guia sobre como adicionar um menu responsivo em tela cheia no WordPress.

11. Adicionando Descrição com Menus de Navegação no WordPress

Os menus de navegação do WordPress geralmente são apenas links de texto mostrando o rótulo do link ou texto âncora. E se você quisesse adicionar uma pequena descrição ou slogan para cada item em seu menu de navegação?

Felizmente, o WordPress vem com funcionalidade integrada para adicionar descrição a cada item em seus menus de navegação.

Primeiro, você precisará habilitar o item de descrições. Clique no botão Opções de Tela no canto superior direito da tela.

Isso mostrará uma lista de caixas e opções que você pode habilitar. Você precisa marcar a caixa ao lado de Descrição.

Agora role para baixo e clique em um item de menu para editá-lo e você verá uma opção para adicionar descrição.

Adicione sua descrição e clique no botão salvar menu.

Se o seu tema suportar descrições de menu, você poderá vê-las imediatamente. Caso contrário, você terá que editar os arquivos do seu tema para exibir as descrições.

Para instruções detalhadas, consulte nosso guia sobre como adicionar descrições de menu no seu tema do WordPress.

12. Como Adicionar Tópicos em Menus de Navegação do WordPress

Frequentemente nos perguntam como adicionar tópicos de blog aos menus de navegação no WordPress. Muitos iniciantes assumem que precisam criar páginas para cada tópico para adicioná-los aos menus.

O que você realmente precisa são categorias. Categorias e tags são taxonomias nativas do WordPress que permitem organizar o conteúdo em tópicos relevantes.

Adicione seus artigos em categorias relevantes e depois vá para a página Aparência » Menus. Clique na aba de categorias para expandi-la e selecione as categorias que você deseja exibir em seus menus de navegação.

Para mais detalhes, veja nosso artigo sobre como adicionar tópicos em menus de navegação do WordPress.

13. Como Adicionar Menus de Navegação na Barra Lateral do WordPress

Os temas do WordPress geralmente têm menus de navegação na parte superior ou inferior. No entanto, você também pode criar e adicionar menus à barra lateral do seu WordPress.

Simplesmente visite a página Aparência » Widgets e adicione o widget 'Menu Personalizado' à sua barra lateral. Para instruções detalhadas, veja nosso guia sobre como adicionar e usar widgets no WordPress.

Após adicionar o widget a uma barra lateral, você pode selecionar um menu na opção de lista suspensa. Não se esqueça de clicar no botão salvar para armazenar suas configurações.

14. Adicionar Menu de Navegação do WordPress em Posts e Páginas

Geralmente, os menus de navegação são exibidos no cabeçalho ou na barra lateral de um site. No entanto, às vezes você pode querer adicionar um menu dentro de um post ou página do WordPress. Veja como você faria isso.

Primeiro, você precisa instalar e ativar o plugin Menu Shortcode. Após a ativação, edite a postagem ou página onde você deseja exibir seu menu e adicione este shortcode:

[listmenu menu="Seu Nome do Menu"]

Não se esqueça de substituir 'Seu Nome do Menu' pelo nome do seu próprio menu de navegação. Salve ou publique sua postagem e, em seguida, clique no botão de visualização.

Para mais detalhes, veja nosso guia sobre como adicionar menu de navegação do WordPress em posts ou páginas.

15. Adicionar Links NoFollow em Menus de Navegação do WordPress

Normalmente, o menu de navegação do seu site contém links para suas próprias postagens e páginas. No entanto, às vezes você pode precisar adicionar um link para um site externo.

Muitos especialistas em SEO recomendam adicionar o atributo rel="nofollow" a links externos. Veja como você adicionará o atributo nofollow a links em menus de navegação do WordPress.

Primeiro, você precisa visitar a página Aparência » Menus e, em seguida, clicar no botão Opções de Tela no canto superior direito da tela.

Isso abrirá um menu onde você precisará marcar as caixas ao lado de Relação do Link (XFN) e Opções de Destino do Link.

Agora clique no item de menu que você deseja editar. Você notará duas novas opções, Relação do Link e Abrir link em uma nova janela/aba.

Você precisa inserir nofollow na opção de relação do link. Você também pode marcar a opção abrir link em nova janela/aba, se desejar.

Clique no botão salvar menu para armazenar suas alterações. Agora este link específico em seu menu de navegação do WordPress terá o atributo rel="nofollow" adicionado.

Para instruções mais detalhadas, veja nosso tutorial sobre como adicionar links nofollow nos menus de navegação do WordPress.

Esperamos que este artigo tenha ajudado a encontrar os melhores tutoriais para dominar os menus de navegação do WordPress. Você também pode querer ver nossa lista de 24 plugins essenciais do WordPress para sites de negócios.

Se você gostou deste artigo, então por favor inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e Facebook.