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

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!

Conosci altri modi per nascondere elementi a utenti registrati e non?



👁️516 visti/letture

Ti è piaciuto questo articolo?

Clicca sulle stelle per votare!

Media voto 5 / 5. Voti: 2

Grazie per aver votato...

Seguici sui social!

Condividi l'articolo:
Andrea
Andrea

Ciao, sono Andrea di Roma, realizzo con passione siti web (blog e community) dal 2008. Inoltre, sono Product Expert di Google Italia e ho fondato diversi siti tra cui il social network di YouFriend. Mi trovate Online anche con il nickname Urienmad! Tra gli altri miei interessi ci sono: musica, cinema e serie tv, photoshop, calcio, videogames, sushi, anime, cantare, suonare il piano e... tutto ciò che è arte.
- La condivisione è il senso della vita -

Articoli: 723

Lascia un Commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Please login to use this feature.