Tarvitsetko valikkoon "Kirjaudu sisään" -painikkeen, joka muuttuu automaattisesti "Kirjaudu ulos" -painikkeeksi kirjautumisen jälkeen? Tämä tarve tulee vastaan lähes jokaisella rekisteröitymisen sisältävällä sivustolla: foorumit, verkkokaupat, oppimisalustat, jäsenportaalit ja jopa blogit, joissa on kommentoijia.

Aiemmin baw-login-logout-menu-lisäosa hoiti tämän. Kesäkuussa 2025 tekijä pyysi sen poistamista WordPress.org-hakemistosta. Lisäosaa ei ollut päivitetty yhdeksään vuoteen, se käytti PHP 8:sta poistettua create_function-funktiota ja sisälsi XSS-haavoittuvuuden. Käytännössä kahdella kolmesta sivustosta, joilla siihen törmäsimme, oli jo siirrytty nykyaikaisiin ratkaisuihin.

Alla on kaksi toimivaa tapaa, jotka tekevät täsmälleen saman asian: nopea tapa lisäosalla ja täysin hallittu tapa omalla koodilla. Molemmat on testattu WordPressin ja PHP:n nykyisillä versioilla.

💡 Pikakatsaus:

• Asenna Login Logout Menu -lisäosa, vedä kohde valikkoon ja määritä uudelleenohjaukset.
• Lisää wp_nav_menu_items -suodatin lapsiteeman functions.php-tiedostoon saadaksesi täyden hallinnan.
• Sisällytä Font Awesome -kuvakkeet Better Font Awesome -lisäosan tai wp_enqueue_style-rivin avulla.

Tapa 1: Login Logout Menu -lisäosa, nopea ja kooditon

Nykyaikainen korvaaja käytöstä poistetulle baw-login-logout-menu-lisäosalle on WPBrigaden Login Logout Menu -lisäosa. Versio 1.5.2, yhteensopiva WordPressin 6.9:n ja PHP 8.3:n kanssa. Toisin kuin edeltäjänsä, se ei vaadi #bawloginout#-merkkijonon näpräämistä URL-kenttään: kaikki toimii natiivin valikkokäyttöliittymän kautta.

Asenna kohdasta Lisäosat → Lisää uusi, hae termillä login-logout-menu. Aktivoinnin jälkeen avaa Ulkoasu → Valikot. Vasemmassa sarakkeessa näet Login/Logout/Register/Profile-lohkon, jossa on kuusi kohdetta. Yleisimmin käytetty on Login | Logout: se näyttää automaattisesti "Kirjaudu sisään" vierailijoille ja "Kirjaudu ulos" kirjautuneille käyttäjille.

Vedä se haluamaasi valikkoon. Laajenna lisätty kohde ja syötä uudelleenohjauksen URL-osoitteet kirjautumisen ja uloskirjautumisen jälkeisille sivuille. Jos jätät kentät tyhjiksi, käyttäjä pysyy samalla sivulla. Jos syötät /my-account/, käyttäjä päätyy kirjautumisen jälkeen tilinhallintaan.

Lisäosa lisää myös "Rekisteröidy"-, "Profiili"-, "Käyttäjänimi"- ja "Nollaa salasana" -kohteet. Ne ovat valinnaisia, mutta jäsensivustolla profiili ja rekisteröityminen valikossa ovat järkeviä.

• Hyödyt: ei koodia, käyttöönotto minuutissa, toimii minkä tahansa lohko- tai perinteisen valikon kanssa.
• Haitat: yksi lisäosa lisää hallintaan. 90%:lle sivustoista tämä ei ole ongelma.
• Hinta: ilmainen, lataa WordPress.orgista.

Tapa 2: wp_nav_menu_items -suodatin, täysi hallinta merkintään

Etkö halua asentaa lisäosaa yhden painikkeen takia? Tehtävä ratkeaa wp_nav_menu_items-suodattimella. Koodi lisätään lapsiteeman functions.php-tiedostoon tai Code Snippets -lisäosan kautta. Pääteemassa tiedosto ylikirjoittuu päivitysten yhteydessä.

Lisää lapsiteemasi functions.php-tiedostoon:

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
}

wp_nav_menu_items-suodatin käynnistyy, kun jokainen valikko renderöidään. theme_location-tarkistus varmistaa, että painike ilmestyy vain yhteen paikkaan, ei jokaiseen valikkoon. is_user_logged_in() määrittää tilan: true kirjautuneelle, false vieraalle. Funktiot wp_login_url() ja wp_logout_url() palauttavat oikeat URL-osoitteet nonce-tunnisteilla, mikä on turvallisempaa kuin /wp-login.php-osoitteen kovakoodaus.

Kun koodi on lisätty, valikkoon ilmestyy tekstilinkki "Kirjaudu sisään" tai "Kirjaudu ulos". Ilman erillisiä tyylejä se perii teeman muotoilun.

• Hyvät puolet: ei lainkaan lisäosia, täysi hallinta HTML:stä ja CSS:stä.
• Huonot puolet: sinun on tiedettävä valikon theme_location. Jos et tiedä sitä, avaa teemasi header.php, etsi wp_nav_menu()-kutsu ja tarkista theme_location-parametri. Useimmiten se on primary, header tai main.
• Hinta: ilmainen, koodi on sinun.

Bonus: Font Awesome -kuvakkeet kirjautumis- ja uloskirjautumispainikkeisiin

Tekstit "Kirjaudu sisään" ja "Kirjaudu ulos" toimivat, mutta kuvakkeella varustettu painike erottuu paremmin. Yksinkertaisin tapa: Better Font Awesome -lisäosa (yli 200 000 asennusta). Asenna, aktivoi, ja kuvakkeet ovat heti käytettävissä: lisäosa hakee automaattisesti uusimman version.

Koodimenetelmää varten lisäämme FA 6 -kuvakkeet suoraan filtterin markupiin:

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
}

Luokat fa-solid fa-user ja fa-solid fa-right-from-bracket ovat nykyistä Font Awesome 6 -syntaksia. Vanhat fa fa-user / fa fa-sign-out toimivat yhä hitaudella, mutta puhtaissa uusissa asennuksissa ne eivät välttämättä renderöidy.

Jos et halua asentaa erillistä lisäosaa kuvakkeita varten, sisällytä FA yhdellä rivillä functions.php-tiedostossa:

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

Uudelleenohjausten määrittäminen kirjautumisen ja uloskirjautumisen jälkeen

Molemmat menetelmät palauttavat käyttäjän oletuksena sinne, missä hän oli. Mutta joskus tarvitaan jotain muuta: kirjautumisen jälkeen ohjaus hallintanäkymään, uloskirjautumisen jälkeen etusivulle.

Login Logout Menu -lisäosassa uudelleenohjauskentät ovat suoraan valikkokohteen asetuksissa: laajenna lisätty kohde ja syötä URL-osoite.

Koodimenetelmässä wp_login_url() hyväksyy $redirect-parametrin: URL-osoite, johon käyttäjät lähetetään kirjautumisen jälkeen. wp_logout_url() toimii samalla tavalla:

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

Jos uudelleenohjauslogiikkasi on monimutkaisempi (eri sivut eri rooleille, viittausten seuranta), ota käyttöön Redirection. Kaksi miljoonaa asennusta, arvosana 4,5, käytännössä alan standardi WordPressille. Lisäosa ei liity kirjautumispainikkeeseen, vaan se on tarkoitettu kaikkien uudelleenohjausten hallintaan: 301/302, 404-seuranta, CSV-tuonti.

⁉️🤔 Usein kysytyt kysymykset

Voinko luoda painikkeen ilman lisäosia ja ilman koodin muokkaamista?

Kyllä, mutta vain teemoissa, joissa valikko antaa valita "Kirjaudu sisään" valmiista listasta. Tarkista Ulkoasu → Valikot "Mukautetut linkit" -välilehdeltä: Astrassa, GeneratePressissä ja Kadenceessa tämä vaihtoehto on olemassa. Jos pudotusvalikkoa ei ole, käytä menetelmää 2 filtterin kanssa. Se ei ole sen vaikeampaa kuin linkin vaihtaminen.

Miksi vanha baw-login-logout-menu -lisäosa katosi hakemistosta?

Tekijä pyysi sulkemista kesäkuussa 2025. Lisäosaa ei ollut päivitetty 9 vuoteen, se käytti PHP 8:sta poistettua create_function-funktiota ja sisälsi XSS-haavoittuvuuden. Jos se on yhä sivustollasi, poista se ja korvaa samalla Login Logout Menulla: asetukset eivät siirry, mutta itse painikkeen voi määrittää uudelleen minuutissa.

Miten luon kuvakkeellisen painikkeen ilman erillistä kuvakelisäosaa?

Sisällytä Font Awesome wp_enqueue_style-funktiolla (rivi yllä olevassa bonusosiossa) ja lisää <i>-tagi sopivalla luokalla linkin sisään filtterissä. fa-user-kuvake kirjautumiselle, fa-right-from-bracket uloskirjautumiselle. Tyylittele CSS-luokkien menu-item-login ja menu-item-logout kautta.

Entä jos valikko on rakennettu lohkoeditorissa (FSE)?

Lohkoteemoissa (Twenty Twenty-Four, Ollie) valikko rakennetaan sivustoeditorin kautta, ei perinteisen Ulkoasu → Valikot -reitin kautta. Login Logout Menu -lisäosa ei vielä toimi lohkovalikoiden kanssa. Käytä tapaa 2 ja suodatinta: wp_nav_menu_items kutsutaan myös lohkoteemoissa, jos valikko renderöidään navigaatiolohkon kautta.

Onko Font Awesomen lataaminen CDN:stä turvallista tuotantosivustolla?

Font Awesomen Cloudflare CDN on yksi luotettavimmista julkisista CDN-verkoista, ja se palvelee miljardeja pyyntöjä päivittäin. Jos tarvitset täyden hallinnan, lataa vain tarvitsemasi kuvakkeet (user, right-from-bracket) ja siirrä ne paikallisesti teemaasi. Useimmille sivustoille CDN-vaihtoehto on yksinkertaisempi eikä aiheuta ongelmia.

Mitä valita omaan tarpeeseesi?

Jos sivustollasi on rekisteröityminen, foorumi, verkkokauppa, LMS-järjestelmä tai jäsenportaali, valikon kirjautumis- ja uloskirjautumispainike säästää käyttäjien klikkauksia ja vähentää "en löytänyt miten kirjaudutaan" -tyyppisiä poistumisia.

Valinta menetelmien välillä on yksinkertainen:

• Tarvitsetko nopeasti ja ilman koodia? Asenna tämä lisäosa. Aktiivisesti ylläpidetty, kevyt, ei aiheuta ristiriitoja teemojen kanssa.
• Haluatko pitää lisäosien määrän minimissä tai tarvitsetko epästandardia merkkausta? Käytä wp_nav_menu_items-suodatinta. Viisi riviä PHP:tä, ja painike näyttää juuri halutulta.

Kuvakkeisiin Better Font Awesome kattaa useimmat tilanteet. Jos et asenna lisäosaa, yksi wp_enqueue_style-rivi ratkaisee asian. Ota käyttöön Redirection, kun uudelleenohjauslogiikka menee pidemmälle kuin "kirjautumisen jälkeen hallintapaneeliin, uloskirjautumisen jälkeen etusivulle": yksinkertaiseen tapaukseen wp_login_url( $redirect ) riittää.

Molemmat menetelmät on testattu Astra, GeneratePress, Kadence- ja WordPressin oletusteemoilla. Vartissa valikon painike elää omaa elämäänsä: "Kirjaudu" vieraille, "Kirjaudu ulos" käyttäjille.