In en uitloggen met verschillende wordpress menu’s

Datum aanpassing 29 december 2021 

Voor een klant hebben we een WordPress directory gemaakt, waarbij de bezoeker een listing kan aanmaken. Met een listing kan een bezoeker na registratie, zijn bedrijf toevoegen en voorzien van relevante informatie.

Een ingelogde, oftewel een geregistreerde, bezoeker krijgt een ander menu te zien dan de niet ingelogde bezoeker.

voorzijde website

De niet ingelogde bezoeker krijgt het volgende te zien:

  • INLOGGEN / REGISTREREN

De ingelogde (dus registreerde) bezoeker, krijg het volgende te zien:

  • LOGOUT
  • MIJN BEDRIJVEN
  • VOEG EEN NIEUW BEDRIJF TOE

Achterzijde Dashboard WORDPRESS website

1. Menu als de bezoeker is ingelogd

menunaam: logged-in
    • met menu-item (aangepaste link): logout
      alias: /wp-login.php?action=logout
    • met menu-item (pagina): mijn bedrijven
    • met menu-item (pagina): voeg een nieuw bedrijf toe
2. Menu als de bezoeker is uitgelogd
menunaam: logged-out
    • met menu-item (pagina): inloggen

PHP functie voor inlog en uitlog met verschillende menu's

De onderstaande code is inclusief juiste responsive weergave. Die er voor zorgt dat een ingelogde bezoeker een ander menu te zien krijgt dan een niet-ingelogde.

function my_wp_nav_menu_args( $args = '' ) {
if( $args['theme_location'] == 'primary' ){
if( is_user_logged_in() ) {
$args['menu'] = 'logged-in';
} else {
$args['menu'] = 'logged-out';
}
}
return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

function my_wp_nav_menu_args_slideout( $args = '' ) {

if( $args['theme_location'] == 'slideout' ){
if( is_user_logged_in() ) { 
$args['menu'] = 'logged-in';
} else { 
$args['menu'] = 'logged-out';
}
}
return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args_slideout' );

Dit gedeelte zorgt ervoor dat het ook responsive werkt

Het gedeelte dat hierboven in het vet staat, hebben we hieronder uitgelicht. Dit onderdeel zorgt ervoor dat je ook op een kleiner beeldscherm dezelfde weergave hebt. De weergave is in ons voorbeeld: dat je na het inloggen een ander menu te zien krijgt, dan als je bent uitgelogd.

De “slideout” in de code, heeft betrekking op een kleiner beeldscherm dan van een gangbare laptop of pc, zoals: ipad, tablet of mobiele telefoon. Er staat hetzelfde alleen in plaats van “primary” staat nu “slideout”.

function my_wp_nav_menu_args_slideout( $args = '' ) {

if( $args['theme_location'] == 'slideout' ){
if( is_user_logged_in() ) { 
$args['menu'] = 'logged-in';
} else { 
$args['menu'] = 'logged-out';
}
}
return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args_slideout' );