Come applicare i CSS per specifici ruoli utente in WordPress (in modo semplice)

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, accedere 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)”.

Si accede così all’editor di codice. Per prima cosa, è necessario inserire un titolo per lo snippet di codice e poi selezionare ‘Snippet CSS’ sotto Tipo di codice.

Ora è possibile aggiungere il codice CSS personalizzato nella casella 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:

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 generati da WordPress per i principianti o 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.