CSS diverso per ruolo utente su WordPress

tecniche e trucchi css - www.seonapsi.com
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
Linkedin
Share on reddit
Reddit
Share on whatsapp
Whatsapp
Share on email
Email
A VPN is an essential component of IT security, whether you’re just starting a business or are already up and running. Most business interactions and transactions happen online and VPN

Di cosa parla questo articolo

Mostrare un CSS diverso per ruolo utente su WordPress in modo che ad ogni utente corrispondano regole CSS diverse è possibile. Prima di tutto però è meglio fare un semplice esempio giusto per essere sicuri che siate nel posto giusto al momento giusto.

Esempio di cosa vogliamo ottenere

Supponiamo che un pulsante del nostro sito debba essere visibile per gli editor ma non per i semplici utenti, basterebbe quindi una funzione che sia capace di assegnare delle regole css a quel pulsante in modo da nasconderlo appositamente, in questo modo si avrà un  CSS diverso per ruolo utente

WordPress permette di gestire diversi utenti, ognuno di questi utenti ha dei permessi particolari o delle restrizioni che permettono di gestire al meglio il CMS.
Avere più utenti consente di lavorare  con altre persone e dividere/condividere il lavoro, grandioso certo ma questo a volte ci porta di fronte a delle problematiche o delle esigenze particolari come voler mostrare qualcosa in modo differente a secondo dell’utente.

Prima di cominciare

Per modificare il CSS in modo che cambi a secondo dell’utente bisogna agire sul file functions.php presente nella installazione di WordPress. Occhio a quando modificate certi file perchè ne è a rischio tutto il vostro sito, è quindi cosa buona e giusta fare queste due cose prima di iniziare:

  1. installare un tema child;
  2. fare un bel bakup di tutto il sito.

Adesso che ci siamo preparati possiamo procedere in tutta sicurezza alla modifica del file functions.php.

CSS diverso per ruolo utente, il codice

E’ possibile accedere al file functions.php in due modi:

  • Via FTP accedendo alla cartella www.miosito.it/wp-content/themes/temaAttivo/ (il percorso potrebbe cambiare);
  • Nel backend di wordpress sotto aspetto>editor del tema.

Il prossimo passo è quello di aggiungere il seguente codice alla fine del file functions.php (ma prima del ?> se presente).


// css su ruolo utente

add_action('wp_head', 'hidingCss');
function hidingCss() {
if (is_user_logged_in()) {
$user = wp_get_current_user();
$role = (array) $user->roles;
//css-class means user roles
if($role[0] == '

utente

'){ 
// qui va il css che si vuole cambiare
echo '<style>

#classe {regole css da assegnare }

</style>';
echo '<style>

.classe {regole css da assegnare }

</style>';
}
} else {
return true;
}
}
 A questo punto basterà sostituire "

utente

" con il ruolo utente che vogliamo veda un altro CSS (ad esempio Editor) ed inserire le regole CSS che vogliamo associare dopo

echo ‘<style>

Possiamo inserire tutte le regole che vogliamo copiando ed incollando le righe “echo”, inoltre possiamo usare sia gli ID che le classi proprio  come nel codice di esempio.

Se avete fatto tutto correttamente adesso il codice cambierà il CSS come da voi specificato a secondo dell’utente, pensate a quante applicazioni può avere.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
Linkedin
Share on reddit
Reddit
Share on whatsapp
Whatsapp
Share on email
Email
  • ❤️ SEO lover
  • ☕ Coffee drinker
  • ⚡ Performance seeker
  • 👨‍💻 Code bestemmier
  • Elementor master
  • 🐄 Lactose free
stressed at 60%
coffee in my blood 70%
ACCENDI LE SEONAPSI
Contattami

Puoi usare questo modulo per contattarmi, nel rispetto della privacy.