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.
Jiří Vaněk
I like the implementation of the search, where instead of the classic empty field, there is a popup window. It looks like a nice solution. I was also interested in the date and personalization of the logged in user. Thanks for the inspiration.
reza
very helpful and simple
thanks thanks thanks
WPBeginner Support
Glad our guide was helpful
Administrador
Denis
Hello,
thanks a lot for that code. Is there a way to reorder the MENU? For example I want to have the Log in Log out button at first in the MENU. Just for an example.
Cheers,
Denis
WPBeginner Support
For the moment with this code, we do not have a simple method for reordering where the additions are placed compared to the menu items at the moment.
Administrador
Ben Short
I’m sure this is too late for Denis! But in case anyone else wants their menu item to come FIRST in the list of menu items, rather than LAST, here’s an example of code I’ve used for this purpose:
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;
}
Karen
Is there a way to have an entry on your menu bar set to appear at a certain time and another item set to expire?
WPBeginner Support
Unless I hear otherwise, we do not have a recommended time based conditional display that we would recommend.
Administrador
Mary
How to add in my secondary menu footer class li items in functions.php…?
Saurabh Saneja
Hi,
How can I add a search form at the beginning of the menu items list?
Thanks,
Saurabh
PS: big fan of your tuts
Igor
This is great. But would it be possible to add a menu within a menu?
I want to append a language menu to my primary menu.
I get the language menu on the page but not in the desired place.
instead of
Annemarie
Thank you for this! Just what I needed in a project.
Tasneem
I used the code for teh search box it works perfect.
Anuj
Nice article, Help me alot.
Garratt
Does this code still work? Not seeing anything on my menu, even just using the basic function with text. Not using any special type of menu, just ‘X’ & child theme.
Garratt
never-mind, sorry just read this: “Obviously, you need to have custom menu enabled in your themes before you can proceed any further.”
Garratt
OK so I was still having the problem even though my menu was custom, and messed around until I removed the condition. (IF), once I did that it displayed on all pages including homepage.
`add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
function your_custom_menu_item ( $items, $args ) {
$items .= ‘Show whatever’;
return $items;
}
sahar
It worked but it destroyed responsivity…I had to remove code
Gerson
How add this menu item in first position ?
Gwen
Awesome, Thanks you just saved me hours.
Dilip
What is use of 10,2 in the code
WPBeginner Support
10 specifies the order in which the functions associated with a particular action are executed. Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order in which they were added to the action.
2 is for the number of arguments the function accepts.
Administrador
Pat
This is so useful and just what I needed! Thank you very much for sharing.
Matt
The Log-in link won’t show up, just the log out link. What could cause this?
Ritchie Pettauer
This is an awesome, straight-to-the point tutorial. I want an item with today’s date (“headlines | DATE”) in one of my menus.
I didn’t expect the first posting I found to solve my problem
thx guys.
Bill Gram-Reefer
works but (lol) for my situation I want to add “Search” to the primary header as if it were just another item that got checked in
appearance/menus/add-to-menu
Everything I’ve seen creates a whole new…what is it a div…(?)
that adds a whole new row to the header instead of p[lacing the form in the same row as ABOUT, etc. items in the primary navigation edit window.
AND take the css assigned to the navigation bar.
Josalone Wordsworth
I really liked the post, so useful. However lets say I want to add a login and logout link in the footer with and if condition
Hugo Callens
Related question: how to add a menu item based on a specific user role?
Say I have a custom user role called “Student” and I would like to add an item to the menu only when the user has the role of “Student”?
Monilal
Its works but current menu item not select
james
is there a way to add it on certain submenu instead of top ul?
Jonathan
I’d like to know the same thing. Anyone have an answer on how to add it in a certain submenu?
Gerrit
Thank you for the How To!
To be honest I don’t understand how you call the function.
Especially I am missing a mention what arguments you call the functions with i.e. what wp variables to hand over as $items and $args.
Could you please detail for a wp-beginner?
Thank you,
Gerrit
samuel
hey how if i want to add it to sub menu ?
lokitoki
hm any ideas how i could add html tags to just one wordpress menu item.
from this:
Contact
to this:
Contact
it should be only for one menu item. not to all
amit
the option is available on wp admin panel
lokitoki
hm any ideas how i could edit the tag for one wordpress menu item.
from this:
Contact
to this:
Contact
it should be only for one menu item. not to all
gonzela2006
Hello,
How can I add the following classes active and current-menu-item and the id menu-item-id ?
Lại Đình Cường
How about add new custom menu to specific position?
Guillermo
I want put a little image beside left to the menu home, how can put it?
please help me
Pierre Laflamme
In your examples, you add items to the primary menu (theme_location == ‘primary’).
How would I add an item in a specific menu in widget area? Where do I get the theme_location?
WPBeginner Support
theme locations are usually defined by your theme, check your theme’s functions.php file or the template where a menu is displayed.
Administrador
Brad Trivers
If you want to target a specific menu (not a theme location) then use $args->menu->slug == ‘the_menu_slug’ instead of $args->theme_location == ‘primary’.
Xúlio Zé
Really useful!
Thank you vary much Brad
^-^
Peter Lalor
Hi Brad,
Would you be able to tell me how I find out what the value of ‘the_menu_slug’ is?
Thanks,
Peter
razvan
Hi! I used your tutorial to put a picture as a logo overlapping the menu bar. All is fine but this specific menu has a hover option that makes the color white… So when i hover the mouse on the logo, it also hovers the link which kind of ruins the aspect of the page.
This is my code:
if( $args->theme_location == ‘primary’ )
return ““.$items;
How can I hide the a href on the page and just display the image with link?
Thanks in advance
Kathy
Hi, I think your code is close to what I’m looking for, but I’m trying to figure out how i can customize it to do what I’m trying to do!
What I am trying to do is create a menu item with dropdown list of authors? any idea how i can accomplish that?
Thanks so much!
Erik Mitjans
Hi Kathy!
I was working on this since days and I finally got it working.
Take a look at: http://wordpress.org/support/topic/creating-a-dropdown-in-menu-that-lists-authors/page/2?replies=45#post-5103035
Also, take into consideration I’m adding extra classes and attributes cause the theme is Bootstrap based. You might not need all that.
Cheers!
Eric
sachi
awesome i was searching these codes
Brad
Thanks this was very helpfull,
However, out of curiosity, I can’t find this valuable filter hook: “‘wp_nav_menu_items” , I mean where in WP core files is this being called ??
Thanks much !!
WPBeginner Support
It is located in wp-includes/nav-menu.php, however it is not recommended to modify core files. It is a filter and you can call it in your theme’s
functions.phpfile or a site specific plugin.Administrador
Lavinia
This isn’t work for me
Andor Nagy
How can I place it in front of the first menu item? Otherwise great tutorial!
Regards,
Andor Nagy
Editorial Staff
Use the return example of the search bar and move the items towards the end?
Administrador
Cameron Jones
add_filter( ‘wp_nav_menu_items’, ‘your_custom_menu_item’, 10, 2 );
function your_custom_menu_item ( $items, $args ) {
$custom = ‘Show whatever’;
$items = $custom.$items;
return $items;
}
Murugu
Pardon my ignorance but which php file would I be editing?
Editorial Staff
This would go in your functions.php file.
Administrador
Murugu
I added the following to my theme’s functions.php but the search box doesn’t show up like I would expect. Any suggestions?
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;
}
Elliott Wall
Sorry to be coming into this discussion so late
I’ve tried the search form part and it works great— thank you! I’m having problems styling it though, for some reason. No matter what I do the placeholder text in the field is gray. I’ve looked at the cascading of the styles and messed with so many things— I can change the background color for example, but no luck in making the text black, so the design continuity of the menu is somewhat compromised. My site is http://elliottwall.com if you care to have a look. Cheers
Editorial Staff
For placeholder text, you have to do something like this:
::-webkit-input-placeholder { color: red; } :-moz-placeholder { /* Firefox 18- */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; } :-ms-input-placeholder { color: red; }1-click Use in WordPress
Administrador
Elliott Wall
This worked perfectly— thank you again!
Sam
Can we add custom link before the first item instead of at the end?
xafar Ali
Yes , just concatenate first instead of last.
$items = “MENU ITEM ” . $items;
piomat
beer!
SAcha
Hi,
very interesting!
I added a custom link, but is it possible to add it in a certain position inside the menu? Like “after the first menu item”.
Thanks
Editorial Staff
Not sure if that is possible.
Administrador