CSS: come nascondere un elemento a utenti registrati o non loggati ⋆ youfriend

Per nascondere un elemento a utenti loggati di un sito web (in questo caso su WordPress) la prima cosa che tutti noi abbiamo pensato è di cercare dei plugin adatto allo scopo, quando invece è possibile farlo con sole poche righe di CSS.

In un precedente post abbiamo visto come nascondere parti di testo in un articolo o pagina, mentre ora andremo ad agire su componenti che sono già presenti nel nostro tema wordpress, come menu o pulsanti; ovviamente, quanto segue può essere benissimo applicato ad altri CMS o portali dove è possibile inserire dello stile – joomla ad esempio.

Probabilmente, già saprai che tramite il display: none puoi nascondere un qualsiasi elemento, ma come farlo funzionare solamente sugli utenti che hanno effettuato l’accesso?

Nascondere elementi a utenti loggati

Prendendo ad esempio la necessità di nascondere un pulsante agli utenti registrati, in questo caso useremo il codice:

.logged-in .pulsante{
display: none;
}

dove .pulsante è l’elemento che avremo celato a tutti gli utenti loggati sul tuo portale.

Nascondere elementi a utenti non loggati

Se invece vogliamo nascondere con CSS un pulsante ad utenti non registrati, dovremo usare questo codice:

body:not(.logged-in) .pulsante{
display: none;
}

Come mostrare un elemento solo a utenti registrati

C’è anche un trick, sempre tramite CSS, per ottenere lo stesso risultato: consiste nel nascondere un elemento a tutti gli utenti per poi dirgli di mostrarlo solamente a chi ha effettuato l’accesso. Vediamo come:

.pulsante{
display: none;
}

.logged-in .pulsante{
display: block;
}

Ecco qua! Come avrai notato, nella prima parte abbiamo nascosto il bottone a tutti quanti, sia visitatori che utenti registrati, mentre nella seconda l’abbiamo reso visibile agli utenti loggati.

Come aggiungere un codice CSS su WordPress

Per aggiungere il codice sopracitato o qualsiasi altra riga di codice CSS, non devi far altro che dirigerti nella parte amministrativa del tuo sito/blog e, dal menu Aspetto > Personalizza, andare su CSS Aggiuntivo. In questo campo potrai inserire tutte le modifiche che vuoi!

Conclusione

Ho realizzato questa guida con l’intenzione di spiegare come nascondere un elemento agli utenti loggati o non loggati su un portale web in cui è presente un foglio di stile o dove comunque è possibile inserire del CSS. Spero sia d’aiuto a tutti, buon lavoro!