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!
