Modificare l’aspetto del sito per i diversi ruoli degli utenti può aiutare a creare esperienze personalizzate.
Abbiamo scoperto che molti utenti preferiscono siti web con interfacce personalizzate. Ad esempio, potreste voler mostrare agli autori elementi specifici che sono nascosti agli altri utenti, oppure creare sezioni diverse per gli abbonati o i clienti.
In questo tutorial vi guideremo nell’applicazione dei CSS per specifici ruoli utente in WordPress. Questo vi aiuterà a personalizzare diverse aree in base alle esigenze specifiche dei vostri utenti.

Perché e quando applicare i CSS per specifici ruoli utente in WordPress
Per le nostre aziende gestiamo diversi siti web che richiedono il login degli utenti. Spesso abbiamo la necessità di personalizzare l’aspetto per i diversi ruoli degli utenti.
Eseguendo split test su questi siti, abbiamo scoperto che la personalizzazione migliora notevolmente l’esperienza dell’utente. Una migliore esperienza dell’utente porta in ultima analisi a una maggiore soddisfazione del cliente, a conversioni e vendite.
Che siate proprietari di un sito, sviluppatori o designer, avere il controllo sull’aspetto del vostro sito per i diversi utenti può essere molto utile.
Ecco alcuni casi d’uso comuni:
- Siti associativi: è possibile utilizzare CSS personalizzati per offrire esperienze diverse ai membri premium.
- Negozi di e-commerce: è possibile mettere in evidenza i carrelli della spesa, gli sconti per i clienti che ritornano e altre funzionalità per i clienti che hanno effettuato l’accesso.
- Blog con più autori: La gestione di un blog con più autori può diventare disordinata. Con i CSS personalizzati, è possibile creare un’interfaccia pulita ed efficiente per i redattori, mantenendo le cose semplici per i collaboratori e gli iscritti.
- Siti dei clienti: è possibile creare un’area di amministrazione semplificata per i clienti, nascondendo alcuni elementi con un CSS personalizzato.
Ora, il problema è come dire a WordPress quale codice CSS caricare per i diversi ruoli degli utenti.
Applicazione di CSS personalizzati per specifici ruoli utente in WordPress
Il modo più semplice per gestire il codice personalizzato, compresi i CSS, in WordPress è utilizzare WPCode. È il miglior plugin di snippets di codice per WordPress e consente di gestire in modo sicuro il CSS personalizzato in un unico posto.
Nota: è disponibile anche una versione gratuita di WPCode. Tuttavia, si consiglia di passare a un piano a pagamento per sbloccare ulteriori funzioni.
Perché consigliamo WPCode:
- Consente di aggiungere in modo sicuro qualsiasi codice personalizzato, compresi i CSS, senza interrompere il sito web. Se uno snippet di codice non funziona, è possibile disabilitarlo facilmente.
- È dotato di potenti strumenti di inserimento del codice e di logica condizionale, che consentono di eseguire uno snippet solo quando necessario.
- Avrete accesso a un’enorme libreria di codice di snippet utili, che vi eviterà di installare diversi plugin separati.
Detto questo, aggiungiamo alcuni CSS personalizzati e applichiamoli a ruoli utente specifici.
Aggiunta di CSS personalizzati in WPCode
Per prima cosa, è necessario installare e attivare il plugin WPCode. Per maggiori dettagli, consultare il nostro tutorial su come installare un plugin di WordPress.
Dopo l’attivazione, andare alla pagina Code Snippets ” + Add Snippet. Lì potrete vedere molti snippet utili per varie attività.

Tuttavia, poiché si sta aggiungendo un codice CSS personalizzato, è necessario partire da zero facendo clic su “+ Aggiungi snippet personalizzato” sotto la casella “Aggiungi il tuo codice personalizzato (nuovo snippet)”.
Quindi, è necessario selezionare ‘CSS Snippet’ come tipo di codice dall’elenco di opzioni che appare sulla schermata.

Si accede così all’editor del codice.
Per prima cosa, è necessario inserire un titolo per lo snippet, che può essere qualsiasi cosa che aiuti a ricordare a cosa serve il codice.

Ora è possibile aggiungere il codice CSS personalizzato nel riquadro “Anteprima codice”.
Per questo tutorial, utilizzeremo questo codice, che evidenzia il menu “Messaggi” nell’area di amministrazione modificandone il colore di sfondo. È possibile utilizzare il proprio codice CSS:
1 2 3 | li#menu-posts { background-color : #bf0505 ; } |
Scegliere la logica condizionale del ruolo dell’utente
Quindi, scorrere fino alla casella “Logica condizionale intelligente” e attivare la levetta accanto all’opzione “Abilita logica”.
Quindi, scegliere la “Condizione” (Mostra o Nascondi) e fare clic su “Aggiungi nuovo gruppo”.

Fare clic sulla prima casella della Regola per espanderla. Verrà visualizzato un elenco di regole tra cui scegliere.
Ad esempio, è possibile selezionare lo stato di accesso, il ruolo dell’utente, il tipo di dispositivo, ecc.

Selezionare “Ruolo utente”, poiché si desidera che il codice CSS personalizzato venga aggiunto per un particolare ruolo utente.
Successivamente, è possibile selezionare il ruolo dell’utente a cui applicarlo.

Nota: è possibile aggiungere più regole logiche condizionali facendo clic sul pulsante “+ Aggiungi nuovo gruppo”.
Una volta terminato, fare clic su “Salva snippet” nell’angolo in alto a destra dello schermo e poi spostarlo su “Attivo”.

WPCode ora mostrerà il vostro CSS personalizzato a specifici ruoli utente in WordPress.
Aggiungere CSS personalizzati per specifici ruoli utente nell’area amministrativa di WordPress
Se volete che il vostro CSS personalizzato venga aggiunto solo all’interno dell’area di amministrazione di WordPress, WPCode lo rende ancora più semplice.
Nella schermata di modifica del codice, scorrere fino all’opzione “Posizione”. Fare clic sul menu a discesa per espanderlo e si vedrà un gruppo di posizioni in cui è possibile caricare automaticamente il CSS.

Ora è sufficiente selezionare l’opzione “Admin header” o “Admin footer” per caricare il codice CSS nell’area di amministrazione di WordPress.
Aggiungere CSS personalizzati per specifici ruoli utente in altre aree
La personalizzazione del design nei siti di e-commerce migliora l’esperienza dell’utente ed è stato dimostrato che riduce le vendite di carrelli abbandonati.
Se gestite un negozio WooCommerce, vendete corsi online o altri prodotti digitali, sarà utile aggiungere un CSS personalizzato per i clienti che hanno effettuato l’accesso.
WPCode consente di scegliere dove aggiungere il codice personalizzato a un sito di commercio elettronico. Nelle impostazioni della posizione, passare alla scheda “eCommerce”.

Si vedranno diversi punti in cui è possibile aggiungere il CSS personalizzato, ad esempio prima del carrello, prima del modulo di acquisto, nelle pagine dei prodotti e altro ancora.
WPCode supporta WooCommerce, Easy Digital Downloads e MemberPress.
Suggerimenti per i bonus
Di seguito sono riportate alcune risorse aggiuntive per aiutarvi a progettare esperienze utente personalizzate in WordPress. Per alcune di queste opzioni non è nemmeno necessario imparare i CSS:
- Come mostrare contenuti personalizzati a utenti diversi in WordPress
- Come personalizzare i colori del vostro sito WordPress
- Come personalizzare e abbellire i moduli di WordPress (2 metodi semplici)
- Come creare una pagina iniziale personalizzata in WordPress (3 metodi)
Speriamo che questo articolo vi abbia aiutato a capire come applicare i CSS per specifici ruoli utente in WordPress. Potreste anche voler consultare il nostro foglio informativo sui CSS predefiniti generati da WordPress per i principianti, oppure dare un’occhiata a questi plugin e suggerimenti per migliorare l’area di amministrazione di WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Have a question or suggestion? Please leave a comment to start the discussion.