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.
Modificare il CSS di WordPress è facile ma bisogna stare attenti.
Sono un consulente SEO a Napoli e posso dire che WordPress è il CMS che ritrovo in quasi la totalità dei progetti, conoscere questi piccoli trucchi può fare la differenza.
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:
- installare un tema child;
- 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!
Un CSS diverso per ruolo utente è quindi fattibile e molto semplice da realizzare se già si mastica un po’ di codice e si ha confidenza con queste tematiche, se invece non sei molto esperto allora ti consiglio di cimentarti con qualcosa di più semplice come ad esempio ruotare qualsiasi cosa con il CSS.
