Abbiamo lavorato su molti siti WordPress in cui utenti diversi necessitavano di esperienze diverse. I membri potrebbero aver bisogno di layout più puliti, gli autori potrebbero beneficiare di meno distrazioni e i clienti spesso non dovrebbero vedere gli stessi elementi degli amministratori.
La sfida è che WordPress non include un modo integrato per stilizzare il tuo sito in base ai ruoli utente. Se vuoi nascondere elementi, modificare layout o ritoccare design per utenti specifici, di solito sei costretto a modificare i file del tema o aggiungere codice personalizzato.
È qui che le cose possono diventare rischiose. Abbiamo visto utenti rompere accidentalmente il loro sito solo aggiungendo un piccolo snippet CSS nel posto sbagliato, specialmente quando si lavora all'interno dei file del tema o dei temi figli.
Il modo più sicuro e semplice per applicare CSS in base ai ruoli utente è utilizzare il plugin WPCode. La sua logica condizionale integrata ti consente di indirizzare ruoli come Amministratori, Editor o Sottoscrittori senza toccare i file del tuo tema.
In questa guida, ti mostreremo come applicare CSS personalizzato per ruoli utente specifici utilizzando uno strumento adatto ai principianti. Questo è lo stesso approccio che utilizziamo sui nostri siti quando abbiamo bisogno di una soluzione rapida e sicura che non causi problemi in seguito.
Ecco una rapida panoramica degli argomenti che tratteremo in questa guida:
Perché e quando applicare CSS per ruoli utente specifici in WordPress
Gestiamo vari siti web per le nostre attività che richiedono l'accesso utente. Troviamo spesso la necessità di personalizzare l'aspetto per diversi ruoli utente.
Durante l'esecuzione di test A/B su quei siti, abbiamo scoperto che la personalizzazione migliora notevolmente l'esperienza utente. La ricerca indica che le esperienze web personalizzate possono aumentare i tassi di conversione fino al 10-15%, rendendo lo styling basato sui ruoli una strategia preziosa.
Una migliore esperienza utente porta in definitiva a maggiore soddisfazione del cliente e vendite.
Che tu sia un proprietario di sito, uno sviluppatore o un designer, avere il controllo su come il tuo sito appare a diversi utenti può essere molto utile.
Ecco alcuni casi d'uso comuni:
- Siti di appartenenza: Puoi usare CSS personalizzato per offrire esperienze diverse ai membri premium.
- Negozi eCommerce: Puoi evidenziare carrelli della spesa, restituire sconti ai clienti e altre funzionalità per i clienti registrati.
- Blog con più autori: Gestire un blog con più autori può diventare complicato. Con CSS personalizzato, puoi creare un'interfaccia pulita ed efficiente per gli editor, mantenendo le cose semplici per i collaboratori e gli iscritti.
- Siti Clienti: Puoi creare un'area admin semplificata per i clienti nascondendo determinati elementi con CSS personalizzato. Questo è particolarmente utile per semplificare l'interfaccia del cliente nascondendo widget complessi della dashboard o avvisi di plugin che potrebbero confondere gli utenti non tecnici.
Ora, il problema è come dire a WordPress quale codice CSS caricare per i diversi ruoli utente.
Come applicare CSS personalizzato per ruoli utente specifici in WordPress
Il modo più semplice per gestire codice personalizzato, incluso il CSS, in WordPress è utilizzare WPCode. È il miglior plugin per snippet di codice per WordPress e ti consente di gestire in modo sicuro il tuo CSS personalizzato in un unico posto.
Nota: È disponibile anche una versione gratuita di WPCode. Tuttavia, consigliamo di passare a un piano a pagamento per sbloccare più funzionalità.
Perché raccomandiamo WPCode:
- Ti consente di aggiungere in modo sicuro qualsiasi codice personalizzato, incluso CSS, senza interrompere il tuo sito web. Se uno snippet di codice non funziona, puoi disabilitarlo facilmente.
- Viene fornito con potenti strumenti di inserimento di codice e logica condizionale, che ti consentono di eseguire uno snippet solo quando necessario.
- Ottieni l'accesso a una vasta libreria di snippet utili, risparmiandoti l'installazione di diversi plugin separati.
Detto questo, vediamo come aggiungere CSS personalizzato per un ruolo utente specifico.
Aggiungere uno snippet CSS personalizzato in WPCode
Per questo esempio, personalizzeremo la Dashboard di amministrazione di WordPress per un ruolo specifico (come un Editor). Utilizzeremo codice che evidenzia il menu 'Articoli' nel backend per mostrarti come funziona il processo.
- Innanzitutto, installa e attiva il plugin WPCode. Per maggiori dettagli, consulta il nostro tutorial su come installare un plugin di WordPress.
- Dopo l'attivazione, vai alla pagina Snippet di codice » + Aggiungi snippet.
- Passa il mouse sopra ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’ e fai clic su ‘+ Aggiungi snippet personalizzato’.
- Nella schermata successiva, seleziona ‘Snippet CSS’ come tipo di codice dal menu a discesa sulla destra (di solito è impostato su Snippet HTML).
- Inserisci un titolo per il tuo snippet, ad esempio “Evidenziazione menu amministratore per editor”.
- Incolla il tuo CSS personalizzato nella casella ‘Anteprima codice’.
Ecco il codice di esempio che stiamo utilizzando per questo esempio di area amministrativa:
li#menu-posts {
background-color: #bf0505;
}
Importante: Selezione della posizione corretta
Poiché questo codice specifico è per la Dashboard Amministrativa, devi scorrere verso il basso fino alla sezione ‘Inserimento’ e scegliere ‘Intestazione Amministrativa’ come posizione.
Se stessi aggiungendo CSS per il front-end del tuo sito (come per una pagina membro), lasceresti semplicemente la posizione come ‘Intestazione Sito’.
Applicazione della logica condizionale
Ora, assicuriamoci che questo codice venga eseguito solo per il ruolo utente desiderato.
- Scorri verso il basso fino alla casella ‘Logica condizionale intelligente’ e attiva l’interruttore su ‘Abilita logica’.
- Imposta ‘Condizione’ su ‘Mostra’ e fai clic su ‘+ Aggiungi nuovo gruppo’.
- Seleziona ‘Ruolo utente’ dall’elenco a discesa.
- Scegli il ruolo specifico che desideri targettizzare (ad es. Editor, Sottoscrittore).
- Infine, fai clic su ‘Salva Snippet’ in alto a destra e sposta l’interruttore da ‘Inattivo’ ad ‘Attivo’.
Aggiungere CSS personalizzato per ruoli utente specifici in altre aree
La personalizzazione del design sui siti Web di eCommerce porta a un'esperienza utente migliorata ed è stato dimostrato che riduce le vendite di carrelli abbandonati.
Se gestisci un negozio WooCommerce, vendi corsi online o vendi altri prodotti digitali, aggiungere CSS personalizzato per i clienti con accesso effettuato sarà utile.
WPCode ti consente di targettizzare facilmente queste pagine specifiche. Sebbene tu possa vedere opzioni di posizione come “WooCommerce”, raccomandiamo di mantenere la Posizione di Inserimento come Intestazione Sito per tutto il CSS per evitare problemi di visualizzazione.
Invece di cambiare la posizione, usa la sezione Logica Condizionale Intelligente. Puoi aggiungere regole per mostrare il CSS solo quando il “Tipo di Pagina” è “Carrello WooCommerce” o “Checkout”.
WPCode supporta WooCommerce, Easy Digital Downloads e MemberPress.
Domande frequenti
Ecco le risposte alle domande più frequenti sulla personalizzazione di WordPress per diversi ruoli utente.
Posso applicare CSS a ruoli utente personalizzati in WordPress?
Sì. WPCode ti consente di targettizzare qualsiasi ruolo utente, inclusi quelli personalizzati creati da plugin di membership, strumenti LMS o codice personalizzato. Devi solo assicurarti che il ruolo personalizzato appaia nelle opzioni di logica condizionale.
Cosa succede se le modifiche CSS non vengono visualizzate per alcuni utenti?
Questo può accadere se il tuo sito utilizza una cache aggressiva o una CDN. Prova a svuotare la cache e assicurati che lo snippet di WPCode sia attivo e miri alla posizione e al ruolo corretti.
Posso visualizzare in anteprima le modifiche CSS prima di renderle attive?
WPCode non ha un’anteprima visiva, ma puoi mantenere lo snippet inattivo durante il test. Ti consigliamo di aprire una finestra Incognito o Privata ed effettuare l’accesso con il ruolo utente specifico (ad es. come Sottoscrittore) per ispezionare le modifiche utilizzando gli strumenti per sviluppatori del tuo browser.
È sicuro usare WPCode invece di modificare i file del tema?
Assolutamente. Noi di WPBeginner usiamo WPCode perché mantiene tutto il nostro codice personalizzato separato dai file del tema, quindi le modifiche non vengono perse durante gli aggiornamenti. Inoltre, rende più sicuro e facile gestire gli snippet in un unico posto.
Risorse aggiuntive
Di seguito sono riportate alcune risorse aggiuntive per aiutarti a progettare esperienze utente personalizzate in WordPress. Non è nemmeno necessario imparare il CSS per alcune di queste opzioni:
- Come mostrare contenuti personalizzati a diversi utenti in WordPress
- Come personalizzare i colori sul tuo sito WordPress
- Come personalizzare e stilizzare i tuoi moduli WordPress (2 metodi semplici)
- Come creare una pagina iniziale personalizzata in WordPress (3 metodi)
Speriamo che questo articolo ti abbia aiutato a imparare come applicare il CSS per ruoli utente specifici in WordPress. Potresti anche voler consultare il nostro foglio di riferimento CSS generato da WordPress predefinito per principianti, o dare un'occhiata a questi plugin e suggerimenti per migliorare l'area di amministrazione di WordPress.
Hai una domanda o un suggerimento? Lascia un commento per iniziare la discussione.