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:

Clique 2x para copiar


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;
}

Clique 2x para copiar
1 2 3 4 5 6 7	`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.

Clique 2x para copiar


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;
}

Clique 2x para copiar
01 02 03 04 05 06 07 08 09 10	`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:

Clique 2x para copiar


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;
}

Clique 2x para copiar
1 2 3 4 5 6 7	`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.

Clique 2x para copiar


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;
}

Clique 2x para copiar
01 02 03 04 05 06 07 08 09 10	`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.

AVALIE GORA MESMO!