O menu é o esqueleto do seu site. Um visitante analisa-o em segundos: se não for claro onde clicar, ele sai. O construtor básico do WordPress em «Aparência → Menus» monta a navegação num minuto, mas o resultado parece uma simples sequência de texto. Sem ícones, sem comportamento fixo ao fazer scroll, sem uma versão móvel adequada.

O problema é mais profundo do que parece: a funcionalidade padrão é suficiente para os primeiros dias após o lançamento, mas rapidamente precisa de coisas que simplesmente não existem no núcleo. Ícones para os itens do menu, um botão de início de sessão na própria navegação, um shortcode para inserir um menu no corpo de um artigo, um painel móvel inteligente: tudo isto requer código ou um plugin.

Este artigo cobre ambas as abordagens: ajustes leves via functions.php e style.css, além dos melhores plugins ativamente mantidos para menus avançados. O material funciona com temas clássicos, temas de blocos e em combinação com qualquer framework popular.

💡 Visão geral rápida:

• Instale o plugin Menu Icons e adicione ícones aos itens do menu em cinco minutos, sem código
• Insira a função wp_loginout no functions.php e um botão de início de sessão aparece na própria navegação
• Registe um shortcode de menu e apresente um menu pronto em qualquer parte do site
• Torne o menu fixo ao fazer scroll com três linhas de CSS ou um de três plugins
• Escolha um construtor avançado entre três opções: UberMenu, Max Mega Menu ou QuadMenu
• Configure a navegação móvel com o WP Mobile Menu ou o Mobi, com uma interface adaptada ao toque

1. Ícones nos itens do menu com o Menu Icons

Uma forma rápida de animar a navegação: adicione ícones ao lado dos nomes das secções. O olho «capta» um ícone antes do texto e, após algumas visitas, o ícone fixa-se na memória melhor do que qualquer etiqueta.

O plugin gratuito Menu Icons, da equipa ThemeIsle, trata desta tarefa, com mais de 400.000 instalações ativas no WordPress.org e uma classificação de 4,4. Não requer código.

Passos:

• Instale o plugin através de «Plugins → Adicionar novo» e procure por «Menu Icons»
• Ative e vá a «Aparência → Menus»
• Expanda qualquer item e aparece um bloco de seleção de ícones
• Escolha um ícone do Dashicons (integrado no WordPress), Font Awesome ou carregue o seu próprio
• Ajuste a posição e o tamanho e, em seguida, guarde

Internamente, o plugin adiciona uma classe CSS com o ícone ao elemento <li>: uma solução limpa, sem conflitos com o tema. Suporta Dashicons, Font Awesome, Elusive Icons e Genericons. Funciona com qualquer menu registado através do wp_nav_menu padrão.

🔗 Menu Icons no WordPress.org

2. Botão de início e fim de sessão no próprio menu

Se o seu site tem registo, os utilizadores precisam de acesso rápido sem ter de procurar a página /wp-login.php. Um link «Iniciar sessão» ou «Terminar sessão» fica no menu principal e muda automaticamente com base no estado.

Isto resolve-se com uma função no functions.php:

1
function add_login_logout_link($items, $args) {
2
    $loginoutlink = wp_loginout('index.php', false);
3
    $items .= '<li>'. $loginoutlink .'</li>';
4
    return $items;
5
}
6
add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);

O excerto liga-se ao wp_nav_menu_items e anexa um <li> com o link ao final de qualquer menu. A função wp_loginout() deteta o estado por si própria: se o utilizador não tiver sessão iniciada, mostra «Iniciar sessão»; se estiver autenticado, «Terminar sessão» com um redirecionamento para a mesma página.

Depois de guardar o ficheiro, recarregue o site e verifique ambos os estados. Se precisar de redirecionar o utilizador para uma página específica após o início de sessão, substitua o primeiro argumento de wp_loginout() de 'index.php' pelo URL desejado.

3. Shortcode para mostrar um menu em qualquer lugar

O WordPress permite atribuir um menu ao cabeçalho, rodapé ou área da barra lateral, exatamente onde o tema reservou espaço. Mas e se precisar de um menu dentro de um artigo, numa página de destino ou num widget de texto?

A resposta é registar o seu próprio shortcode:

1
function menu_function($atts, $content = null) {
2
    extract(
3
        shortcode_atts(
4
            array( 'name' => null, ),
5
            $atts
6
        )
7
    );
8
    return wp_nav_menu(
9
        array(
10
            'menu' => $name,
11
            'echo' => false
12
        )
13
    );
14
}
15
add_shortcode('menu', 'menu_function');

Adicione o código ao functions.php, guarde e, em qualquer parte do site, escreva:

[menu name="main-menu"]

Obtenha o nome em «Aparência → Menus», onde aparece acima da lista de itens. O shortcode chama o wp_nav_menu() padrão com a saída suprimida ('echo' => false) e devolve a marcação HTML finalizada.

Desta forma, pode manter a navegação comum no rodapé, a navegação adicional na barra lateral de um artigo específico e montar um menu separado para uma página de destino, sem qualquer dependência do tema.

4. Campo de pesquisa na barra de navegação

O widget de pesquisa padrão do WordPress reside na barra lateral. Mas se não houver barra lateral ou se esta se deslocar para o fundo em dispositivos móveis, os visitantes simplesmente não encontrarão a pesquisa. Vamos movê-la diretamente para o menu.

Versão básica usando a mesma técnica de filtro wp_nav_menu_items:

1
add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
2
function add_search_box( $items, $args) {
3
    $items .= '<li>'. get_search_form( false ). '</li>';
4
    return $items;
5
}

A função get_search_form(false) devolve o HTML do formulário de pesquisa sem o apresentar no ecrã. O campo será anexado ao último item do menu; provavelmente precisará de posicionamento. Adicione uma classe CSS ao <li>:

1
$items .= '<li class="searchbox-position">'. get_search_form( false ). '</li>';

E no style.css do seu tema, especifique as margens:

1
.searchbox-position {
2
    margin-top: 15px;
3
    margin-right: 20px;
4
}

Três linhas de PHP e um par de linhas de CSS. Resultado: o campo de pesquisa fica sempre visível em qualquer resolução.

5. Menu fixo ao fazer scroll

Um menu fixo é quando a barra de navegação adere ao topo do ecrã e acompanha o utilizador ao longo da página. É prático em landing pages, artigos longos e lojas: não é preciso voltar atrás para navegar para outra secção.

Método 1: CSS (gratuito, sem plugins)

Encontre o seletor do menu principal no seu tema, normalmente .nav-menu, .genesis-nav-menu ou .main-navigation. Adicione ao style.css:

1
.nav-menu {
2
    position: fixed;
3
    background: #333;
4
    top: 0px;
5
    right: 0px;
6
    left: 0px;
7
    z-index: 99;
8
}

A linha fundamental é position: fixed. Remove o bloco do fluxo normal e fixa-o em relação à janela do navegador. top: 0; right: 0; left: 0 estica o menu para ocupar toda a largura. Adicione um padding superior ao conteúdo para que o menu não cubra o cabeçalho.

O método CSS tem uma desvantagem: depois de fixo, o menu sai do fluxo e o conteúdo «salta» para cima. Isto resolve-se adicionando padding-top ao body com um valor igual à altura do menu.

Método 2: plugins (controlo mais fino, sem código)

Se preferir não mexer nos ficheiros do tema, aqui ficam três ferramentas comprovadas.

myStickymenu é um plugin gratuito com mais de 200 000 instalações ativas no WordPress.org e uma classificação de 4,6. Liga-se à classe CSS de navegação do seu tema; basta indicá-la nas definições. É responsivo: em dispositivos móveis, o efeito fixo é desativado automaticamente. Tem um campo para estilos CSS personalizados e um modo «fixar com atraso» baseado nos pixéis de scroll.

Sticky Menu (or Anything!) On Scroll é outra opção gratuita que pode «fixar» qualquer elemento através de um seletor CSS: não apenas um menu, mas também um logótipo, cabeçalho inteiro ou botão. Requer conhecimentos básicos de HTML e CSS para encontrar o seletor certo, mas oferece total liberdade.

UberMenu Sticky Extension é um extra para o plugin UberMenu por 8 $. Se o UberMenu já estiver instalado, a extensão adiciona o modo fixo com um simples interruptor. Em dispositivos móveis, desativa-se automaticamente para evitar cobrir o ecrã.

6. Remover itens do menu da administração do WordPress

Quando entrega um site a um cliente ou dá acesso a autores, a administração padrão é demasiado «rica»: mais de 10 secções, muitas das quais o utilizador não precisa e algumas são até perigosas. As definições de plugins e do tema devem permanecer acessíveis apenas aos administradores.

O código abaixo remove todas as secções de topo para todos os utilizadores, exceto administradores:

1
if (!current_user_can( 'manage_options' )) {
2
    add_action( 'admin_menu', 'my_remove_menus', 999 );
3
}
4
function my_remove_menus() {
5
    remove_menu_page( 'index.php' );                  //Dashboard
6
    remove_menu_page( 'edit.php' );                   //Posts
7
    remove_menu_page( 'upload.php' );                 //Media
8
    remove_menu_page( 'edit.php?post_type=page' );    //Pages
9
    remove_menu_page( 'edit-comments.php' );          //Comments
10
    remove_menu_page( 'themes.php' );                 //Appearance
11
    remove_menu_page( 'plugins.php' );                //Plugins
12
    remove_menu_page( 'users.php' );                  //Users
13
    remove_menu_page( 'tools.php' );                  //Tools
14
    remove_menu_page( 'options-general.php' );        //Settings
15
}

O snippet vai no functions.php. A verificação !current_user_can('manage_options') exclui os administradores; eles veem tudo. Os outros perfis recebem uma lista reduzida com base no que deixar ficar.

Remova apenas as linhas remove_menu_page de que precisa. Por exemplo, para um editor pode deixar «Artigos», «Multimédia» e «Páginas», removendo todo o resto. Nota importante: a função oculta itens do menu, mas não bloqueia o acesso direto por URL. Para um bloqueio total da página, configure as capacidades no perfil de utilizador.

7. Plugins avançados para criação de menus

Quando o editor padrão não é suficiente, precisa de mega menus com imagens, separadores, formulários e elementos dinâmicos. Aqui estão três plugins ativamente mantidos para diferentes tarefas e orçamentos.

7.1 UberMenu: o construtor mais rico em funcionalidades

Um veterano do mercado com mais de 43.000 vendas no CodeCanyon. Cria mega menus responsivos com suporte para toque. Pode colocar imagens, vídeo, mapas e um formulário de contacto pronto a usar dentro dos submenus. Mais de 50 definições de estilo com pré-visualização ao vivo, geração automática de submenus a partir do conteúdo e separadores sob os itens. Integra-se com o WooCommerce: pode extrair dinamicamente categorias de produtos.

Preço: a partir de $26. 🔗 UberMenu no CodeCanyon

7.2 Max Mega Menu: o líder gratuito

O plugin de mega menu gratuito mais popular no WordPress.org: mais de 400.000 instalações ativas e uma classificação de 4,8. Constrói mega menus através de arrastar e largar no ecrã padrão «Aparência → Menus», sem uma interface separada. Suporta grelhas de colunas, widgets dentro dos submenus, ícones e modo off-canvas para mobile. O script de frontend pesa menos de 2 KB comprimido, pelo que não afeta a velocidade do site.

• Vantagens: integrado na interface nativa de menus do WordPress, peso mínimo do script, widgets dentro dos submenus, a versão gratuita cobre 90% dos casos de uso
• Desvantagens: alguns estilos avançados e menus com separadores apenas na versão Pro ($29/ano)
• Preço: Gratuito / Pro a partir de $29/ano
• Transferência: 🔗 Max Mega Menu no WordPress.org

7.3 QuadMenu: separadores, carrosséis e personalização total

O QuadMenu transforma o menu padrão num mega menu com separadores e carrosséis, oferecendo mais funcionalidades do que o Max Mega Menu, mas com uma curva de aprendizagem ligeiramente superior. Suporta layouts verticais e horizontais, integração com o Elementor e o Beaver Builder, Google Fonts e mais de 2.000 ícones Font Awesome. Temas escuro e claro prontos a usar, versão mobile responsiva com painel off-canvas.

• Vantagens: separadores e carrosséis dentro do menu, integração profunda com construtores de páginas, amigável para developers (hooks e filtros)
• Desvantagens: configuração inicial mais complexa do que o Max Mega Menu, algumas funcionalidades apenas na versão paga
• Preço: Gratuito / Premium a partir de $15/ano
• Transferência: 🔗 QuadMenu no WordPress.org

8. Menus mobile para smartphones e tablets

O tráfego mobile ultrapassou o desktop há muito tempo. Se o menu se transformar numa confusão ilegível num telefone, os visitantes vão embora. Um tema responsivo adapta o menu de desktop para ecrãs estreitos, mas a estrutura permanece a mesma: cinco ou seis itens numa linha tornam-se uma longa lista vertical. Um plugin especializado fornece um botão de hambúrguer, deslizes e otimização para toque.

8.1 WP Mobile Menu: off-canvas rápido para qualquer site

O plugin gratuito de menu móvel mais popular no WordPress.org: mais de 80 000 instalações ativas e uma classificação de 4,7. Adiciona um painel fora da tela que desliza quando se toca no botão de hambúrguer. Suporta três níveis de aninhamento, pesquisa dentro do menu móvel, ícones e personalização de cores. O comportamento para diferentes resoluções de ecrã é configurado separadamente.

• Vantagens: configuração mínima (funciona imediatamente após a ativação), adaptável (mostra apenas em dispositivos móveis), não entra em conflito com temas
• Desvantagens: alguns estilos avançados e integração com WooCommerce na versão Pro (19 $/ano)
• Preço: Grátis / Pro a partir de 19 $/ano
• Download: 🔗 WP Mobile Menu no WordPress.org

8.2 Mobi: construtor de menu móvel por arrastar e largar

Um construtor de menus intuitivo por arrastar e largar. O menu pode ser colocado no topo ou no fundo do ecrã. Inclui mais de 700 ícones incorporados, qualquer número de ícones de redes sociais no painel e Google Fonts para estilização. Pode controlar a visibilidade do menu para visitantes e utilizadores com sessão iniciada separadamente. Adequado para sites onde o menu móvel deve parecer uma interface autónoma, em vez de uma cópia encolhida da versão para desktop.

Preço: a partir de 16 $. 🔗 Mobi no CodeCanyon

⁉️🤔 Perguntas frequentes

Posso criar um menu totalmente sem plugins, apenas com código?

Sim, todas as técnicas descritas (ícones, efeito sticky, shortcode, botão de login) podem ser implementadas através do functions.php e style.css sem instalar ferramentas de terceiros. Os plugins simplesmente poupam tempo e fornecem uma interface gráfica para quem prefere não mexer em código. Se tem conhecimentos de PHP e CSS, os plugins não são obrigatórios. Mas quando precisa de mega menus ou de um painel fora da tela com animações, um plugin pronto poupa horas de codificação manual.

Que plugin devo escolher para uma loja WooCommerce?

Para uma loja, um mega menu com categorias de produtos, imagens e filtros é fundamental. O UberMenu tem o melhor desempenho aqui: obtém dinamicamente as categorias do WooCommerce e constrói submenus em tempo real. Uma alternativa gratuita é o Max Mega Menu com widgets dentro dos submenus: as imagens das categorias são obtidas através do widget padrão do WooCommerce e a pesquisa recebe uma linha separada.

O que devo fazer se o site deixar de carregar depois de adicionar código ao functions.php?

Restaure o ficheiro original via FTP ou através do gestor de ficheiros do seu alojamento. Antes de qualquer edição no functions.php, faça uma cópia de segurança. Uma abordagem alternativa segura é o plugin Code Snippets: permite adicionar snippets PHP através da administração e desativa automaticamente o código em caso de erro fatal, devolvendo o site ao funcionamento normal.

Preciso de atualizar o menu depois de mudar o tema do WordPress?

Os menus estão associados a uma área de exibição (localização) que o tema regista. Quando muda de tema, estas áreas mudam e precisa de reatribuir o menu em "Aparência → Menus" no separador "Gerir Localizações". Os itens em si, a sua ordem e aninhamento, são preservados; apenas a associação à localização se perde.

Como verifico se o menu móvel funciona em todos os dispositivos?

Abra o site no modo de design responsivo nas Chrome DevTools (F12 → ícone do dispositivo) e percorra seis pontos de quebra: 320px, 375px, 414px, 768px, 1024px, 1280px. Verifique o botão de hambúrguer (deve estar acima do conteúdo, não sobreposto), a velocidade de resposta da animação e a visibilidade de todos os itens do menu sem scroll horizontal. Plugins populares como o WP Mobile Menu permitem definir manualmente o ponto de quebra, permitindo especificar larguras de disparo diferentes para o seu tema específico.

O que usar para a sua tarefa: a análise final

Resumindo: esgote primeiro as capacidades nativas do WordPress e os ajustes leves de CSS, depois adicione plugins. Isto mantém a stack mínima, o site rápido e a navegação exatamente como os leitores precisam.

• Blog simples ou site de cartão de visita: comece com Menu Icons (grátis) e menu sticky com três linhas de CSS. Isso é suficiente para que a navegação deixe de parecer crua.
• Site com registo: adicione um botão de login via wp_loginout(). Os utilizadores deixarão de procurar a página de login.
• Landing page ou artigo longo: o shortcode [menu] coloca blocos de navegação em qualquer parte do corpo da página.
• Loja de e-commerce ou portal de conteúdo: aqui precisa de um mega menu. Opte pelo UberMenu se o orçamento permitir e precisar do máximo de funcionalidades, ou pelo Max Mega Menu para tarefas típicas (gratuito e sem perda de velocidade).
• Audiência móvel dominante: o WP Mobile Menu cobre 9 em cada 10 cenários: instala-se num minuto e fornece imediatamente um painel fora da tela com pesquisa. Se precisar de uma interface móvel mais autónoma, veja o Mobi.

Estabeleça uma regra: um plugin por tarefa. Não instale um mega menu apenas para ter dois ícones, e não escreva código para um painel fora da tela quando um plugin o faz num minuto. O equilíbrio entre a velocidade do site e a conveniência da navegação é exatamente o que mantém os leitores na página.