Como adicionar itens personalizados a menus específicos do WordPress

Deseja adicionar itens personalizados a menus específicos do WordPress?

Os 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 que não sejam links simples nos menus de navegação.

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

Por que adicionar itens personalizados aos menus do WordPress

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

Como esse é um local de destaque em um layout típico de site do WordPress, é inteligente tirar proveito dele colocando itens personalizados que não sejam links simples no menu.

Por exemplo, alguns usuários podem querer exibir o formulário de pesquisa como fazemos no WPBeginner. Um site de associação 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 nos menus do WordPress.

Dito isso, vamos dar uma olhada em como você pode adicionar itens personalizados a menus específicos no WordPress e, ao mesmo tempo, manter o restante do menu de navegação intacto.

Adição de itens personalizados a menus de navegação específicos no WordPress

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

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

Se quiser pular para uma determinada seção, você pode usar este índice:

• Adicionar um pop-up de pesquisa ao menu do WordPress
• Adicionar ícones ou imagens ao menu
• Adicionar links de login/logout ao menu
• Adicionar texto personalizado a um menu do WordPress
• Adicionar a data atual ao menu
• Exibir nomes de usuário no menu
• Exibir menus diferentes em páginas diferentes

Vamos começar.

1. Adição de um pop-up de pesquisa no menu do WordPress

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

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

Para isso, você precisa instalar e ativar o plug-in SearchWP Modal Search Form. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Esse plugin é um complemento do SearchWP, que é o melhor plugin de pesquisa do WordPress no mercado.

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

Depois de instalar o complemento, basta ir até a página Appearance ” Menus. Na coluna “Adicionar itens de menu”, clique na guia “SearchWP Modal Search Forms” para expandi-la.

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

O plug-in adicionará a busca ao seu menu de navegação. Clique no “Modal search form” (Formulário de pesquisa modal) abaixo dos itens de menu para expandi-lo e alterar o rótulo para Search (Pesquisar) ou qualquer outro que desejar.

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

Agora você pode visitar seu site para ver a opção Search adicionada ao menu de navegação. Ao clicar nele, o formulário de pesquisa será aberto em uma caixa de luz pop-up.

Para obter 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 plug-in Menu Image Icon. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, vá para a página Appearance ” Menus e passe o mouse sobre o item de menu em que deseja exibir um ícone ou uma imagem.

Clique no botão azul Menu Image para continuar.

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

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

Não se esqueça de clicar no botão Save changes (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 o ícone personalizado em itens de menu específicos.

Para obter instruções mais detalhadas, consulte nosso tutorial sobre como adicionar imagens nos menus do WordPress.

3. Adicionar links de login/logout a um menu específico do WordPress

Se você estiver usando um plug-in de associação do WordPress ou administrando uma loja on-line, talvez queira permitir que os usuários façam login facilmente em suas contas.

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

Mostraremos como adicioná-los usando um plug-in ou um snippet de código.

1. Adicionar links de login/logout aos menus usando um plug-in

Esse 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 Appearance ” Menu e clicar na guia Login/Logout para expandi-la.

Aqui, você precisa selecionar o item “Log in|Log out” e clicar no botão Add to Menu (Adicionar ao menu).

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

O link será alterado dinamicamente para login ou logout, dependendo do status de login do usuário.

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

2. Adicionar links de login/logout usando código personalizado

Esse método requer que você adicione código ao seu site WordPress. Se você nunca fez isso antes, dê uma olhada em nosso guia sobre como adicionar código personalizado no WordPress.

Primeiro, você precisa descobrir o nome que o tema do WordPress usa para o local específico do menu de navegação.

A maneira mais fácil de encontrar isso é visitando a página Appearance ” Menus e passando o mouse sobre a área de locais de menu.

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

Observe o nome usado para o local 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 plug-in 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 menu de navegação.

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

4. Adição de texto personalizado ao menu de navegação do WordPress

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

Há duas maneiras de fazer isso.

1. Adicionar texto personalizado a um menu específico (maneira fácil)

Basta acessar a página Appearance ” Menus e adicionar um link personalizado com o sinal # como URL e o texto que você deseja exibir como Link Text.

Clique no botão Add to 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 #.

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

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

2. Adicionar texto personalizado a um menu de navegação usando código

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

Depois disso, você precisa adicionar o seguinte código ao arquivo functions.php do tema ou a um plug-in 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;
}

Basta substituir onde está escrito “Custom Text” (Texto personalizado) por seu próprio texto.

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

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

5. Adicionar data atual no menu do WordPress

Deseja exibir a data atual em um menu de navegação no WordPress? Esse truque é útil se você tiver um blog ou site de notícias atualizado com frequência.

Basta adicionar o seguinte código ao arquivo functions.php do seu tema ou a um plug-in 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” pelo local do menu.

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

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

6. Exibir nome de usuário no menu do WordPress

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

Primeiro, você precisará adicionar o seguinte código ao arquivo functions.php do seu tema ou a um plug-in 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;
} 

Esse 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 conectado ou por uma saudação genérica para usuários não conectados.

Em seguida, você precisa ir para a página Appearance ” Menus e adicionar um novo link personalizado com o #profile_name# como texto do link.

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

7. Exibição dinâmica de menus condicionais no WordPress

Até agora, mostramos a você como adicionar diferentes tipos de itens personalizados a menus específicos do WordPress. No entanto, às vezes pode ser necessário mostrar dinamicamente diferentes itens de menu aos usuários.

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

Esse método permite que você crie vários menus e os exiba somente quando determinadas condições forem atendidas.

Primeiro, você precisa instalar e ativar o plug-in Conditional Menus. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, você precisa visitar a página Appearance ” Menus. A partir daí, você precisa criar um novo menu que deseja exibir. Por exemplo, neste exemplo, criamos um novo menu somente para usuários conectados.

Depois de criar o menu, vá para a guia Manage Locations (Gerenciar locais).

A partir daí, você precisa clicar no link Conditional Menus (Menus condicionais) ao lado do local do menu.

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

Em seguida, clique no botão “+ Conditions” para continuar.

Isso abrirá uma janela pop-up.

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

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

Você também pode mostrar menus diferentes com base nas funções do usuário e no status de login. Por exemplo, você pode mostrar um menu diferente para os 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. Talvez você também queira ver nosso guia sobre como escolher o melhor software de web design ou nossa comparação especializada do melhor software de bate-papo ao vivo para pequenas empresas.

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