Skip to content

Tudo para WordPress, desenvolvimento web — e não só

🔑 Botão de login e logout no menu do WordPress: 2 métodos funcionais

🔑 Botão de login e logout no menu do WordPress: 2 métodos funcionais

Precisa de um botão «Log In» no menu que se transforme automaticamente em «Log Out» após a autorização? Esta tarefa surge em praticamente todos os sites com registo: fóruns, lojas online, LMS, portais de membros e até blogues com comentadores.

Anteriormente, o plugin baw-login-logout-menu tratava disto. Em junho de 2025, o autor solicitou a remoção do diretório do WordPress.org. O plugin não era atualizado há 9 anos, utilizava a função create_function, removida do PHP 8, e continha uma vulnerabilidade XSS. Na prática, dois em cada três sites onde o encontrámos já tinham migrado para soluções modernas.

Abaixo estão dois métodos funcionais que fazem exatamente o mesmo: rápido via plugin e completo com código próprio. Ambos testados nas versões atuais do WordPress e PHP.

💡 Visão geral rápida:

  • Instale o plugin Login Logout Menu, arraste o item para o seu menu e configure os redirecionamentos.
  • Adicione o filtro wp_nav_menu_items ao functions.php do seu tema filho para controlo total.
  • Inclua ícones Font Awesome via Better Font Awesome ou uma linha wp_enqueue_style.

Método 1: plugin Login Logout Menu, rápido e sem código

Um substituto moderno para o extinto baw-login-logout-menu, o plugin Login Logout Menu da WPBrigade. Versão 1.5.2, compatível com WordPress 6.9 e PHP 8.3. Ao contrário do seu antecessor, não requer mexidas com #bawloginout# no campo de URL: tudo funciona através da interface nativa de menus.

Configurar login e logout no menu do WordPress via plugin

Instale via Plugins → Adicionar novo, pesquise por login-logout-menu. Após a ativação, abra Aparência → Menus. Na coluna da esquerda, verá um bloco Login/Logout/Register/Profile com seis itens. O mais utilizado, Login | Logout: mostra automaticamente «Log In» a visitantes e «Log Out» a utilizadores autenticados.

Arraste-o para o menu desejado. Expanda o item adicionado e introduza o URL de redirecionamento para após o login e após o logout. Deixe os campos vazios e o utilizador permanece na mesma página. Introduza /my-account/ e, após o login, aterrará no painel da sua conta.

O plugin também adiciona os itens «Register», «Profile», «Username» e «Reset Password». São opcionais, mas, para um site de membros, perfil e registo no menu fazem sentido.

  • Vantagens: zero código, configuração num minuto, funciona com qualquer menu de blocos ou clássico.
  • Desvantagens: mais um plugin no admin. Para 90% dos sites, isto não é um problema.
  • Preço: gratuito, descarregar do WordPress.org.

Método 2: filtro wp_nav_menu_items, controlo total sobre o markup

Não quer instalar um plugin para um botão? A tarefa resolve-se com o filtro wp_nav_menu_items. O código vai no functions.php do seu tema filho ou via o plugin Code Snippets. No tema principal, o ficheiro será sobrescrito durante as atualizações.

Adicione ao functions.php do seu tema filho:

1/**
2 * Adds a login/logout button to the specified menu.
3 */
4add_filter( 'wp_nav_menu_items', 'sdstudio_add_loginout_link', 10, 2 );
5
6function sdstudio_add_loginout_link( $items, $args ) {
7 // Replace 'primary' with the slug of your menu
8 if ( 'primary' !== $args->theme_location ) {
9 return $items;
10 }
11
12 if ( is_user_logged_in() ) {
13 $link = '<li class="menu-item menu-item-logout">';
14 $link .= '<a href="' . wp_logout_url( home_url() ) . '">Log Out</a>';
15 $link .= '</li>';
16 } else {
17 $link = '<li class="menu-item menu-item-login">';
18 $link .= '<a href="' . wp_login_url( get_permalink() ) . '">Log In</a>';
19 $link .= '</li>';
20 }
21
22 return $items . $link;
23}

O filtro wp_nav_menu_items é acionado quando cada menu é renderizado. A verificação theme_location garante que o botão aparece apenas num local, e não em todos os menus ao mesmo tempo. is_user_logged_in() determina o estado: true para autenticado, false para visitante. As funções wp_login_url() e wp_logout_url() devolvem URLs corretos com tokens nonce, mais seguro do que codificar /wp-login.php.

Botão de login no menu do WordPress com ícone

Depois de adicionar o código, aparece no menu uma ligação de texto «Log In» ou «Log Out». Sem estilos adicionais, herda a formatação do tema.

Botão de logout no menu do WordPress com ícone
  • Vantagens: zero plugins, controlo total sobre HTML e CSS.
  • Desvantagens: precisa de saber o theme_location do menu. Se não souber, abra o header.php do seu tema, localize a chamada wp_nav_menu() e verifique o parâmetro theme_location. O mais comum é primary, header ou main.
  • Preço: gratuito, o código é seu.

Bónus: ícones Font Awesome para os botões de login e logout

O texto «Log In» e «Log Out» funciona, mas um botão com ícone destaca-se mais. O caminho mais simples: o plugin Better Font Awesome (mais de 200 000 instalações). Instale, ative e os ícones ficam disponíveis de imediato: o plugin obtém automaticamente a versão mais recente.

Para o método com código, vamos adicionar ícones FA 6 diretamente no markup do filtro:

1if ( is_user_logged_in() ) {
2 $link = '<li class="menu-item menu-item-logout">';
3 $link .= '<a href="' . wp_logout_url( home_url() ) . '">';
4 $link .= '<i class="fa-solid fa-right-from-bracket" aria-hidden="true"></i> Log Out';
5 $link .= '</a></li>';
6} else {
7 $link = '<li class="menu-item menu-item-login">';
8 $link .= '<a href="' . wp_login_url( get_permalink() ) . '">';
9 $link .= '<i class="fa-solid fa-user" aria-hidden="true"></i> Log In';
10 $link .= '</a></li>';
11}

As classes fa-solid fa-user e fa-solid fa-right-from-bracket são a sintaxe atual do Font Awesome 6. As antigas fa fa-user / fa fa-sign-out ainda funcionam por inércia, mas em construções novas podem não ser renderizadas.

Se não quiser instalar um plugin separado para ícones, inclua o FA com uma linha no functions.php:

1add_action( 'wp_enqueue_scripts', function() {
2 wp_enqueue_style(
3 'font-awesome',
4 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css'
5 );
6});

Configurar redirecionamentos após login e logout

Ambos os métodos, por predefinição, devolvem o utilizador ao sítio onde estava. Mas às vezes precisa de algo diferente: após o login, para o painel de administração; após o logout, para a página inicial.

Campos de redirecionamento nas definições do plugin Login Logout Menu

No plugin Login Logout Menu, os campos de redirecionamento estão nas definições do item de menu: expanda o item adicionado e introduza o URL.

Para o método com código, o wp_login_url() aceita um parâmetro $redirect: o URL para onde enviar os utilizadores após o login. O wp_logout_url() funciona da mesma forma:

1$login_url = wp_login_url( home_url( '/my-account/' ) );
2$logout_url = wp_logout_url( home_url( '/' ) );

Se a sua lógica de redirecionamento for mais complexa (páginas diferentes para perfis diferentes, rastreamento de referências), ligue o Redirection. Dois milhões de instalações, classificação de 4,5, praticamente um padrão da indústria para WordPress. O plugin não é sobre o botão de login; é sobre gerir todos os redirecionamentos: 301/302, rastreamento de 404, importação de CSV.

Painel de gestão de redirecionamentos no WordPress

⁉️🤔 Perguntas frequentes

Posso criar o botão sem plugins e sem editar código?

Sim, mas apenas em temas onde o menu permite selecionar «Log In» a partir de uma lista predefinida. Verifique em Aparência → Menus no separador «Ligações personalizadas»: no Astra, GeneratePress e Kadence, esta opção existe. Se não houver uma lista pendente, use o método 2 com o filtro. Não é mais difícil do que substituir uma ligação.

Porque é que o antigo plugin baw-login-logout-menu desapareceu do diretório?

O autor pediu o encerramento em junho de 2025. O plugin não era atualizado há 9 anos, usava a função create_function removida do PHP 8 e continha uma vulnerabilidade XSS. Se ainda estiver no seu site, remova-o e substitua pelo mesmo Login Logout Menu: as definições não serão transferidas, mas o botão em si pode ser reconfigurado num minuto.

Como crio um botão com ícone sem um plugin de ícones separado?

Inclua o Font Awesome via wp_enqueue_style (a linha na secção de bónus acima) e adicione uma tag <i> com a classe adequada dentro da ligação no filtro. O ícone fa-user para login, fa-right-from-bracket para logout. Estilize através das classes CSS menu-item-login e menu-item-logout.

E se o menu for construído no editor de blocos (FSE)?

Nos temas de blocos (Twenty Twenty-Four, Ollie), o menu é criado através do editor do site, e não através do clássico Aparência → Menus. O plugin Login Logout Menu ainda não funciona com menus de blocos. Utilize o método 2 com o filtro: wp_nav_menu_items também é chamado nos temas de blocos, se o menu for renderizado através do bloco de navegação.

É seguro carregar o Font Awesome a partir de uma CDN num site de produção?

A CDN da Cloudflare para o Font Awesome é uma das CDN públicas mais fiáveis, servindo milhares de milhões de pedidos diariamente. Se precisar de controlo total, transfira apenas os ícones de que necessita (user, right-from-bracket) e carregue-os localmente no seu tema. Para a maioria dos sites, a opção da CDN é mais simples e não causa problemas.

O que escolher para a sua tarefa?

Se o seu site tem registo, um fórum, uma loja, um LMS ou um portal de membros, um botão de iniciar e terminar sessão no menu poupa cliques aos utilizadores e reduz as saídas por «não encontrei como iniciar sessão».

A escolha entre os métodos é simples:

  • Precisa disso rápido e sem código? Instale este plugin. Ativamente mantido, leve, não entra em conflito com temas.
  • Quer manter os plugins no mínimo ou precisa de marcação não padrão? Use o filtro wp_nav_menu_items. Cinco linhas de PHP e o botão fica exatamente como pretendido.

Para ícones, o Better Font Awesome cobre a maioria dos cenários. Se não instalar o plugin, uma linha wp_enqueue_style resolve a questão. Ligue o Redirection quando a lógica de redirecionamento for além de «após início de sessão para o painel, após fim de sessão para a página inicial»: para o caso simples, wp_login_url( $redirect ) é suficiente.

Ambos os métodos foram testados no Astra, GeneratePress, Kadence e nos temas padrão do WordPress. Quinze minutos e o botão no seu menu ganha vida própria: «Iniciar Sessão» para visitantes, «Terminar Sessão» para utilizadores.