Como Adicionar Lógica Condicional a Menus no WordPress (Passo a Passo)

Você já desejou que seu menu do WordPress pudesse ser mais inteligente? Talvez você queira mostrar opções de navegação diferentes para membros logados, ou exibir itens de menu específicos apenas em certas páginas.

Por padrão, o WordPress mostra o mesmo menu estático para todos, o que pode fazer com que seu site pareça genérico e inútil. Trabalhamos com muitos proprietários de sites diferentes que enfrentaram exatamente esse desafio.

Felizmente, menus condicionais podem transformar completamente a experiência do seu usuário.

Quando a navegação do seu WordPress se adapta a diferentes visitantes e contextos, as pessoas encontram o que precisam mais rápido. E você pode guiá-las para as ações que mais importam para o seu negócio.

Neste guia, compartilharemos como adicionar lógica condicional aos seus menus do WordPress. Você aprenderá a criar navegação dinâmica que muda com base em funções de usuário, páginas específicas ou quaisquer outros critérios que você escolher.

Por que Adicionar Lógica Condicional a Menus no WordPress?

A lógica condicional em menus do WordPress permite que você altere automaticamente a navegação do seu site com base em critérios específicos.

Diferente do comportamento padr ilde{o} de um site WordPress, que exibe o mesmo menu est ilde{a}tico para todos, menus condicionais permitem que voc ilde{e} mostre links diferentes com base no usu ilde{a}rio ou na p ilde{a}gina.

Isso permite que você guie os visitantes de forma mais eficaz, mostrando apenas links relevantes para o contexto atual deles.

Por exemplo, voc ilde{e} pode usar regras para criar menus personalizados para usu ilde{a}rios logados. Aqui est ilde{a}o alguns exemplos de casos de uso em diferentes tipos de sites:

• 🛍️ Loja online – Destaque produtos ou ofertas especiais com base no hist ilde{o}rico de navega ilde{a} ilde{a}o ou compra de um cliente.
• 🪪 Site de associa ilde{a} ilde{a}o WordPress – Mostre p ilde{a}ginas e recursos exclusivos apenas para membros logados.
• 🧑‍🏫 Plataforma de aprendizado online – Exiba diferentes categorias de cursos ou li ilde{a} ilde{a}es dependendo do progresso de um aluno.

Você pode pensar nisso como controle de acesso de menu no WordPress.

Com isso em mente, mostraremos como adicionar lógica condicional a menus do WordPress. Aqui estão os tópicos que abordaremos neste tutorial:

Pronto? Vamos começar.

Criando Novos Menus de Navegação no WordPress

O primeiro passo é criar os menus de navegação adicionais que você deseja exibir no WordPress. Depois disso, você pode usar a lógica condicional para decidir quando cada menu será exibido.

A partir daqui, mostraremos como adicionar menus condicionais ao WordPress tanto para Temas Cl ilde{a}ssicos quanto para Temas de Bloco.

Criando Novos Menus de Navegação no WordPress Usando o Editor Clássico

Este método funciona para usuários de temas clássicos.

Para criar novos menus de navegação, basta ir para a página Aparência » Menus no painel do WordPress.

Se você já tem um menu de navegação que usa em seu site para todos os usuários, este pode ser o seu menu padrão.

Em seguida, você precisará clicar no link 'criar um novo menu' para criar um novo item de menu.

Por exemplo, voc ilde{e} pode criar um menu para mostrar a usu ilde{a}rios logados e outro para exibir em uma determinada p ilde{a}gina ou categoria do WordPress.

No lado esquerdo da tela, você pode ver uma lista das páginas do seu site. Simplesmente marque a caixa ao lado de qualquer página que você deseja adicionar ao seu menu e clique no botão ‘Adicionar ao Menu’.

Você também pode arrastar e soltar os itens do menu no lado direito da tela para reorganizá-los.

Mais abaixo na página, você pode escolher um local para exibir seu menu. Mas você não precisa atribuir um local a este menu agora. Faremos isso na próxima etapa.

Não se esqueça de clicar no botão ‘Salvar Menu’ para armazenar suas alterações.

Para mais detalhes sobre como criar menus, voc ilde{e} pode conferir nosso guia para iniciantes sobre como adicionar um menu de navega ilde{a} ilde{a}o no WordPress.

Criando Novos Menus de Navegação no WordPress Usando FSE

Para criar novos menus de navega ilde{a} ilde{a}o em um tema de bloco com Edi ilde{a} ilde{a}o Completa do Site (FSE), voc ilde{e} precisar ilde{a} navegar at ilde{e} Apar ilde{e}ncia extbar} Editor no seu painel do WordPress primeiro.

Isso abrirá o Editor do Site. Dependendo do seu tema, você poderá ver uma lista de opções de menu à esquerda. Simplesmente clique em 'Navegação'.

Se você está se perguntando, estamos usando o tema Twenty-Twenty Three para este guia.

Aqui, você pode ver todos os seus menus existentes.

Para adicionar um novo, basta clicar no ícone + (Mais) ou no botão 'Editar' para gerenciar seus menus visualmente. Em seguida, você verá um prompt mostrando um menu suspenso onde você pode selecionar uma opção.

Para instru ilde{a} ilde{a}es mais detalhadas, voc ilde{e} pode ver nosso guia sobre como adicionar um menu de navega ilde{a} ilde{a}o no WordPress.

Exibindo um Menu Diferente para Usuários Logados no WordPress

Frequentemente é útil exibir menus de navegação diferentes para os usuários, dependendo se eles fizeram login em seu site ou não.

Por exemplo, voc ilde{e} pode incluir links de login e registro para usu ilde{a}rios deslogados e adicionar um link de logout ao seu menu para usu ilde{a}rios logados.

Se você estiver administrando uma loja WooCommerce, poderá incluir itens para seus clientes que são ocultos do público em geral.

Exibindo um Menu Diferente para Usuários Conectados Usando o Editor Clássico

Para come ilde{a}ar, voc ilde{e} precisa instalar e ativar o plugin Conditional Menus.

Vá para Plugins » Adicionar Novo no seu painel de administração do WordPress.

Na página seguinte, use a barra de pesquisa para encontrar o plugin.

Assim que ele aparecer nos resultados, clique em 'Instalar Agora' e, em seguida, clique em 'Ativar' após a conclusão da instalação.

Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você desejará navegar para Aparência » Menus e alternar para a guia ‘Gerenciar Locais’.

A aba Gerenciar Localizações é onde você informa ao seu tema qual menu deve aparecer em áreas específicas do seu site. Aqui, você verá uma lista de locais de menu disponíveis, juntamente com os menus atualmente atribuídos a eles.

Essas loca ilde{a} ilde{a}es podem variar dependendo do tema do WordPress que voc ilde{e} est ilde{a} usando. Por exemplo, em nosso site de demonstra ilde{a} ilde{a}o, a loca ilde{a} ilde{a}o extbar}Menu Prim ilde{a}rio extbar} est ilde{a} atualmente exibindo um menu de navega ilde{a} ilde{a}o chamado extbar}Menu Principal extbar}.

Pense em um ‘Local de Menu’ como uma moldura na sua parede, e o ‘Menu’ como a foto dentro dela. O plugin Conditional Menus permite que você troque automaticamente a foto com base em quem está olhando para ela.

Para mostrar um menu diferente quando certas condições forem atendidas, clique no link ‘+ Menu Condicional’ e escolha outro menu no menu suspenso. Para este tutorial, selecionaremos ‘Menu Logado’.

Em seguida, você precisa clicar no link ‘+ Condições’.

Isso abrirá um pop-up onde você verá várias condições para escolher.

Simplesmente marque a caixa ao lado da opção ‘Usuário logado’ e, em seguida, clique no botão ‘Salvar’.

Agora você pode visitar seu site para ver o menu do usuário logado em ação. Você pode sair do seu site para ver o menu de navegação que é exibido para todos os outros usuários.

Para instru ilde{a} ilde{a}es mais detalhadas e para aprender como fazer isso usando c ilde{o}digo, confira nosso guia sobre como mostrar menus diferentes para usu ilde{a}rios logados no WordPress.

Exibindo um Menu Diferente para Usuários Logados Usando FSE

Se voc ilde{e} estiver usando um tema de bloco, ent ilde{a}o voc ilde{e} precisar ilde{a} do plugin Conditional Blocks.

Então, vamos instalar e ativar o plugin primeiro – você pode ir em Plugins » Adicionar Novo para começar.

Em seguida, use a caixa de pesquisa para procurar o plugin.

Quando ele aparecer nos resultados, clique em ‘Instalar Agora’ e certifique-se de clicar em ‘Ativar’ assim que a instalação for concluída.

Se precisar de ajuda extra, voc ilde{e} pode ver nosso guia sobre como instalar um plugin do WordPress.

Após ativá-lo, navegue até Aparência » Editor para abrir o Editor do Site.

Em seguida, você vai querer clicar em ‘Padrões’ e depois em ‘Todas as partes do modelo’.

Agora você deve ver todas as suas partes de modelo, que podem incluir um rodapé, cabeçalho e comentários – dependendo do seu tema ativo.

Vamos localizar a parte do modelo ‘Cabeçalho’. Simplesmente clique no ícone do menu de três pontos e depois selecione ‘Editar’.

Isso o redirecionará para o editor de blocos.

Clique no bloco do menu de navegação para adicionar condicionais. Depois disso, mude para a aba ‘Bloco’ no painel do lado direito para começar a personalizar.

Se você rolar para baixo na aba ‘Bloco’, verá a seção ‘Blocos Condicionais’. Basta clicar nela para abrir as opções de personalização.

Em seguida, clique no botão ‘Editar Visibilidade’.

Uma janela pop-up onde você pode definir condições para o seu menu de navegação escolhido aparecerá.

Aqui, você pode abrir o menu suspenso ‘CONDIÇÃO’ e selecionar a opção ‘Usuário Logado’.

Simplesmente feche a janela clicando no botão ‘X’ no canto superior direito.

Você deverá então ver uma condição adicionada à seção ‘Blocos Condicionais’. Clique em ‘Salvar’ para atualizar seus menus de navegação.

Agora, se você visitar seu site, é assim que ele pode parecer para usuários desconectados e conectados:

Exibindo um Menu WordPress Diferente Dependendo da Função do Usuário

Uma vez que um usu ilde{a}rio tenha feito login, voc ilde{e} tamb ilde{e}m pode exibir um menu de navega ilde{a} ilde{a}o diferente dependendo da fun ilde{a} ilde{a}o do usu ilde{a}rio que voc ilde{e} atribuiu a ele.

Por exemplo, você pode incluir itens de menu extras para um administrador e itens mais limitados para um colaborador. Em um site de associação, você pode conceder diferentes níveis de acesso a diferentes níveis de associação.

Exibindo um Menu WordPress Diferente Dependendo da Função do Usuário Usando o Editor Clássico

Assim como na se ilde{a} ilde{a}o anterior, voc ilde{e} precisar ilde{a} do plugin Conditional Menus. Para instru ilde{a} ilde{a}es detalhadas, consulte nosso guia sobre como instalar um plugin do WordPress.

Em seguida, você pode ir para a página Aparência » Menus e alternar para a aba ‘Gerenciar Localizações’.

Você deve adicionar o menu condicional apropriado para a sua função de usuário selecionada. Para este tutorial, selecionaremos o menu ‘Nav Menu Administrator’.

Depois disso, você pode clicar no link ‘+ Condições’ para escolher a função do usuário.

Você precisará clicar na aba ‘Funções de Usuário’ para ver caixas de seleção para cada função de usuário em seu site. Simplesmente clique nas funções de usuário que verão este menu e, em seguida, clique no botão ‘Salvar’ para armazenar suas alterações.

Exibindo um Menu WordPress Diferente Dependendo da Função do Usuário Usando FSE

Para mostrar um menu diferente dependendo das fun ilde{a} ilde{a}es de usu ilde{a}rio em FSE, voc ilde{e} usar ilde{a} o plugin Content Control.

Para fazer isso, vá em Plugins » Adicionar Novo no seu painel do WordPress.

Em seguida, use o campo de pesquisa para encontrar rapidamente o plugin.

Assim que aparecer nos resultados, clique em ‘Instalar agora’ e não se esqueça de clicar em ‘Ativar’ após a conclusão da instalação.

Se voc ilde{e} quiser mais orienta ilde{a} ilde{a}o, pode consultar nosso guia sobre como instalar um plugin do WordPress.

Assim que o plugin for ativado, vá para Aparência » Editor no seu painel do WordPress.

Em seguida, selecione ‘Padrões’ e clique em ‘Todas as partes do modelo’.

Isso deve mostrar uma lista de partes de modelo disponíveis, como cabeçalho, rodapé e comentários, dependendo do seu tema de bloco ativo.

Você pode localizar sua parte de modelo ‘Cabeçalho’, clicar no menu de três pontos e escolher ‘Editar’.

No editor, você pode selecionar um menu de navegação para adicionar condicionais.

Por exemplo, ocultaremos o link para a p ilde{a}gina extbar}Blog extbar} para que apenas os assinantes o vejam no menu.

A partir daqui, vamos para o painel direito e ativaremos o interruptor ‘Ativar Controles’ na seção ‘Controles de Bloco’.

Em seguida, você vai querer rolar para baixo até a seção ‘Regras do Usuário’ para configurar as condições.

Primeiro, basta abrir o menu suspenso ‘QUEM PODE VER ESTE CONTEÚDO’ e escolher ‘Usuário Logado’.

Em seguida, para o menu suspenso ‘FUNÇÃO DO USUÁRIO’, você pode escolher ‘Correspondente’. E em ‘FUNÇÕES ESCOLHIDAS’, vamos selecionar ‘assinante’.

Quando terminar, você pode prosseguir e clicar no botão ‘Salvar’.

Exibindo um Menu Diferente para Páginas Diferentes no WordPress

Você pode exibir um menu diferente para páginas diferentes no WordPress.

Por exemplo, você pode exibir itens de menu extras em sua página de política de privacidade, como um link para o seu aviso de cookies.

Exibindo um Menu Diferente para Páginas Diferentes no WordPress Usando o Editor Clássico

Para fazer isso, você precisa do plugin Conditional Menus. Se precisar de ajuda para instalar o plugin, consulte as etapas em nossa seção anterior ou nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você desejará navegar para Aparência » Menus e, em seguida, selecionar ‘Gerenciar locais’.

Após escolher o menu de navegação apropriado, você pode clicar no link ‘+ Condições’.

Desta vez, você deve clicar na aba ‘Páginas’. Você verá uma lista de todas as páginas do seu site.

Em seguida, você precisará marcar a caixa ao lado de cada página onde deseja exibir o menu de navegação. Feito isso, clique no botão ‘Salvar’.

Exibindo um Menu Diferente para Páginas Diferentes no WordPress Usando FSE

Se você estiver usando um tema de blocos, recomendamos o uso do plugin gratuito Block Visibility. Ele oferece controle preciso sobre quem vê seus menus.

Para começar, instale e ative o plugin acessando Plugins » Adicionar Novo no seu painel do WordPress.

Em seguida, use a caixa de pesquisa para procurar o plugin.

Quando ele aparecer nos resultados, clique em ‘Instalar agora’ e certifique-se de clicar em ‘Ativar’ assim que a instalação for concluída.

Se precisar de ajuda com a instalação, consulte nosso guia sobre como instalar um plugin do WordPress.

Após ativar o plugin, abra Aparência » Editor no seu painel do WordPress.

Em seguida, clique em ‘Padrões’ e depois em ‘Partes de todos os modelos’.

Isso exibirá todas as partes de modelo disponíveis, incluindo o cabeçalho, rodapé e comentários, dependendo do seu tema ativo.

A partir daqui, clique no seu cabeçalho ou na área onde seu menu de navegação está localizado para editá-lo.

Uma vez dentro do editor, vá para a seção ‘Visibilidade’.

Em seguida, procure as opções ‘Localização’ ou ‘Caminho do URL’.

Em seguida, você pode adicionar o caminho do URL da página de Política de Privacidade à área 'CAMINHO DO URL (CONTÉM)'.

Um caminho de URL é a parte de um endereço web que vem depois do nome principal do site e mostra uma página ou item específico.

Por exemplo, no endereço https://example.com/about, a parte /about é o caminho do URL.

Se você não souber qual é o caminho do URL da sua página de Política de Privacidade, pode ir em Páginas » Todas as Páginas. Em seguida, localize a página Política de Privacidade e passe o mouse sobre ela.

Simplesmente clique no botão 'Edição Rápida' e você verá a seção 'Slug'. O caminho do URL deve ser o símbolo '/' seguido pelo slug da página.

Ou simplesmente visite a página, copie o texto após o nome do seu domínio e cole-o aqui. Certifique-se de incluir a barra no início.

É isso! Vá em frente e clique em 'Salvar' para armazenar as alterações.

Ocultando o Menu de Navegação em Landing Pages no WordPress

Pode haver páginas em seu site onde você não queira exibir um menu de navegação, como suas páginas de destino.

Uma página de destino é projetada para aumentar as vendas ou gerar leads para um negócio. Nessas páginas, você desejará minimizar distrações e fornecer aos usuários todas as informações de que precisam para realizar uma ação específica.

Em nosso guia sobre como aumentar as conversões de sua página de destino em 300%, sugerimos que você minimize as distrações removendo menus de navegação e outros links da página.

Ocultando o Menu de Navegação em Páginas de Destino no WordPress Usando o Editor Clássico

Você pode fazer isso usando o plugin Conditional Menus que usamos na seção anterior.

Após ativar o plugin, você pode navegar para Aparência » Menus e selecionar ‘Desativar Menu’ no menu suspenso.

Em seguida, vamos clicar no link '+ Conditions' (Condições) para escolher quando exibir o menu.

Você deve clicar na aba ‘Páginas’ e marcar a caixa ao lado do item ‘Minha Página de Destino’.

Não se esqueça de clicar no botão 'Save' (Salvar) para armazenar e aplicar suas configurações.

Ocultando o Menu de Navegação em Páginas de Destino no WordPress Usando FSE

Para temas de blocos, você pode continuar usando o plugin Block Visibility que mencionamos anteriormente. Mas desta vez, você inserirá o caminho do URL no campo 'URL Path (Does Not Contain)'.

Assim que o plugin estiver ativo, vá para Aparência » Editor no seu painel de administração.

A partir daí, escolha ‘Padrões’ e, em seguida, abra ‘Todas as partes do modelo’.

Você verá uma lista de partes do modelo, como cabeçalho, rodapé e comentários, dependendo do seu tema ativo atual. Por exemplo, você pode encontrar ‘Cabeçalho’, abrir o menu de três pontos e clicar em ‘Editar’.

Uma vez dentro do editor, encontre a seção ‘Visibilidade’.

A partir daqui, você pode escolher ‘Caminho da URL’ e inserir o caminho da sua página de destino no campo ‘Caminho da URL (Não Contém)’.

Quando terminar, basta clicar no botão ‘Salvar’.

Solução de problemas: Por que meu menu não está mudando?

Se você configurou suas regras condicionais, mas o menu não muda quando você o testa, o cache é geralmente o motivo.

Muitos plugins de cache do WordPress armazenam uma versão estática de seus menus para melhorar o desempenho. Quando isso acontece, as alterações não aparecem imediatamente.

Para solucionar isso, você pode tentar limpar seu cache do WordPress e verificar novamente.

Perguntas Frequentes Sobre Menus Condicionais

Tem dúvidas sobre como configurar ou personalizar menus condicionais no WordPress? Aqui estão algumas respostas rápidas para ajudá-lo a começar.

Qual é o melhor plugin de menu condicional para WordPress?

Se você estiver usando um tema clássico, o plugin Conditional Menus é uma escolha simples e confiável. Para temas de blocos, ferramentas como Conditional Blocks ou Block Visibility oferecem controle poderoso diretamente no editor.

Posso adicionar lógica condicional a menus sem um plugin?

Sim, mas isso envolve adicionar código personalizado aos arquivos do seu tema, o que é melhor deixar para usuários avançados, pois um pequeno erro pode quebrar seu site.

Para a maioria das pessoas, um plugin como o WPCode é uma maneira muito mais segura e fácil de adicionar e gerenciar trechos de código. Você pode descobrir tudo sobre ele em nossa análise completa do WPCode.

Posso aplicar condições a um único item de menu em vez do menu inteiro?

Com certeza. Muitos temas do WordPress modernos e plugins de menu permitem isso. No editor de menus clássico (Aparência » Menus), você pode definir regras de visibilidade para itens individuais. No editor de blocos, você pode aplicar condições a blocos de link de navegação específicos.

Leitura Adicional: Fazendo Mais com Menus de Navegação do WordPress

Menus de navegação são ferramentas poderosas de design web. Eles permitem que você direcione os usuários para as seções mais importantes do seu blog ou site WordPress.

Agora que você está exibindo diferentes menus de navegação em diferentes páginas e para várias funções de usuário, você pode se perguntar como personalizá-los ainda mais.

Para melhorar a funcionalidade dos seus menus de navegação, certifique-se de conferir estes tutoriais:

• Como Adicionar Itens Personalizados a Menus Específicos do WordPress
• Como Adicionar um Menu Responsivo em Tela Cheia no WordPress
• Como Criar um Menu de Navegação Vertical no WordPress
• Como Adicionar um Mega Menu ao Seu Site WordPress
• Como Estilizar Menus de Navegação do 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.