Vajad menüüs nuppu „Logi sisse", mis muutub pärast autoriseerimist automaatselt „Logi välja" vastu? See ülesanne kerkib esile igal teisel registreerimisega saidil: foorumid, veebipoed, õpihaldussüsteemid, liikmesportaalid, isegi kommenteerijatega blogid.

Varem haldas seda plugin baw-login-logout-menu. 2025. aasta juunis palus autor selle eemaldamist WordPress.org kataloogist. Plugina viimasest uuendusest oli möödas 9 aastat, see kasutas funktsiooni create_function, mis eemaldati PHP 8-st, ja sisaldas XSS turvaauku. Praktikas olid kaks kolmest saidist, kus me sellega kokku puutusime, juba üle läinud kaasaegsetele lahendustele.

Allpool on kaks töötavat meetodit, mis teevad täpselt sama asja: kiirelt pluginaga ja täielikult oma koodiga. Mõlemad on testitud WordPressi ja PHP praeguste versioonidega.

💡 Kiirülevaade:

• Paigalda Login Logout Menu plugin, lohista element oma menüüsse ja seadista ümbersuunamised.
• Lisa wp_nav_menu_items filter oma alamteema faili functions.php täieliku kontrolli saavutamiseks.
• Lisa Font Awesome ikoonid Better Font Awesome'i või wp_enqueue_style rea kaudu.

Meetod 1: Login Logout Menu plugin, kiire ja koodivaba

Kaasaegne asendus iganenud baw-login-logout-menu pluginale, Login Logout Menu plugin WPBrigade'ilt. Versioon 1.5.2, ühildub WordPressi 6.9 ja PHP 8.3-ga. Erinevalt oma eelkäijast ei nõua see URL-i väljal #bawloginout# kasutamist: kõik toimib läbi tavalise menüüliidese.

Paigalda läbi Plugins → Add New, otsi login-logout-menu. Pärast aktiveerimist ava Appearance → Menus. Vasakus veerus näed plokki Login/Logout/Register/Profile kuue elemendiga. Kõige sagedamini kasutatav on Login | Logout: see näitab külalistele automaatselt „Logi sisse" ja autenditud kasutajatele „Logi välja".

Lohista see soovitud menüüsse. Laienda lisatud elementi ja sisesta ümbersuunamise URL pärast sisselogimist ja pärast väljalogimist. Jäta väljad tühjaks ja kasutaja jääb samale lehele. Sisesta /my-account/ ja pärast sisselogimist jõuab ta oma konto armatuurlauale.

Plugin lisab ka elemendid „Registreeru", „Profiil", „Kasutajanimi" ja „Lähtesta parool". Need on valikulised, kuid liikmesaidi puhul on profiil ja registreerumine menüüs mõistlikud.

• Plussid: null koodi, seadistamine minutiga, töötab iga ploki- või klassikalise menüüga.
• Miinused: üks plugin adminiliideses juures. 90% saitide jaoks ei ole see probleem.
• Hind: tasuta, laadi alla WordPress.org-ist.

Meetod 2: wp_nav_menu_items filter, täielik kontroll märgendi üle

Ei taha ühe nupu jaoks pluginat paigaldada? Ülesanne lahendatakse wp_nav_menu_items filtriga. Kood läheb sinu alamteema faili functions.php või Code Snippets plugina kaudu. Peateemas kirjutatakse fail uuenduste käigus üle.

Lisa oma alamteema faili 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
}

Filter wp_nav_menu_items käivitub iga menüü renderdamisel. Kontroll theme_location tagab, et nupp ilmub ainult ühes kohas, mitte igas menüüs korraga. is_user_logged_in() määrab staatuse: true autenditud kasutajale, false külalisele. Funktsioonid wp_login_url() ja wp_logout_url() tagastavad korrektsed URL-id koos nonce-tõenditega, mis on turvalisem kui /wp-login.php käsitsi kodeerimine.

Pärast koodi lisamist ilmub menüüsse tekstilink „Logi sisse" või „Logi välja". Ilma täiendavate stiilideta pärib see teema vorminduse.

• Plussid: null pluginaid, täielik kontroll HTML-i ja CSS-i üle.
• Miinused: pead teadma menüü theme_location väärtust. Kui ei tea, ava oma teema header.php, otsi üles wp_nav_menu() väljakutse ja kontrolli theme_location parameetrit. Enamasti on see primary, header või main.
• Hind: tasuta, kood on sinu oma.

Boonus: Font Awesome ikoonid sisse- ja väljalogimise nuppudele

Tekstid „Logi sisse" ja „Logi välja" toimivad, kuid ikooniga nupp paistab rohkem silma. Lihtsaim tee: Better Font Awesome plugin (200 000+ paigaldust). Paigalda, aktiveeri, ikoonid on kohe saadaval: plugin tõmbab automaatselt uusima versiooni.

Koodimeetodi puhul lisame FA 6 ikoonid otse filtri märgendisse:

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
}

Klassid fa-solid fa-user ja fa-solid fa-right-from-bracket on praegune Font Awesome 6 süntaks. Vanad fa fa-user / fa fa-sign-out töötavad inertsist endiselt, kuid uutel paigaldustel ei pruugi need renderduda.

Kui sa ei soovi ikoonide jaoks eraldi pluginat paigaldada, lisa FA ühe reaga failis 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
});

Ümbersuunamiste seadistamine pärast sisse- ja väljalogimist

Mõlemad meetodid suunavad kasutaja vaikimisi tagasi sinna, kus ta oli. Kuid mõnikord on vaja midagi muud: pärast sisselogimist töölauale, pärast väljalogimist avalehele.

Login Logout Menu pluginas on ümbersuunamise väljad otse menüüelemendi seadetes: ava lisatud elemendi seaded ja sisesta URL.

Koodimeetodi puhul aktsepteerib wp_login_url() parameetrit $redirect: URL, kuhu kasutajad pärast sisselogimist saata. wp_logout_url() töötab samamoodi:

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

Kui sinu ümbersuunamise loogika on keerulisem (erinevad lehed eri rollidele, viitamiste jälgimine), ühenda Redirection. Kaks miljonit paigaldust, hinnang 4,5, praktiliselt tööstusstandard WordPressi jaoks. Plugin ei ole sisselogimisnupu jaoks, vaid kõigi ümbersuunamiste haldamiseks: 301/302, 404 jälgimine, CSV import.

⁉️🤔 Korduma kippuvad küsimused

Kas ma saan nupu luua ilma ühegi pluginata ja koodi muutmata?

Jah, kuid ainult teemades, kus menüü võimaldab valida „Logi sisse" valmis nimekirjast. Kontrolli Välimus → Menüüd vahekaardi „Kohandatud lingid" alt: Astras, GeneratePressis ja Kadence'is on see võimalus olemas. Kui rippmenüüd ei ole, kasuta meetodit 2 koos filtriga. See pole keerulisem kui lingi asendamine.

Miks kadus vana baw-login-logout-menu plugin kataloogist?

Autor taotles sulgemist 2025. aasta juunis. Pluginat polnud 9 aastat uuendatud, see kasutas PHP 8-st eemaldatud funktsiooni create_function ja sisaldas XSS haavatavust. Kui see on endiselt sinu saidil, eemalda see ja asenda sama Login Logout Menu vastu: seaded üle ei kandu, kuid nupu enda saab minutiga uuesti seadistada.

Kuidas luua ikooniga nupp ilma eraldi ikoonipluginata?

Lisa Font Awesome wp_enqueue_style kaudu (rida ülaltoodud boonuse jaotises) ja lisa filtri sees olevasse linki sobiva klassiga <i> silt. Sisselogimiseks ikoon fa-user, väljalogimiseks fa-right-from-bracket. Kujunda CSS klasside menu-item-login ja menu-item-logout kaudu.

Mis siis, kui menüü on ehitatud plokiredaktoris (FSE)?

Plokiteemades (Twenty Twenty-Four, Ollie) ehitatakse menüü saidiredaktori, mitte klassikalise Välimus → Menüüd kaudu. Login Logout Menu plugin ei tööta veel plokimenüüdega. Kasuta meetodit 2 koos filtriga: wp_nav_menu_items kutsutakse välja ka plokiteemades, kui menüü renderdatakse navigatsiooniploki kaudu.

Kas Font Awesome'i laadimine CDN-ilt on tootmissaidil ohutu?

Font Awesome'i Cloudflare'i CDN on üks usaldusväärsemaid avalikke CDN-e, mis teenindab iga päev miljardeid päringuid. Kui vajad täielikku kontrolli, laadi alla ainult vajalikud ikoonid (user, right-from-bracket) ja paiguta need lokaalselt oma teemasse. Enamiku saitide jaoks on CDN-i valik lihtsam ega tekita probleeme.

Mida oma ülesande jaoks valida?

Kui sinu saidil on registreerimine, foorum, pood, õpihaldussüsteem või liikmeportaal, säästab menüüs olev sisse- ja väljalogimise nupp kasutajate klikke ning vähendab põrkemäära, mis tekib olukorrast „ei leidnud, kuidas sisse logida".

Valik meetodite vahel on lihtne:

• Vajad kiiresti ja ilma koodita? Paigalda see plugin. Aktiivselt hooldatud, kerge, ei lähe teemadega vastuollu.
• Soovid pluginate arvu minimaalsena hoida või vajad mittestandardset märgendust? Kasuta wp_nav_menu_items filtrit. Viis rida PHP-d ja nupp näeb välja täpselt selline, nagu soovisid.

Ikoonide puhul katab Better Font Awesome enamiku stsenaariume. Kui sa pluginat ei paigalda, lahendab probleemi üks wp_enqueue_style rida. Ühenda Redirection, kui ümbersuunamise loogika läheb kaugemale kui „pärast sisselogimist töölauale, pärast väljalogimist avalehele": lihtsa juhtumi jaoks piisab wp_login_url( $redirect )-st.

Mõlemat meetodit on testitud teemadega Astra, GeneratePress, Kadence ja WordPressi vaiketeemadega. Viisteist minutit ja menüünupp elab oma elu: „Logi sisse" külalistele, „Logi välja" kasutajatele.