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?
Menus de navegação dão estrutura ao seu site e ajudam os visitantes a encontrar o que procuram.
Por padrão, seu site WordPress exibirá o mesmo menu de navegação para todos os usuários e em todas as postagens e páginas.
No entanto, pode haver momentos em que você deseja exibir menus diferentes para usuários diferentes ou em páginas diferentes do seu site.
Com a lógica condicional, você pode ir um passo além criando menus personalizados para usuários logados. Aqui estão alguns exemplos de casos de uso em diferentes tipos de sites:
- Loja online – Destaque produtos ou ofertas especiais com base no histórico de navegação ou de compras de um cliente.
- Site de membros WordPress – Mostre páginas e recursos exclusivos apenas para membros logados.
- Plataforma de aprendizado online – Exiba diferentes categorias de cursos ou lições dependendo do progresso de um aluno.
Você pode pensar nisso como controle de acesso a menus do 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:
- Creating New Navigation Menus in WordPress
- Showing a Different Menu to Logged-In Users in WordPress
- Exibindo um Menu Diferente para Usuários Logados Usando FSE
- Showing a Different WordPress Menu Depending on User Role
- Showing a Different Menu for Different Pages in WordPress
- Hiding the Navigation Menu on Landing Pages in WordPress
- Perguntas Frequentes Sobre Menus Condicionais
- Leitura Adicional: Fazendo Mais com Menus de Navegação do WordPress
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 o editor clássico quanto para o editor de blocos.
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ê pode criar um menu para mostrar aos usuários logados e outro para exibir em uma determinada página do WordPress ou categoria.
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ê pode dar uma olhada em nosso guia para iniciantes sobre como adicionar um menu de navegação no WordPress.
Criando Novos Menus de Navegação no WordPress Usando FSE
Para criar novos menus de navegação em um tema de blocos com Edição de Site Completo (FSE), você precisará navegar para Aparência » Editor no seu painel do WordPress primeiro.
Uma vez lá dentro, você pode clicar na aba ‘Navegação’ para expandi-la. Se você está se perguntando, estamos usando o tema Twenty-Twenty Three para este guia.
Em seguida, vamos clicar em ‘Editar’ ao lado do rótulo ‘Navegação’.
Isso abrirá o editor de site completo em sua tela.
A partir daqui, tudo o que resta a fazer é clicar no ícone ‘+’ para adicionar um item de menu de navegação. Você verá um prompt mostrando um menu suspenso onde você pode selecionar uma opção.
Para instruções mais detalhadas, você pode ver nosso guia sobre como adicionar um menu de navegaçã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ê pode incluir links de login e registro para usuários desconectados e adicionar um link de logout ao seu menu para usuários conectados.
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çar, você precisa instalar e ativar o Conditional Menus plugin. Para mais detalhes, consulte 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 partir daqui, você verá a lista de locais de menu disponíveis e os menus que estão sendo exibidos atualmente. Estes variarão dependendo do tema do WordPress que você está usando.
Por exemplo, em nosso site de demonstração, ele mostra que nosso local ‘Menu Principal’ está exibindo um menu de navegação intitulado ‘Menu Principal’.
Podemos dizer ao plugin para mostrar um menu diferente quando uma determinada condição for correspondida clicando no link ‘+ Menu Condicional’ e selecionando outro menu no menu suspenso.
Para este tutorial, selecionaremos ‘Menu de Conectados’.
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ções mais detalhadas e para aprender como fazer isso usando código, dê uma olhada em nosso guia sobre como mostrar menus diferentes para usuários logados no WordPress.
Exibindo um Menu Diferente para Usuários Logados Usando FSE
Se você estiver usando um tema de blocos, precisará do plugin Conditional Blocks. Então, vamos instalar e ativar o plugin primeiro. Se precisar de ajuda, você pode consultar nosso guia sobre como instalar um plugin do WordPress.
Ao ativá-lo, você pode abrir o recurso FSE navegando para Aparência » Editor. Em seguida, clique 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. Vamos clicar nos três pontos na seção ‘Cabeçalho’ e depois selecionar ‘Editar’.
Isso o redirecionará para o editor de blocos.
Agora, você precisará clicar no bloco de menu de navegação para adicionar condicionais.
Depois disso, simplesmente 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ário tenha feito login, você também pode exibir um menu de navegação diferente dependendo da função do usuário que você 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ção anterior, você precisará instalar e ativar o plugin Conditional Menus.
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ções do usuário no FSE, você usará o plugin Content Control. Se precisar de ajuda para instalá-lo e ativá-lo, consulte nosso guia sobre como instalar um plugin do WordPress.
Após a ativação, você pode navegar para Aparência » Editor » Padrões » Todas as partes do modelo. Em seguida, simplesmente clique nos três pontos na seção ‘Cabeçalho’ e selecione ‘Editar’.
No editor, você pode selecionar um menu de navegação para adicionar condicionais.
Por exemplo, vamos tornar nossa página ‘Blog’ exclusiva apenas para nossos assinantes. Então, clicaremos em ‘Blog’ para abrir suas opções de personalização.
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 instalar e ativar o plugin Conditional Menus. Em seguida, navegue até Aparência » Menus » Gerenciar Localizações.
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 cada página onde deseja exibir o menu de navegação. Quando terminar, prossiga e clique no botão ‘Salvar’.
Exibindo um Menu Diferente para Páginas Diferentes no WordPress Usando FSE
Usuários de temas de bloco podem usar o plugin Block Visibility. Se precisar de ajuda com a instalação, consulte nosso guia sobre como instalar um plugin do WordPress.
Uma vez ativado, vamos navegar para Aparência » Editor » Padrões » Todas as partes do modelo. E após abrir o editor do Cabeçalho, você pode ir para a seção 'Visibilidade'.
A partir daqui, você pode abrir o menu suspenso e selecionar '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 sabe qual é o caminho do URL da sua página de Política de Privacidade, você pode ir para Páginas » Todas as Páginas. Em seguida, você vai querer encontrar a página de Política de Privacidade e passar 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 e copie e cole a parte depois do nome de domínio.
É 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 quer exibir um menu de navegação, como suas landing pages.
Uma landing page é projetada para aumentar as vendas ou gerar leads para um negócio. Nessas páginas, você vai querer minimizar distrações e fornecer aos usuários todas as informações que eles precisam para tomar 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. Desta vez, você escolherá 'Disable Menu' (Desativar Menu) no menu suspenso ao selecionar o menu condicional.
Em seguida, vamos clicar no link '+ Conditions' (Condições) para escolher quando exibir o menu.
Você deve clicar na aba 'Pages' (Páginas) e marcar a caixa ao lado do item 'My Landing Page' (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
Agora, para usuários de temas de blocos, você pode usar o plugin Block Visibility, mas desta vez, você inserirá o caminho da URL no campo ‘Caminho da URL (Não Contém)’.
Então, vamos instalar e ativar o plugin. Se precisar de ajuda, sinta-se à vontade para consultar nosso guia sobre como instalar um plugin do WordPress.
Após a ativação, você pode ir para Aparência » Editor » Padrões » Todas as partes do modelo. Uma vez dentro do editor de Cabeçalho, vamos encontrar 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’.
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?
Absolutamente. Muitos temas do WordPress modernos e plugins de menu permitem isso. No editor de menu 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 links 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 Menus de Navegação Personalizados em Temas 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
- Como Exibir Links de Navegação de Breadcrumb 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.
Jiří Vaněk
Comecei a usar o MemberPress e percebi que também precisava adicionar itens de menu para usuários logados que não deveriam ser visíveis para outros, pois não são para eles. Graças a este artigo, finalmente consegui criar dois menus, cada um para um tipo diferente de usuário. Funciona como mágica e é perfeito.
Bet Hannon
Tenha MUITO cuidado ao tornar os menus diferentes em todo o seu site. Não é um problema mostrar menus diferentes para usuários logados/deslogados, mas para atender aos padrões de acessibilidade WCAG 2.0+, os menus principais devem ser consistentes de página para página.
WPBeginner Support
Thank you for sharing that for those attempting to have those standards for their site.
Admin
Kevin
Não vejo a opção “Habilitar lógica condicional” em Aparência -> Menu. Estou usando o WordPress 5.7 em 16 de março de 2021.
WPBeginner Support
A redação pode ter mudado desde este artigo, mas ainda deve haver uma caixa de seleção para alterar a visibilidade.
Admin
Laurentiu
Um pequeno recurso, mas muito sentido quando um programador é solicitado a trabalhar no WordPress.
WPBeginner Support
Glad you found this recommendation helpful
Admin
Richard Spatts
Obrigado por isso, realmente ajudou
WPBeginner Support
You’re welcome, glad our guide helped
Admin
Richard S.
Muito obrigado por este artigo, é incrível.
Seu trecho de código foi perfeito para um projeto em que eu estava trabalhando, assim como este plugin que estou usando agora.
Mesmo em 2019, esta é uma página útil, está funcionando bem no WordPress 5.2.3 (tema Astra Pro), então ainda é muito aplicável.
WPBeginner Support
You’re welcome, glad our recommendation is helpful
Admin
Vasim Shaikh
Gostaria de perguntar, adicionei as funções de Autor e assinante para o usuário, então deveria ser exibido para o autor, não para o assinante. como lidar com isso?
WPBeginner Support
Você poderia configurá-lo para mostrar se o usuário tem a função de Autor
Admin
Rudolf
Plugin realmente simples e fácil de usar. Fantástico! Não só me poupou muito tempo, mas também uma vantagem organizacional, porque em vez de usar a lógica de widget com diferentes widgets de menu, agora crio um menu com condições por item.
Jonathan P
Obrigado,
Eu só usei este plugin para condições para usuários que estão logados ou não logados, mas funciona muito bem, realmente me poupou horas de mexer com código.
Kiva
Eu poderia configurar este plugin para que eu possa configurar diferentes opções de menu para cada categoria diferente?
Sphelele
Não há recurso de lógica condicional no meu menu.
David
Obrigado pessoal por compartilhar isso. No entanto, ele exibirá um Aviso PHP em itens de menu condicionados e a condição personalizada não será exibida entre as opções de condição, se você não especificar o parâmetro id.
Paul
Olá, adicionei condições (se uma string corresponder ao nome do servidor, um menu é oculto). Ótimo! Mas eu gostaria de adicionar ainda mais condições personalizadas. Você poderia mostrar um exemplo do código que você usaria para adicionar mais de um par nome/condição à opção personalizada?
name = “Se o site não for www.”
condition = www não está em SERVER_NAME
name = “Site do Paul.”
condition = “paul está em SERVER_NAME”
etc.
Obrigado!
Isuru
Isso entra em conflito com o WP User Manager Pro, e então as funções do plugin User Manager Pro não estão funcionando devido ao conflito.
Por exemplo: a opção "Mostrar senha" na página de registro de usuário não funciona, assim como a página de login também não está funcionando bem.
Você pode consertar isso?
Seg
Sim, definitivamente quebrado.
Funciona bem para as condições integradas, mas ao codificar condições personalizadas, funciona uma vez e depois para de funcionar.
jban
SIM!!! Depois de 90 minutos tentando descobrir isso, este artigo fez funcionar para mim. OBRIGADO!!!
Jesus Flores
Funciona muito bem!!! Obrigado
Mohi
Olá
Instalei este plugin, mas estou recebendo o seguinte aviso:
Warning: Missing argument 2 for custom_nav_edit_walker() in /var/www/equest/wp-content/themes/wp-questrian/framework/megamenu/mega-menu.php on line 42
Como resolver este aviso? Por favor, me guie.
WPBeginner Support
Parece que o plugin não é compatível com a funcionalidade de mega menu do seu tema. Por favor, entre em contato com o suporte do seu tema.
Admin
JMD
Eu não usei o plugin If Menu, mas tentei o plugin Nav Menu Roles
Funciona, mas depois entra em conflito com a funcionalidade de Mega menu do meu tema.
Hesito em tentar o plugin If Menu principalmente porque ele não é atualizado há tanto tempo. Será uma questão de tempo até que eu tenha que removê-lo com certeza.
Peter
Não consegui fazer este plugin funcionar. Não aparece nos itens de menu. Usando: WP 4.3 / tema Nimwa.
Alguma sugestão de plugin similar que funcione? Só quero ocultar alguns itens de menu enquanto trabalho neles...
Shafiq
Parece funcionar bem no WP 4.3.
Chuks Eke
Olá,
Isso poderia ser alcançado com este plugin,
Eu quero ter um menu diferente para páginas ou posts diferentes. por exemplo,
Início | Sobre Nós | Serviço | Contato
Sobre Nós [ História | Equipe | Carreira ]
Serviços [ Desenvolvimento Web | Aplicação Windows | Identidade Corporativa ]
É possível com este plugin mostrar o submenu no menu lateral para Sobre Nós
Mike J
Descobri que este plugin não funciona com alguns temas
WPBeginner Support
Por favor, relate os temas ao plugin usando a aba de suporte na página do plugin. Talvez eles possam te ajudar com isso.
Admin
Dieter
Parece estar quebrado no WP 4.2.2.
WPBeginner Support
Qual parece ser o problema? Está funcionando bem aqui.
Admin
Dieter
Eu parei a instalação após ler a Página de Plugins do WP Org, há o comentário “1 pessoa diz que está quebrado” e na seção de suporte há um relatório aberto que não foi resolvido.
Se eu leio algo assim, eu nem tento instalar tal plugin.
Jagabandhu
O plugin não está funcionando. Não está mostrando “habilitar lógica condicional” e o autor do plugin não responde há 7 meses.
Tentei desativando outros plugins. Mas sem resultado.
Existe algum outro plugin para fazer isso!?
Eu preciso disso.
WPBeginner Support
Testamos o plugin e ele está funcionando bem em nosso site de demonstração. Você pode testá-lo mudando para um tema padrão sem outros plugins ativados?