Os menus do WordPress são incríveis. A interface de Arrastar e Soltar torna tudo realmente muito fácil para desenvolvedores de temas WordPress e usuários. Nos artigos anteriores nós lhe mostramos Como Adicionar Descrição no Menu WordPress e Como Estilizar um Menu Personalizado.
Uma coisa que é limitada na interface visual dos menus é que você só pode adicionar Links (páginas, categoria, ou links personalizados). E se você desejar adicionar um item personalizado no menu do WordPress? Talvez você deseje adicionar uma barra de busca, ou um botão de Log in/out, Data de hoje, ou qualquer coisa em um menu WordPress. Só porque não existe nenhuma interface visual, isso não significa que não seja possível. Neste artigo, nós iremos lhe mostrar como utilizar o hook wp_nav_menu_items para adicionar itens em todos os menus WordPress.
Adicionando Item Personalizado no Menu WordPress
Nota: Este tutorial foi feito para desenvolvedores de tema, então é esperado que você tenha um conhecimento básico de html/css e um entendimento justo de como um tema WordPress funciona.
Obviamente, você precisa ter um menu personalizado ativado no seu tema antes de tomarmos qualquer passo a fundo.
Vamos começar com o básico. Nós precisamos adicionar nosso próprio filtro em wp_nav_menu_items. Um bom exemplo seria assim:
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') { $items .= '<li>Show whatever</li>'; } return $items; }
Agora como você pode ver, você pode usar as instruções condicionais, juntamente com o argumento theme_location. Isso permite a você ter um menu especifico como alvo com qualquer condição que você desejar. Se você não quer ter uma instrução de condição, você não precisa utilizar ele. Apenas adiciona-lo em uma localização especifica.
Agora que você viu um exemplo básico, vamos mostrar alguns exemplos de como isso deve funcionar.
Adicionando Botões de Log in/out no Menu do WordPress
Se você quer dar aos seus usuários a habilidade de log in/out, então bom lugar para adicionar estes links seria em seu menu personalizado. O código abaixo permitirá a você exibir um link de log in/out para os seus usuários apropriadamente em seu menu primário. Você pode utilizar outro menu se desejar.
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; }
Adicionando uma Barra de Buscas no Menu WordPress
Quer adicionar uma barra de buscas em algum menu especifico? Bem, você já não precisa buscar mais. Você pode fazê-lo adicionando o seguinte código:
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 == 'primary' ) return $items."<li class='menu-header-search'><form action='http://exemplo.com/' id='searchform' method='get'><input type='text' name='s' id='s' placeholder='Buscar'></form></li>"; return $items; }
Adicionando a Data Atual no Menu do WordPress
O código abaixo irá exibir a data de hoje no seu menu do WordPress.
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>' . $todaysdate . '</li>'; } return $items; }
Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixa seu comentário abaixo para podermos saber a sua opinião.
Ferramentas WordPress Veja Mais Ferramentas
OptinMonster
MailChimp
WPForms
Bom dia, gostaria de saber como posso colocar o nome do usuário que está logado antes do botão de Logout, por exemplo: Olá Usuário e em seguida o botão. Obrigada
Boa tarde Gabriel,
adicionei o código para inserir uma barra de busca no menu no arquivo funcion.php do meu tema, mas não aconteceu nada. Pode me orientar por favor?
Olá Gabriel, por favor, como posso inserir linha separadora entre dois itens do menu?
Olá Gabriel,
Não funcionou para mim a função do Botão Login/Logout.
Obrigado.
Olá Marcio,
Obrigado por deixar o comentário.
Você adicionou o código no functions.php?
Tente deletar o código informado no artigo e utilizar esse:
http://pastebin.com/kdnHg6sX
Abraço.
Olá Gabriel,
Desculpe a minha ignorância mas estou começando.
Aonde insiro este código para adicionar a barra de buscas no menu no wordpress?
Fico no aguardo e desde já agradeço!
Olá Tassila,
Você precisa inserir o código no final do arquivo functions.php que fica dentro da pasta do seu tema.
Você vai precisar acessar o site via FTP, nós temos tutorial aqui sobre como utilizar FTP.
Se ainda tiver dúvida fico a disposição.
Abraço.
Deu super certo aqui!
Mto obrigada Gabriel!!!
Olá!
Gostaria de saber se é possível criar um menu em que um dos itens contenha subitens, mas que o item não seja “clicável”, somente os subitens, ou seja, que o usuário passe somente o mouse por cima do item e abre a aba com os subitens.
Att,
Luiza
Olá Luiza,
É possível sim. Para fazer isso você vai precisar criar um menu com um link personalizado (essa opção fica do lado esquerdo junto com as páginas, categorias e etc).
No valor URL coloque um # (jogo da velha), e em texto do link o nome que vai aparecer no menu.
Veja se funciona e me dê o retorno.
Abraço.
Bom dia Gabriel!
Porque que quando eu utilizo algum plugin que me permita colocar um menu na widget de uma pagina especifica! quando eu abro a pagina aparece como se as paginas que eu adicionei ao menu estivessem sem nome?
Olá Junior,
Obrigado por deixar seu comentário.
Provavelmente seu tema deve estar causando esse comportamento ou algum outro plugin. Recomendo que troque o tema por um padrão do WordPress e desative todos os plugins exceto o que você precisa testar. Verifique se o problema continua após as alterações.
Abraço.