Behöver du en "Logga in"-knapp i menyn som automatiskt ändras till "Logga ut" efter inloggning? Den här uppgiften dyker upp på nästan varje sajt med registrering: forum, webbutiker, LMS:er, medlemsportaler, till och med bloggar med kommentarsfunktion.

Tidigare sköttes detta av tillägget baw-login-logout-menu. I juni 2025 begärde utvecklaren att det skulle tas bort från WordPress.org-katalogen. Tillägget hade inte uppdaterats på 9 år, använde funktionen create_function som tagits bort från PHP 8 och innehöll en XSS-sårbarhet. I praktiken hade två av tre sajter där vi stötte på det redan migrerat till moderna lösningar.

Här är två fungerande metoder som gör exakt samma sak: snabbt via tillägg och fullständigt med egen kod. Båda är testade på aktuella versioner av WordPress och PHP.

💡 Snabb översikt:

• Installera tillägget Login Logout Menu, dra in objektet i menyn och konfigurera omdirigeringar.
• Lägg till filtret wp_nav_menu_items i ditt barntemas functions.php för full kontroll.
• Inkludera Font Awesome-ikoner via Better Font Awesome eller en wp_enqueue_style-rad.

Metod 1: Login Logout Menu-tillägget, snabbt och kodfritt

En modern ersättning för det nedlagda baw-login-logout-menu, tillägget Login Logout Menu av WPBrigade. Version 1.5.2, kompatibelt med WordPress 6.9 och PHP 8.3. Till skillnad från föregångaren kräver det inget pill med #bawloginout# i URL-fältet: allt fungerar via det inbyggda menygränssnittet.

Installera via Tillägg → Lägg till nytt, sök efter login-logout-menu. Efter aktivering, öppna Utseende → Menyer. I den vänstra kolumnen ser du ett block som heter Login/Logout/Register/Profile med sex objekt. Det mest använda är Login | Logout: det visar automatiskt "Logga in" för gäster och "Logga ut" för inloggade användare.

Dra det till önskad meny. Fäll ut det tillagda objektet och ange omdirigerings-URL för efter inloggning och efter utloggning. Lämnar du fälten tomma stannar användaren på samma sida. Skriver du /my-account/ hamnar de på kontosidan efter inloggning.

Tillägget lägger också till objekten "Register", "Profile", "Username" och "Reset Password". De är valfria, men för en medlemssajt är profil och registrering i menyn logiskt.

• Fördelar: noll kod, konfiguration på en minut, fungerar med både block- och klassiska menyer.
• Nackdelar: ytterligare ett tillägg i admin. För 90% av sajterna är detta inget problem.
• Pris: gratis, ladda ner från WordPress.org.

Metod 2: wp_nav_menu_items-filtret, full kontroll över märkningen

Vill du inte installera ett tillägg för en enda knapp? Uppgiften löses med filtret wp_nav_menu_items. Koden placeras i ditt barntemas functions.php eller via tillägget Code Snippets. I ett föräldratema skrivs filen över vid uppdateringar.

Lägg till i ditt barntemas functions.php:

1
/**
2
 * Adds a login/logout button to the specified menu.
3
 */
4
add_filter( 'wp_nav_menu_items', 'sdstudio_add_loginout_link', 10, 2 );
5
 
6
function 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
}

Filtret wp_nav_menu_items körs när varje meny renderas. Kontrollen av theme_location säkerställer att knappen bara visas på ett ställe, inte i varje meny samtidigt. is_user_logged_in() avgör status: true för inloggad, false för gäst. Funktionerna wp_login_url() och wp_logout_url() returnerar korrekta URL:er med nonce-tokens, säkrare än att hårdkoda /wp-login.php.

När du har lagt till koden visas en textlänk "Logga in" eller "Logga ut" i menyn. Utan extra stilar ärver den temats formatering.

• Fördelar: inga plugins, full kontroll över HTML och CSS.
• Nackdelar: du måste känna till menyns theme_location. Om du inte gör det, öppna temats header.php, leta reda på wp_nav_menu()-anropet och kontrollera parametern theme_location. Oftast är det primary, header eller main.
• Pris: gratis, koden är din.

Bonus: Font Awesome-ikoner för inloggnings- och utloggningsknappar

Texten "Logga in" och "Logga ut" fungerar, men en knapp med en ikon syns bättre. Den enklaste vägen: pluginet Better Font Awesome (200 000+ installationer). Installera, aktivera, ikonerna är tillgängliga direkt: pluginet hämtar automatiskt den senaste versionen.

För kodmetoden lägger vi till FA 6-ikoner direkt i filtrets märkspråk:

1
if ( 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
}

Klasserna fa-solid fa-user och fa-solid fa-right-from-bracket är den aktuella syntaxen för Font Awesome 6. De gamla fa fa-user / fa fa-sign-out fungerar fortfarande av gammal vana, men på nya installationer kanske de inte renderas.

Om du inte vill installera ett separat plugin för ikoner kan du inkludera FA med en rad i functions.php:

1
add_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
});

Konfigurera omdirigeringar efter inloggning och utloggning

Båda metoderna skickar som standard tillbaka användaren till där de var. Men ibland behöver du något annat: efter inloggning, till adminpanelen; efter utloggning, till startsidan.

I pluginet Login Logout Menu finns omdirigeringsfälten direkt i menyobjektets inställningar: fäll ut det tillagda objektet och ange webbadressen.

För kodmetoden tar wp_login_url() en $redirect-parameter: webbadressen att skicka användare till efter inloggning. wp_logout_url() fungerar på samma sätt:

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

Om din omdirigeringslogik är mer komplex (olika sidor för olika roller, spårning av hänvisningar) kan du ansluta Redirection. Två miljoner installationer, 4,5 i betyg, praktiskt taget en branschstandard för WordPress. Pluginet handlar inte om inloggningsknappen; det hanterar alla omdirigeringar: 301/302, 404-spårning, CSV-import.

⁉️🤔 Vanliga frågor

Kan jag skapa knappen utan några plugins och utan att redigera kod?

Ja, men bara i teman där menyn låter dig välja "Logga in" från en färdig lista. Kolla under Utseende → Menyer på fliken "Anpassade länkar": i Astra, GeneratePress och Kadence finns det alternativet. Om det inte finns någon rullgardinslista, använd metod 2 med filtret. Det är inte svårare än att byta ut en länk.

Varför försvann det gamla pluginet baw-login-logout-menu från katalogen?

Utvecklaren begärde stängning i juni 2025. Pluginet hade inte uppdaterats på 9 år, använde funktionen create_function som togs bort från PHP 8 och innehöll en XSS-sårbarhet. Om det fortfarande finns på din webbplats, ta bort det och ersätt med samma Login Logout Menu: inställningarna överförs inte, men själva knappen kan konfigureras om på en minut.

Hur skapar jag en knapp med en ikon utan ett separat ikonplugin?

Inkludera Font Awesome via wp_enqueue_style (raden i bonusavsnittet ovan) och lägg till en <i>-tagg med lämplig klass inuti länken i filtret. fa-user-ikonen för inloggning, fa-right-from-bracket för utloggning. Styla via CSS-klasserna menu-item-login och menu-item-logout.

Vad händer om menyn är byggd i blockredigeraren (FSE)?

I blockteman (Twenty Twenty-Four, Ollie) byggs menyn via webbplatsredigeraren, inte via klassiska Utseende → Menyer. Tillägget Login Logout Menu fungerar ännu inte med blockmenyer. Använd metod 2 med filtret: wp_nav_menu_items anropas även i blockteman, om menyn renderas via navigeringsblocket.

Är det säkert att ladda Font Awesome från ett CDN på en produktionssajt?

Cloudflares CDN för Font Awesome är ett av de mest pålitliga offentliga CDN:erna och hanterar miljarder förfrågningar dagligen. Om du behöver full kontroll laddar du bara ner de ikoner du behöver (user, right-from-bracket) och laddar upp dem lokalt till ditt tema. För de flesta sajter är CDN-alternativet enklare och orsakar inga problem.

Vad ska du välja för din uppgift?

Om din webbplats har registrering, ett forum, en butik, en LMS eller en medlemsportal sparar en logga in- och logga ut-knapp i menyn klick för användarna och minskar avvisningsfrekvensen från "kunde inte hitta hur man loggar in".

Valet mellan metoderna är enkelt:

• Behöver du det snabbt och utan kod? Installera det här tillägget. Aktivt underhållet, lättviktigt, krockar inte med teman.
• Vill du hålla nere antalet tillägg eller behöver du icke-standardiserad märkning? Använd wp_nav_menu_items-filtret. Fem rader PHP, och knappen ser ut precis som du tänkt dig.

För ikoner täcker Better Font Awesome de flesta scenarier. Om du inte installerar tillägget löser en wp_enqueue_style-rad problemet. Koppla in Redirection när omdirigeringslogiken går längre än "efter inloggning till adminpanelen, efter utloggning till startsidan": för det enkla fallet räcker wp_login_url( $redirect ).

Båda metoderna har testats på Astra, GeneratePress, Kadence och standardteman från WordPress. En kvart, och knappen i din meny lever sitt eget liv: "Logga in" för gäster, "Logga ut" för användare.