Como Adicionar Menus de Navegação Personalizados em Temas do WordPress

Na WPBeginner, ajudamos inúmeros leitores a personalizar seus sites WordPress para melhorar a experiência do usuário, impulsionar o branding e gerar conversões. E vimos que, quando feito corretamente, um menu de navegação exclusivo pode ajudar a aumentar o engajamento e manter as pessoas em seu site por mais tempo.

O problema é que todos os temas do WordPress têm locais definidos onde você pode exibir um menu de navegação, então mudar isso pode ser complicado. Isso é especialmente verdade se você for um iniciante, pois modificar os arquivos do tema é um processo delicado.

Quando você está usando um tema de blocos, pode fazer isso com o Editor de Site Completo. Mas, em nossa experiência, existem opções melhores que funcionarão para todos os tipos de temas.

Por exemplo, se você deseja personalizações avançadas, pode usar um poderoso construtor de páginas como o SeedProd. Ou, se você está procurando uma maneira simples de usar código personalizado, o WPCode é, de longe, a melhor escolha.

Neste artigo, mostraremos como adicionar um menu de navegação personalizado a qualquer área do seu tema WordPress. Abordaremos 3 opções diferentes para que você possa escolher o tutorial certo para suas necessidades.

Por que adicionar menus de navegação personalizados em temas WordPress?

Um menu de navegação é uma lista de links que apontam para áreas importantes do seu site. Eles facilitam para os visitantes encontrarem conteúdo interessante, o que pode aumentar as visualizações de página e reduzir a taxa de rejeição no WordPress.

A localização exata do seu menu variará com base no seu tema WordPress. A maioria dos temas tem várias opções, para que você possa criar menus diferentes e exibi-los em locais diferentes.

Para ver onde você pode exibir menus no seu tema WordPress atual, basta ir para Aparência » Menus e, em seguida, dar uma olhada na seção 'Local de exibição'.

A imagem a seguir mostra os locais suportados pelo tema WordPress Astra.

Às vezes, você pode querer exibir um menu em uma área que não está listada como um 'Local de exibição' no seu tema.

Com isso em mente, vamos dar uma olhada em como adicionar um menu de navegação personalizado a qualquer área do seu tema WordPress. Simplesmente use os links rápidos abaixo para pular para o método de sua preferência:

• Método 1: Usando o Editor de Site Completo (Apenas Temas Baseados em Blocos)
• Método 2: Usando um Plugin de Page Builder (Funciona Com Todos os Temas)
• Method 3: Create a Custom Navigation Menu in WordPress Using Code (Advanced)

Método 1: Usando o Editor de Site Completo (Apenas Temas Baseados em Blocos)

Se você estiver usando um tema de blocos como o ThemeIsle Hestia Pro, você poderá adicionar um menu de navegação personalizado usando a Edição de Site Completo (FSE) e o editor de blocos.

Para mais detalhes, você pode ver nosso artigo sobre os melhores temas de edição de site completo do WordPress.

Este método não funciona com todos os temas e não permite personalizar todas as partes do menu. Se você deseja adicionar um menu totalmente personalizado a qualquer tema do WordPress, recomendamos o uso de um plugin de page builder em vez disso.

Se você estiver usando um tema baseado em blocos, vá para Aparência » Editor.

Por padrão, o editor de site completo exibe o modelo inicial do seu tema, mas você pode adicionar um menu de navegação a qualquer área.

Para ver todas as opções disponíveis, basta selecionar 'Modelos', 'Padrões' ou 'Páginas'.

Agora você pode clicar no modelo, parte do modelo ou página onde deseja adicionar um menu de navegação personalizado.

O WordPress agora mostrará uma prévia do design. Para editar este modelo, clique no pequeno ícone de lápis.

O próximo passo é adicionar um bloco de Navegação à área onde você deseja exibir seu menu.

No canto superior esquerdo, clique no botão azul ‘+’.

Agora, digite ‘Navegação’ na barra de pesquisa.

Quando o bloco ‘Navegação’ aparecer, basta arrastá-lo e soltá-lo em seu layout.

Em seguida, clique para selecionar o bloco de Navegação.

Se você já criou o menu que deseja exibir, clique para selecionar o bloco de Navegação. No menu à direita, clique no ícone de três pontos ao lado de ‘Menu’.

Você pode então escolher um menu no menu suspenso.

Outra opção é criar um menu dentro do editor de site completo adicionando páginas, posts, links personalizados e muito mais. Para adicionar itens ao novo menu, basta clicar no ícone ‘+’.

Isso abre um pop-up onde você adiciona qualquer post ou página e decide se esses links devem abrir em uma nova aba.

Você também pode adicionar uma barra de pesquisa ao menu do WordPress, adicionar ícones de mídia social e muito mais. No pop-up, basta digitar o bloco que você deseja adicionar ao menu e selecionar a opção correta quando ela aparecer.

Você pode então configurar este bloco usando as configurações na mini barra de ferramentas e no menu à direita. Simplesmente repita essas etapas para adicionar mais itens ao menu.

Quando estiver satisfeito com a aparência do menu, basta clicar no botão ‘Salvar’.

Seu site agora estará usando o novo modelo, e os visitantes poderão interagir com seu menu de navegação personalizado.

Método 2: Usando um Plugin de Page Builder (Funciona Com Todos os Temas)

O editor de site completo permite que você adicione menus a temas baseados em blocos. No entanto, se você quiser adicionar um menu avançado e totalmente personalizável a qualquer tema do WordPress, você precisará de um plugin de construtor de páginas.

SeedProd é o melhor plugin de construtor de páginas WordPress do mercado que permite personalizar todas as partes do seu menu de navegação.

Temos vasta experiência usando esta ferramenta para construir menus de navegação personalizados, landing pages e muito mais. Para mais detalhes, confira nossa análise completa do SeedProd.

Quando se trata de páginas, o SeedProd vem com mais de 350 templates projetados profissionalmente que você pode usar como ponto de partida. Após escolher um template, você pode adicionar um menu de navegação personalizado ao seu site usando o bloco Nav Menu pronto do SeedProd.

Primeiro, você precisa instalar e ativar o plugin SeedProd. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin WordPress.

Após ativar o plugin, o SeedProd solicitará sua chave de licença.

Você pode encontrar esta informação em sua conta no site da SeedProd. Após inserir a chave, clique no botão ‘Verificar Chave’.

Assim que terminar, vá para SeedProd » Landing Pages e clique no botão ‘Adicionar Nova Landing Page’.

Agora você pode escolher um modelo para sua página personalizada.

Para ajudar você a encontrar o design certo, todos os modelos da SeedProd são organizados em diferentes tipos de campanha, como em breve e campanhas de captação de leads. Você pode até usar os modelos da SeedProd para melhorar sua página 404.

Para dar uma olhada mais de perto em qualquer design, basta passar o mouse sobre esse modelo e clicar no ícone da lupa.

Quando encontrar um design que deseja usar, clique em ‘Escolher Este Modelo’.

Estamos usando o modelo ‘Página de Vendas Black Friday’ em todas as nossas imagens, mas você pode usar qualquer modelo que desejar.

Após escolher um modelo, digite um nome para essa página personalizada. O SeedProd criará automaticamente um URL com base no título da página, mas você pode alterar esse URL para o que quiser.

Por exemplo, você pode adicionar palavras-chave relevantes para ajudar os mecanismos de busca a entender do que se trata a página. Isso pode melhorar seu SEO para WordPress e ajudar o mecanismo de busca a mostrar a página para pessoas que procuram conteúdo como o seu.

Após inserir essas informações, clique no botão ‘Salvar e Começar a Editar a Página’.

A maioria dos modelos já contém alguns blocos, que são os componentes principais de todos os layouts de página do SeedProd.

Para personalizar um bloco, basta clicar para selecioná-lo no editor de páginas.

A barra de ferramentas do lado esquerdo mostrará todas as configurações desse bloco. Por exemplo, na imagem abaixo, estamos alterando o texto dentro de um bloco de ‘Título’.

Você pode formatar o texto, alterar seu alinhamento, adicionar links e muito mais usando as configurações no menu do lado esquerdo.

Se você selecionar a aba ‘Avançado’, terá acesso a ainda mais configurações. Por exemplo, você pode fazer o bloco se destacar realmente adicionando sombras de caixa e animações CSS.

Para adicionar novos blocos ao seu design, basta encontrar qualquer bloco no menu do lado esquerdo e arrastá-lo para a página. Se você quiser excluir um bloco, clique para selecioná-lo e use o ícone da lixeira.

Como queremos criar um menu de navegação personalizado, arraste um bloco de ‘Menu de Navegação’ para a página.

Isso cria um menu de navegação com um único item padrão ‘Sobre’.

Agora você pode criar um novo menu dentro do editor do SeedProd ou escolher um menu que você já criou no painel do WordPress.

Para mostrar um menu que você criou anteriormente, clique no botão ‘WordPress Menu’. Agora você pode abrir o menu suspenso ‘Menus’ e escolher qualquer opção da lista.

Depois disso, você pode alterar o tamanho da fonte, o alinhamento do texto e mais usando as configurações no menu do lado esquerdo.

Se você quiser criar um novo menu dentro do SeedProd, selecione o botão ‘Simple’.

Em seguida, clique para expandir o item ‘About’ que o SeedProd cria por padrão.

Isso abre alguns controles onde você pode alterar o texto e adicionar a URL para a qual o item do menu será vinculado.

Por padrão, o link será ‘dofollow’ e abrirá na mesma janela do navegador. Você pode alterar essas configurações usando as caixas de seleção na seção ‘URL Link’.

Na imagem a seguir, estamos criando um link ‘nofollow’ que abrirá em uma nova janela. Para mais informações sobre este tópico, por favor, consulte nosso guia para iniciantes sobre links nofollow.

Para adicionar mais itens ao menu, basta clicar no botão ‘Add New Item’.

Você pode então personalizar cada um desses itens seguindo o mesmo processo descrito acima.

O menu do lado esquerdo também tem configurações que alteram o tamanho da fonte e o alinhamento do texto.

Você pode até criar um divisor, que aparecerá entre cada item do menu.

Depois disso, vá em frente e mude para a aba ‘Advanced’. Aqui, você pode alterar as cores, espaçamento, tipografia e outras opções avançadas do menu.

À medida que você faz alterações, a prévia ao vivo será atualizada automaticamente, para que você possa experimentar diferentes configurações e ver o que fica bom no seu design.

Por padrão, o SeedProd exibe o mesmo menu em dispositivos móveis e de desktop. No entanto, dispositivos móveis geralmente têm telas muito menores em comparação com computadores desktop.

Com isso em mente, você pode querer criar um menu separado para exibir em dispositivos móveis. Por exemplo, você pode usar um layout vertical para que os usuários de dispositivos móveis não precisem rolar para os lados. Você também pode querer exibir menos links em smartphones e tablets.

Para criar um menu pronto para dispositivos móveis, basta projetar o menu seguindo o mesmo processo descrito acima. Em seguida, selecione a aba 'Avançado' e clique para expandir a seção 'Visibilidade do Dispositivo'.

Agora você pode ativar o controle deslizante 'Ocultar no Desktop'.

Agora, o SeedProd exibirá este menu apenas para usuários de dispositivos móveis.

Quando você estiver satisfeito com a aparência do seu menu personalizado, é hora de publicá-lo.

Simplesmente clique na seta suspensa ao lado de ‘Salvar’ e, em seguida, selecione ‘Publicar’.

Agora, se você visitar seu blog WordPress, verá o menu de navegação personalizado em ação.

Método 3: Crie um Menu de Navegação Personalizado no WordPress Usando Código (Avançado)

Se você não quiser configurar um plugin de construtor de páginas, poderá adicionar um menu de navegação personalizado usando código. Você frequentemente encontrará guias com instruções sobre como adicionar trechos de código personalizados ao arquivo functions.php do seu tema.

No entanto, não recomendamos este método, pois um pequeno erro no seu código pode causar uma série de erros comuns do WordPress ou até mesmo quebrar seu site completamente. Você também perderá o código personalizado ao atualizar seu tema do WordPress.

É por isso que recomendamos o uso do WPCode. É a maneira mais fácil e segura de adicionar código personalizado no WordPress sem ter que editar nenhum arquivo principal do WordPress.

A primeira coisa que você precisa fazer é instalar e ativar o plugin gratuito WPCode. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, vá para Snippets de Código » Adicionar Snippet no seu painel do WordPress.

Aqui, você verá todos os snippets prontos que pode adicionar ao seu site.  Estes incluem um snippet que permite desativar completamente os comentários, fazer upload de tipos de arquivo que o WordPress normalmente não suporta, desativar páginas de anexos, e muito mais.

Para criar seu próprio snippet, passe o mouse sobre ‘Adicionar Seu Código Personalizado (Novo Snippet)’ e clique no botão ‘+ Adicionar Snippet Personalizado’.

Em seguida, você precisa escolher um tipo de código na lista de opções que aparecem na tela. Para este tutorial, selecione ‘Snippet PHP’ como o tipo de código.

Você será direcionado para a página Criar Snippet Personalizado.

Para começar, insira um título para o snippet de código personalizado. Pode ser qualquer coisa que ajude você a identificar o snippet no seu painel do WordPress.

Depois de fazer isso, simplesmente cole o seguinte snippet no editor de código:

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

Isso adicionará um novo local de menu ao seu tema chamado ‘Meu Menu Personalizado’. Para usar um nome diferente, basta ajustar o snippet de código.

Se você quiser adicionar mais de um menu de navegação personalizado ao seu tema, basta adicionar uma linha extra ao trecho de código.

Por exemplo, aqui estamos adicionando dois novos locais de menu ao nosso tema, chamados ‘Meu Menu Personalizado’ e ‘Menu Extra:’

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Depois disso, role até as opções de ‘Inserção’. Se ainda não estiver selecionado, escolha o método ‘Inserção Automática’ para que o WPCode adicione o trecho em todo o seu site.

Em seguida, abra o menu suspenso ‘Localização’ e clique em ‘Executar em Todos os Lugares’.

Agora, você está pronto para rolar até o topo da tela e clicar no alternador ‘Inativo’ para que ele mude para ‘Ativo’.

Finalmente, prossiga e clique em ‘Salvar’ para tornar este trecho ativo.

Depois disso, vá para Aparência » Menus e olhe na área ‘Local de exibição’.

Você deverá ver agora uma nova opção ‘Meu Menu Personalizado’.

Agora você pode prosseguir e adicionar alguns itens de menu ao novo local. Para mais informações, consulte nosso guia passo a passo sobre como adicionar menus de navegação para iniciantes.

Quando estiver satisfeito com seu menu, o próximo passo é adicioná-lo ao seu tema do WordPress.

Adicionando o menu de navegação personalizado ao seu tema WordPress

A maioria dos sites exibe o menu de navegação diretamente abaixo da seção do cabeçalho. Isso significa que o menu é uma das primeiras coisas que os visitantes veem, juntamente com o logotipo do site ou título.

Você pode adicionar o menu de navegação personalizado a qualquer local adicionando algum código ao arquivo de modelo do seu tema.

No painel do WordPress, vá para Aparência » Editor de Arquivos do Tema.

No menu à direita, escolha o modelo onde você deseja adicionar o menu. Por exemplo, se você quiser mostrar o menu de navegação personalizado no cabeçalho do seu site, você normalmente selecionará o arquivo header.php.

Para obter ajuda para encontrar o arquivo de modelo correto, consulte nosso guia sobre como encontrar quais arquivos editar no seu tema WordPress.

Após selecionar o arquivo, você precisará adicionar uma função wp_nav_menu e especificar o nome do seu menu personalizado.

Por exemplo, no seguinte trecho de código, estamos adicionando 'Meu Menu Personalizado' ao cabeçalho do tema:

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

Após adicionar o código, clique no botão 'Atualizar Arquivo' para salvar suas alterações.

Agora, se você visitar seu site, verá o menu personalizado em ação.

Por padrão, seu menu aparecerá como uma lista com marcadores simples.

Você pode estilizar o menu de navegação personalizado para combinar melhor com o seu tema WordPress ou com a identidade visual da sua empresa adicionando código CSS personalizado ao seu site.

Para fazer isso, vá para Aparência » Personalizar.

No personalizador de temas do WordPress, clique em ‘CSS Adicional’.

Isso abre um pequeno editor de código onde você pode digitar algum CSS.

Agora você pode estilizar seu menu usando a classe CSS que você adicionou ao seu template de tema. Em nosso exemplo, esta é .custom_menu_class.

No código a seguir, estamos adicionando margens e preenchimento, definindo a cor do texto para preto e organizando os itens do menu em um layout horizontal:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
	display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 

div.custom-menu-class a {
    color:#000;
}

O personalizador do WordPress será atualizado automaticamente.

Ele mostrará como o menu ficará com o novo estilo.

Se você estiver satisfeito com a aparência do menu, clique em ‘Publicar’ para tornar suas alterações visíveis.

Para mais informações, consulte nosso guia sobre como estilizar menus de navegação do WordPress.

Guias de Especialistas: Faça Mais Com Menus de Navegação do WordPress

Com o WordPress, você pode criar todos os tipos de menus úteis e envolventes. Com isso em mente, aqui estão alguns guias de especialistas para ajudá-lo a aproveitar ainda mais seus menus de navegação:

• Como Adicionar Ícones de Imagem com Menus de Navegação no WordPress
• Como Adicionar Lógica Condicional a Menus no WordPress (Passo a Passo)
• Como Adicionar Descrições de Menu em Seus Temas do WordPress
• Como Adicionar um Menu Responsivo em Tela Cheia no WordPress
• Como Adicionar um Mega Menu no Seu Site WordPress (Passo a Passo)

Esperamos que este guia definitivo tenha ajudado você a aprender como adicionar um menu de navegação personalizado no WordPress. Você também pode querer ver nossos guias sobre como adicionar um botão no menu do cabeçalho do seu WordPress ou como destacar um item de menu no WordPress.

Se você gostou deste artigo, 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 no Facebook.