Como Adicionar Itens Personalizados ao Menu do WordPress: Guia Completo 

Os menus do WordPress oferecem uma interface de arrastar e soltar incrivelmente intuitiva, facilitando a vida de desenvolvedores e usuários. Já exploramos como adicionar descrições aos menus e estilizar menus personalizados.

Contudo, a interface padrão limita a adição de itens a páginas, posts, categorias ou links. Mas e se você quiser incluir elementos dinâmicos, como uma barra de busca, botões de login/logout ou a data atual?

Embora a interface visual não ofereça essa opção, é totalmente possível com um pouco de código. Neste guia completo, mostraremos como utilizar o hook wp_nav_menu_items para adicionar praticamente qualquer item personalizado aos seus menus do WordPress.

(Sugestão: Insira aqui um vídeo do YouTube, se tiver um, mostrando o resultado final).

Índice do Conteúdo

1. O Hook Essencial: wp_nav_menu_items
2. Adicionando Botões Dinâmicos de Login/Logout
3. Inserindo uma Barra de Busca Funcional no Menu
4. Exibindo a Data Atual no Menu
5. Perguntas Frequentes (FAQ)

O Hook Essencial: wp_nav_menu_items

Nota: Este tutorial é direcionado a desenvolvedores e usuários com conhecimento básico de PHP e de como os temas do WordPress funcionam. As alterações são feitas no arquivo functions.php do seu tema filho (child theme).

Antes de tudo, certifique-se de que seu tema tenha um local de menu registrado (como ‘primary’ ou ‘main-menu’).

Para começar, usamos a função add_filter() para “enganchar” no wp_nav_menu_items. Este hook nos permite modificar a lista de itens (<li>) do menu antes que ela seja exibida na tela.

A estrutura básica é a seguinte:

<?php
add_filter('wp_nav_menu_items', 'adicionar_item_personalizado_exemplo', 10, 2);
function adicionar_item_personalizado_exemplo($items, $args) {
    // $args contém informações sobre o menu, como a localização do tema.
    // Verificamos se estamos no menu 'primary'.
    if ($args->theme_location == 'primary') {
        // Adicionamos nosso HTML personalizado ao final da lista de itens.
        $items .= '<li class="menu-item-personalizado">Meu Item!</li>';
    }
    // Retornamos a lista de itens modificada.
    return $items;
}

<?php
add_filter('wp_nav_menu_items', 'adicionar_item_personalizado_exemplo', 10, 2);
function adicionar_item_personalizado_exemplo($items, $args) {
    // $args contém informações sobre o menu, como a localização do tema.
    // Verificamos se estamos no menu 'primary'.
    if ($args->theme_location == 'primary') {
        // Adicionamos nosso HTML personalizado ao final da lista de itens.
        $items .= '<li class="menu-item-personalizado">Meu Item!</li>';
    }
    // Retornamos a lista de itens modificada.
    return $items;
}

Com essa base, vamos aos exemplos práticos.

1. Adicionando Botões Dinâmicos de Login/Logout

Oferecer um atalho para login e logout no menu principal melhora muito a experiência do usuário. Este código verifica se o usuário está logado e exibe o link apropriado.

Copie e cole no seu arquivo functions.php:

<?php
add_filter('wp_nav_menu_items', 'adicionar_link_login_logout', 10, 2);
function adicionar_link_login_logout($items, $args) {
    // Direciona apenas o menu na localização 'primary'.
    if ($args->theme_location == 'primary') {
        // Se o usuário estiver logado, mostra o link de "Sair".
        if (is_user_logged_in()) {
            $items .= '<li class="menu-item-logout"><a href="' . wp_logout_url() . '">Sair</a></li>';
        } 
        // Se não estiver logado, mostra o link de "Entrar".
        else {
            $items .= '<li class="menu-item-login"><a href="' . wp_login_url() . '">Entrar</a></li>';
        }
    }
    return $items;
}

<?php
add_filter('wp_nav_menu_items', 'adicionar_link_login_logout', 10, 2);
function adicionar_link_login_logout($items, $args) {
    // Direciona apenas o menu na localização 'primary'.
    if ($args->theme_location == 'primary') {
        // Se o usuário estiver logado, mostra o link de "Sair".
        if (is_user_logged_in()) {
            $items .= '<li class="menu-item-logout"><a href="' . wp_logout_url() . '">Sair</a></li>';
        } 
        // Se não estiver logado, mostra o link de "Entrar".
        else {
            $items .= '<li class="menu-item-login"><a href="' . wp_login_url() . '">Entrar</a></li>';
        }
    }
    return $items;
}

Melhoria: Usamos wp_logout_url() e wp_login_url() para gerar as URLs corretas e seguras, em vez de links fixos.

2. Inserindo uma Barra de Busca Funcional no Menu

Adicionar uma barra de busca diretamente no menu é uma excelente forma de manter os usuários engajados.

Copie e cole o código abaixo no seu functions.php:

<?php
add_filter('wp_nav_menu_items', 'adicionar_barra_de_busca_menu', 10, 2);
function adicionar_barra_de_busca_menu($items, $args) {
    if ($args->theme_location == 'primary') {
        $items .= '<li class="menu-item-busca">
                        <form role="search" method="get" class="search-form" action="' . home_url('/') . '">
                            <label>
                                <span class="screen-reader-text">Buscar por:</span>
                                <input type="search" class="search-field" placeholder="Buscar..." value="" name="s" title="Buscar por:" />
                            </label>
                            <input type="submit" class="search-submit" value="Buscar" />
                        </form>
                    </li>';
    }
    return $items;
}

<?php
add_filter('wp_nav_menu_items', 'adicionar_barra_de_busca_menu', 10, 2);
function adicionar_barra_de_busca_menu($items, $args) {
    if ($args->theme_location == 'primary') {
        $items .= '<li class="menu-item-busca">
                        <form role="search" method="get" class="search-form" action="' . home_url('/') . '">
                            <label>
                                <span class="screen-reader-text">Buscar por:</span>
                                <input type="search" class="search-field" placeholder="Buscar..." value="" name="s" title="Buscar por:" />
                            </label>
                            <input type="submit" class="search-submit" value="Buscar" />
                        </form>
                    </li>';
    }
    return $items;
}

Melhoria: O atributo action do formulário agora usa home_url('/'), garantindo que funcione em qualquer instalação do WordPress, e adicionamos elementos de acessibilidade como role="search" e screen-reader-text. Você precisará de um pouco de CSS para estilizar o formulário e integrá-lo ao design do seu tema.

3. Exibindo a Data Atual no Menu

Para sites de notícias ou blogs que publicam com frequência, exibir a data atual pode ser um toque interessante.

Copie e cole este código no seu functions.php:

<?php
add_filter('wp_nav_menu_items', 'adicionar_data_atual_menu', 10, 2);
function adicionar_data_atual_menu($items, $args) {
    if ($args->theme_location == 'primary') {
        // Usamos date_i18n para garantir que a data seja traduzida.
        $data_atual = date_i18n('l, j \d\e F \d\e Y');
        $items .= '<li class="menu-item-data">' . esc_html($data_atual) . '</li>';
    }
    return $items;
}

<?php
add_filter('wp_nav_menu_items', 'adicionar_data_atual_menu', 10, 2);
function adicionar_data_atual_menu($items, $args) {
    if ($args->theme_location == 'primary') {
        // Usamos date_i18n para garantir que a data seja traduzida.
        $data_atual = date_i18n('l, j \d\e F \d\e Y');
        $items .= '<li class="menu-item-data">' . esc_html($data_atual) . '</li>';
    }
    return $items;
}

Melhoria: Substituímos a função date() por date_i18n(), a função nativa do WordPress para exibir datas que respeitam o idioma configurado no seu site.

Conclusão

Personalizar os menus do WordPress com o hook wp_nav_menu_items abre um mundo de possibilidades. Com apenas algumas linhas de código, você pode adicionar funcionalidades que melhoram a navegação, o engajamento e a experiência geral do usuário no seu site.

Se este guia foi útil, compartilhe-o com outros desenvolvedores! Deixe um comentário abaixo se tiver alguma dúvida ou sugestão.

Perguntas Frequentes (FAQ)

P: Como aplico essas mudanças a um menu diferente? R: No código, altere a condição if ($args->theme_location == 'primary') para o nome da localização do seu menu (ex: 'secondary' ou 'footer').

P: Posso adicionar um ícone junto com o texto do menu? R: Sim! Dentro do HTML que você adiciona ($items .= '...'), você pode incluir a tag de um ícone, como <i class="fa fa-search"></i>, se o seu tema já carregar uma biblioteca de ícones como Font Awesome.

P: Adicionar esse código pode quebrar meu site? R: Se copiado corretamente, o código é seguro. No entanto, sempre faça alterações em um tema filho (child theme) e tenha um backup recente do seu site antes de modificar o arquivo functions.php.