Como Adicionar Itens Personalizados a Menus Específicos do WordPress

Você deseja adicionar itens personalizados a menus específicos do WordPress?

Menus do WordPress são menus de navegação exibidos na parte superior da maioria dos sites. Às vezes, você pode querer exibir itens personalizados além de links simples em menus de navegação.

Neste artigo, mostraremos como adicionar facilmente itens personalizados a menus específicos do WordPress.

Adicionando itens personalizados aos menus do WordPress

Por que adicionar itens personalizados aos menus do WordPress

Menus do WordPress são links de navegação geralmente exibidos na parte superior de um site. Em dispositivos móveis, eles são frequentemente exibidos quando você toca em um ícone de menu.

menu de navegação de exemplo

Como este é um local proeminente no layout típico de um site WordPress, é inteligente aproveitá-lo colocando itens personalizados além de links simples no menu.

Por exemplo, alguns usuários podem querer exibir o formulário de pesquisa como fazemos no WPBeginner. Um site de membros pode querer mostrar links de login e logout, ou você pode querer adicionar ícones ou imagens ao seu menu.

Por padrão, os menus de navegação são projetados para exibir links de texto simples. No entanto, você ainda pode colocar itens personalizados em menus do WordPress.

Dito isso, vamos ver como você pode adicionar itens personalizados a menus específicos no WordPress, mantendo o restante do seu menu de navegação intacto.

Adicionando Itens Personalizados a Menus de Navegação Específicos no WordPress

Existem diferentes maneiras de adicionar itens personalizados a um menu de navegação no WordPress. Depende do tipo de item personalizado que você está tentando adicionar.

Mostraremos alguns dos exemplos mais comuns. Você precisará usar plugins para alguns deles, enquanto outros exigirão que você adicione algum código.

Se você quiser pular para uma seção específica, pode usar esta tabela de conteúdo:

Vamos começar.

1. Adicionando um Popup de Pesquisa no Menu do WordPress

Normalmente, você pode adicionar um formulário de pesquisa à barra lateral do seu WordPress usando o widget ou bloco de Pesquisa padrão. No entanto, não há como adicionar pesquisa ao menu de navegação por padrão.

Alguns temas do WordPress têm uma opção para adicionar uma caixa de pesquisa à sua área de menu principal. Mas se o seu não tiver, você pode usar o método abaixo.

Para isso, você precisa instalar e ativar o plugin SearchWP Modal Search Form. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Este plugin é um complemento para o SearchWP, que é o melhor plugin de pesquisa do WordPress do mercado.

O complemento é gratuito e funcionará com a pesquisa padrão do WordPress também. No entanto, recomendamos usá-lo com o SearchWP se você quiser melhorar sua pesquisa no WordPress.

Após instalar o complemento, basta ir para a página Aparência » Menus. Na coluna 'Adicionar itens ao menu', clique na aba 'Formulários de Pesquisa Modal SearchWP' para expandi-la.

Adicionar pesquisa ao menu

Selecione seu mecanismo de pesquisa e clique no botão Adicionar ao menu.

O plugin adicionará a pesquisa ao seu menu de navegação. Clique em 'Formulário de pesquisa modal' em seus itens de menu para expandi-lo e alterar o rótulo para Pesquisar ou qualquer outra coisa que você desejar.

Alterar rótulo da pesquisa

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

Agora você pode visitar seu site para ver a Pesquisa adicionada ao seu menu de navegação. Clicar nele abrirá o formulário de pesquisa em uma janela pop-up.

Pesquisar no menu de navegação

Para mais detalhes, consulte nosso guia sobre como adicionar um botão de pesquisa a um menu do WordPress.

2. Adicionar Ícones e Imagens Personalizadas a Menus Específicos

Outro item personalizado popular que os usuários geralmente desejam adicionar a um menu específico é uma imagem ou um ícone.

Para isso, você precisará instalar e ativar o plugin Menu Image Icon. Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, vá para a página Aparência » Menus e mova o mouse sobre o item do menu onde você deseja exibir um ícone ou imagem.

Botão de imagem do menu

Clique no botão azul Menu Image para continuar.

Isso abrirá uma janela pop-up. A partir daqui, você pode escolher uma imagem ou ícone para ser exibido com esse item de menu.

Escolher imagem ou ícone

Você também pode escolher a posição da imagem ou ícone em relação ao item do menu. Por exemplo, você pode exibir o ícone logo antes do item do menu, como em nosso exemplo abaixo, ou até mesmo ocultar o título do menu para que apenas o ícone apareça.

Não se esqueça de clicar no botão Salvar alterações para armazenar suas configurações. Repita o processo se precisar adicionar ícones ou imagens a outros itens de menu.

Depois disso, você pode visitar seu site para ver a imagem ou ícone personalizado em itens de menu específicos.

Ícones do menu

Para instruções mais detalhadas, veja nosso tutorial sobre como adicionar imagens em menus do WordPress.

3. Adicionar Links de Login / Logout a um Menu Específico do WordPress

Se você estiver usando um plugin de membros do WordPress ou executando uma loja online, talvez queira permitir que os usuários façam login em suas contas facilmente.

Por padrão, o WordPress não oferece uma maneira fácil de exibir links de login e logout em menus de navegação.

Mostraremos como adicioná-los usando um plugin ou um trecho de código.

1. Adicionar Links de Login / Logout a Menus usando um Plugin

Este método é mais fácil e recomendado para todos os usuários.

Primeiro, você precisa instalar e ativar o plugin Login or Logout Menu Item. Depois disso, você precisa visitar a página Aparência » Menu e clicar na aba Login/Logout para expandi-la.

Adicionar link de login ou logout a um menu específico do WordPress

A partir daqui, você precisa selecionar o item 'Entrar|Sair' e clicar no botão Adicionar ao Menu.

Não se esqueça de clicar no botão Salvar Menu para armazenar suas alterações. Agora você pode visitar seu site para ver seu link personalizado de login/logout em ação.

Prévia do link de login e logout

O link mudará dinamicamente para entrar ou sair, dependendo do status de login de um usuário.

Saiba mais em nosso tutorial sobre como adicionar links de login e logout em menus do WordPress.

2. Adicionar Links de Login / Logout usando Código Personalizado

Este método exige que você adicione código ao seu site WordPress. Se você nunca fez isso antes, confira nosso guia sobre como adicionar código personalizado no WordPress.

Primeiro, você precisa descobrir o nome que seu tema WordPress usa para a localização específica do menu de navegação.

A maneira mais fácil de descobrir isso é visitando a página Aparência » Menus e passando o mouse sobre a área de localizações de menu.

Encontrar nome da localização do menu

Clique com o botão direito para selecionar a ferramenta Inspecionar e, em seguida, você verá o nome da localização no código-fonte abaixo. Por exemplo, nosso tema de demonstração usa primary, footer e top-bar-menu.

Anote o nome usado para a sua localização de destino onde você deseja exibir o link de login / logout.

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

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
    }
    return $items;
}

Depois disso, você pode visitar seu site e verá o link de login ou logout no seu menu de navegação.

Link de login adicionado via código personalizado

Este link dinâmico alternará automaticamente para login ou logout com base no status de login do usuário.

4. Adicionando Texto Personalizado ao Seu Menu de Navegação do WordPress

E se você quisesse apenas adicionar texto e não um link ao seu menu de navegação?

Existem duas maneiras de fazer isso.

1. Adicionar Texto Personalizado a um Menu Específico (Maneira Fácil)

Simplesmente vá para a página Aparência » Menus e adicione um link personalizado com o sinal # como URL e o texto que você deseja exibir como Texto do Link.

Adicionar texto personalizado com link fictício

Clique no botão Adicionar ao Menu para continuar.

O WordPress adicionará seu texto personalizado como um item de menu na coluna da esquerda. Agora, clique para expandi-lo e exclua o sinal #.

Remover link

Não se esqueça de clicar no botão Salvar Menu e visualizar seu site. Você notará que seu texto personalizado aparece no menu de navegação.

Ainda é um link, mas clicar nele não faz nada para o usuário.

texto personalizado no menu de navegação

2. Adicionar Texto Personalizado a um Menu de Navegação Usando Código

Para este método, você adicionará um trecho de código ao seu site. Primeiro, você precisará descobrir o nome da localização do seu tema, conforme descrito acima na seção de link de login/logout.

Depois disso, você precisa adicionar o seguinte código ao arquivo functions.php do tema ou a um plugin específico do site.

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if ( $args->theme_location == 'primary') {
        $items .= '<li><a title="">Custom Text</a></li>';
    }
    return $items;
}

Simplesmente substitua onde diz 'Texto Personalizado' pelo seu próprio texto.

Agora você pode salvar suas alterações e visitar seu site para ver seu texto personalizado adicionado ao final do seu menu de navegação.

Este método de código pode ser útil se você quiser adicionar programaticamente elementos dinâmicos a um menu específico do WordPress.

5. Adicionar Data Atual no Menu do WordPress

Você quer exibir a data atual em um menu de navegação no WordPress? Este truque é útil se você administra um blog frequentemente atualizado ou um site de notícias.

Simplesmente adicione o seguinte código ao arquivo functions.php do seu tema ou a um plugin específico do site.

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'primary')  {
         
        $todaysdate = date('l jS F Y');
        $items .=  '<li><a>' . $todaysdate .  '</a></li>';
 
    }
    return $items;
}

Não se esqueça de substituir 'primary' pela localização do seu menu.

Agora você pode visitar seu site para ver a data atual no seu menu do WordPress.

Data atual no menu do WordPress

Você também pode alterar o formato da data de acordo com sua preferência. Veja nosso tutorial sobre como alterar o formato de data e hora no WordPress.

6. Exibir Nome do Usuário no Menu do WordPress

Quer adicionar um pouco mais de personalização ao seu menu de navegação? Você pode cumprimentar os usuários logados pelo nome no seu menu de navegação.

Primeiro, você precisará adicionar o seguinte código ao arquivo functions.php do seu tema ou a um plugin específico do site.

add_filter( 'wp_nav_menu_objects', 'username_in_menu_items' );
function username_in_menu_items( $menu_items ) {
    foreach ( $menu_items as $menu_item ) {
        if ( strpos($menu_item->title, '#profile_name#') !== false) {
			 if ( is_user_logged_in() )     {
				$current_user = wp_get_current_user();
				 $user_public_name = $current_user->display_name;
                $menu_item->title =  str_replace("#profile_name#",  " Hey, ". $user_public_name, $menu_item->title . "!");
			 } else { 
			 $menu_item->title =  str_replace("#profile_name#",  " Welcome!", $menu_item->title . "!");
			 }
        }
    }

    return $menu_items;
} 

Este código primeiro verifica se você adicionou um item de menu com #profile_name# como texto do link. Depois disso, ele substitui esse item de menu pelo nome do usuário logado ou por uma saudação genérica para usuários não logados.

Em seguida, você precisa ir para a página Aparência » Menus e adicionar um novo link personalizado com #profile_name# como Texto do link.

Adicionar tag especial a um item de menu

Não se esqueça de clicar no botão Salvar Menu para armazenar suas alterações. Depois disso, você pode visitar seu site para ver o nome do usuário logado no menu do WordPress.

Nome de usuário no menu de navegação do WordPress

7. Exibir Menus Condicionais Dinamicamente no WordPress

Até agora, mostramos como adicionar diferentes tipos de itens personalizados a menus específicos do WordPress. No entanto, às vezes você pode precisar exibir dinamicamente itens de menu diferentes para os usuários.

Por exemplo, você pode querer exibir um menu apenas para usuários logados. Outro cenário é quando você quer que o menu mude com base na página que o usuário está visualizando.

Este método permite que você crie vários menus e os exiba apenas quando certas condições forem atendidas.

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

Após a ativação, você precisa visitar a página Aparência » Menus. A partir daqui, você precisa criar um novo menu que deseja exibir. Por exemplo, neste exemplo, criamos um novo menu apenas para usuários logados.

Criar novo menu

Depois de ter criado o menu, mude para a aba Gerenciar Localizações.

A partir daqui, você precisa clicar no link Menus Condicionais ao lado da localização do menu.

Adicionar um menu condicional

Depois disso, você precisa selecionar o menu que criou anteriormente no menu suspenso.

Em seguida, clique no botão ‘+ Condições’ para continuar.

Selecione o menu que você deseja mostrar

Isso abrirá uma janela pop-up.

A partir daqui, você pode selecionar as condições que precisam ser atendidas para exibir este menu.

Escolher condições

O plugin oferece várias condições para escolher. Por exemplo, você pode exibir o menu com base em uma página específica, categoria, tipo de post, taxonomia e muito mais.

Você também pode exibir menus diferentes com base em funções de usuário e status de login. Por exemplo, você pode exibir um menu diferente para membros existentes em um site de associação.

Esperamos que este artigo tenha ajudado você a aprender como adicionar itens personalizados a menus específicos do WordPress. Você também pode querer ver nosso guia sobre como escolher o melhor software de design web, ou nossa comparação especializada do melhor software de chat ao vivo para pequenas empresas.

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.

Aviso: Nosso conteúdo é apoiado pelos leitores. Isso significa que, se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Interações do Leitor

65 CommentsLeave a Reply

  1. Gostei da implementação da busca, onde em vez do campo vazio clássico, há uma janela pop-up. Parece uma boa solução. Também me interessei pela data e personalização do usuário logado. Obrigado pela inspiração.

  2. Olá,
    muito obrigado por esse código. Existe alguma forma de reordenar o MENU? Por exemplo, eu quero ter o botão de Login/Logout em primeiro lugar no MENU. Apenas como um exemplo.
    Abraços,
    Denis

    • Por enquanto, com este código, não temos um método simples para reordenar onde as adições são colocadas em comparação com os itens do menu no momento.

      Admin

    • Tenho certeza que isso é tarde demais para o Denis! Mas caso mais alguém queira que seu item de menu apareça PRIMEIRO na lista de itens de menu, em vez de POR ÚLTIMO, aqui está um exemplo de código que usei para esse fim:

      add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
      function your_custom_menu_item ( $items, $args ) {
      if (is_single() && $args->theme_location == ‘primary’) {
      $oldItems = $items;
      $items = ‘Show whatever’;
      $items .= $oldItems;
      }
      return $items;
      }

  3. Existe uma maneira de ter uma entrada na sua barra de menu definida para aparecer em um determinado horário e outro item definido para expirar?

    • A menos que eu ouça o contrário, não temos uma exibição condicional baseada em tempo recomendada que possamos recomendar.

      Admin

  4. Olá,

    Como posso adicionar um formulário de pesquisa no início da lista de itens do menu?

    Obrigado,

    Saurabh

    PS: big fan of your tuts :)

  5. Isso é ótimo. Mas seria possível adicionar um menu dentro de um menu?
    Quero anexar um menu de idioma ao meu menu principal.
    Eu recebo o menu de idioma na página, mas não no local desejado.

    em vez de

  6. Este código ainda funciona? Não estou vendo nada no meu menu, mesmo usando apenas a função básica com texto. Não estou usando nenhum tipo especial de menu, apenas 'X' & tema filho.

    • esquece, desculpe, acabei de ler isto: “Obviamente, você precisa ter o menu personalizado ativado em seus temas antes de prosseguir.”

      • OK, então eu ainda estava tendo o problema, mesmo que meu menu fosse personalizado, e mexi até remover a condição. (SE), assim que fiz isso, ele foi exibido em todas as páginas, incluindo a página inicial.

        `add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
        function your_custom_menu_item ( $items, $args ) {
        $items .= ‘Mostre qualquer coisa’;
        return $items;
        }

    • 10 especifica a ordem em que as funções associadas a uma ação específica são executadas. Números menores correspondem à execução anterior, e funções com a mesma prioridade são executadas na ordem em que foram adicionadas à ação.

      2 é para o número de argumentos que a função aceita.

      Admin

  7. Este é um tutorial incrível e direto ao ponto. Eu quero um item com a data de hoje ("headlines | DATE") em um dos meus menus.

    I didn’t expect the first posting I found to solve my problem :) thx guys.

  8. funciona, mas (lol) para a minha situação eu quero adicionar "Pesquisar" ao cabeçalho principal como se fosse apenas mais um item que foi marcado em

    appearance/menus/add-to-menu

    Tudo o que vi cria um novo... o que é isso, um div... (?)

    que adiciona uma linha inteira nova ao cabeçalho em vez de colocar o formulário na mesma linha que os itens ABOUT, etc. na janela de edição de navegação principal.

    E pegar o css atribuído à barra de navegação.

  9. Gostei muito da postagem, tão útil. No entanto, digamos que eu queira adicionar um link de login e logout no rodapé com uma condição if

  10. Pergunta relacionada: como adicionar um item de menu com base em uma função de usuário específica?
    Digamos que eu tenha uma função de usuário personalizada chamada "Estudante" e gostaria de adicionar um item ao menu apenas quando o usuário tiver a função de "Estudante"?

  11. Obrigado pelo tutorial!

    Para ser honesto, eu não entendo como você chama a função.

    Especialmente sinto falta de uma menção de quais argumentos você chama as funções, ou seja, quais variáveis do wp entregar como $items e $args.

    Você poderia detalhar para um iniciante em wp?

    Obrigado,

    Gerrit

  12. Em seus exemplos, você adiciona itens ao menu principal (theme_location == ‘primary’).

    Como eu adicionaria um item em um menu específico na área de widget? Onde eu obtenho o theme_location?

  13. Olá! Usei seu tutorial para colocar uma imagem como logo sobrepondo a barra de menu. Tudo bem, mas este menu específico tem uma opção de hover que deixa a cor branca… Então, quando eu passo o mouse sobre o logo, ele também faz hover no link, o que meio que estraga o visual da página.

    Este é o meu código:

    if( $args->theme_location == ‘primary’ )
    return ““.$items;

    Como posso ocultar o a href na página e apenas exibir a imagem com o link?

    Agradeço desde já

  14. Olá, acho que seu código está perto do que eu procuro, mas estou tentando descobrir como posso personalizá-lo para fazer o que estou tentando fazer!

    O que estou tentando fazer é criar um item de menu com uma lista suspensa de autores? Alguma ideia de como posso conseguir isso?

    Muito obrigado!

  15. Obrigado, isso foi muito útil,

    No entanto, por curiosidade, não consigo encontrar este valioso hook de filtro: “‘wp_nav_menu_items” , quero dizer, onde nos arquivos principais do WP isso está sendo chamado??

    Muito obrigado!!

  16. Como posso colocá-lo na frente do primeiro item do menu? Caso contrário, ótimo tutorial!

    Atenciosamente,
    Andor Nagy

      • Adicionei o seguinte ao functions.php do meu tema, mas a caixa de pesquisa não aparece como eu esperava. Alguma sugestão?

        add_filter(‘wp_nav_menu_items’,’add_search_box_to_menu’, 10, 2);
        function add_search_box_to_menu( $items, $args ) {
        if( $args->theme_location == ‘header_extras_inner’ )
        return $items.””;

        return $items;
        }

  17. Desculpe entrar nesta discussão tão tarde

    Tentei a parte do formulário de pesquisa e funciona muito bem — obrigado! Estou tendo problemas para estilizar, por algum motivo. Não importa o que eu faça, o texto placeholder no campo fica cinza. Olhei a cascata dos estilos e mexi em tantas coisas — consigo mudar a cor de fundo, por exemplo, mas sem sorte em deixar o texto preto, então a continuidade do design do menu é um tanto comprometida. Meu site é http://elliottwall.com se você quiser dar uma olhada. Abraços

  18. Olá,

    Muito interessante!
    Adicionei um link personalizado, mas é possível adicioná-lo em uma posição específica dentro do menu? Tipo “depois do primeiro item do menu”.

    Obrigado

Deixar uma resposta

Obrigado por escolher deixar um comentário. Por favor, tenha em mente que todos os comentários são moderados de acordo com nossa política de comentários, e seu endereço de e-mail NÃO será publicado. Por favor, NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.