Cum să aplici CSS pentru roluri specifice de utilizator în WordPress (mod ușor)

Am lucrat la multe site-uri WordPress unde diferiți utilizatori aveau nevoie de experiențe diferite. Membrii ar putea avea nevoie de layout-uri mai curate, autorii ar putea beneficia de mai puține distrageri, iar clienții adesea nu ar trebui să vadă aceleași elemente ca administratorii.

Provocarea este că WordPress nu include o modalitate încorporată de a stiliza site-ul dvs. în funcție de rolurile utilizatorilor. Dacă doriți să ascundeți elemente, să ajustați layout-uri sau să modificați design-uri pentru utilizatori specifici, sunteți de obicei nevoit să editați fișierele temei sau să adăugați cod personalizat.

Aici lucrurile pot deveni riscante. Am văzut utilizatori care și-au stricat accidental site-ul doar adăugând o mică bucată de CSS într-un loc greșit, mai ales când lucrează în fișierele temei sau în temele copil.

Cea mai sigură și mai ușoară modalitate de a aplica CSS în funcție de rolurile utilizatorilor este prin utilizarea plugin-ului WPCode. Logica sa condițională încorporată vă permite să vizați roluri precum Administratori, Editori sau Abonați fără a atinge fișierele temei.

În acest ghid, vă vom arăta cum să aplicați CSS personalizat pentru roluri specifice de utilizator folosind un instrument prietenos pentru începători. Aceasta este aceeași abordare pe care o folosim pe propriile noastre site-uri atunci când avem nevoie de o soluție rapidă și sigură care nu va cauza probleme mai târziu.

Iată o prezentare generală rapidă a subiectelor pe care le vom aborda în acest ghid:

• De ce și când să aplicați CSS pentru roluri specifice de utilizator în WordPress
• How to Apply Custom CSS for Specific User Roles in WordPress
  • Adăugarea unei bucăți de CSS personalizat în WPCode
• Adăugați CSS personalizat pentru roluri specifice de utilizator în alte zone
• Întrebări frecvente
• Resurse suplimentare

De ce și când să aplicați CSS pentru roluri specifice de utilizator în WordPress

Gestionăm diverse site-uri web pentru afacerile noastre care necesită autentificare utilizator. Adesea constatăm nevoia de a personaliza aspectul pentru diferite roluri de utilizator.

În timp ce rulăm teste A/B pe acele site-uri, am descoperit că personalizarea îmbunătățește semnificativ experiența utilizatorului. Cercetările indică faptul că experiențele web personalizate pot crește ratele de conversie cu până la 10-15%, făcând stilizarea bazată pe roluri o strategie valoroasă.

O experiență mai bună pentru utilizator duce, în cele din urmă, la o satisfacție mai mare a clienților și la vânzări mai mari.

Indiferent dacă sunteți proprietar de site, dezvoltator sau designer, a avea control asupra modului în care site-ul dvs. arată pentru diferiți utilizatori poate fi foarte util.

Iată câteva cazuri de utilizare comune:

• Site-uri de membri: Puteți utiliza CSS personalizat pentru a oferi experiențe diferite membrilor premium.
• Magazine eCommerce: Puteți evidenția coșurile de cumpărături, returna reduceri pentru clienți și alte funcționalități pentru clienții conectați.
• Bloguri cu mai mulți autori: Gestionarea unui blog cu mai mulți autori poate deveni complicată. Cu CSS personalizat, puteți crea o interfață curată și eficientă pentru editori, menținând în același timp lucrurile simple pentru colaboratori și abonați.
• Site-uri pentru clienți: Puteți crea o zonă de administrare simplificată pentru clienți ascunzând anumite elemente cu CSS personalizat. Acest lucru este deosebit de util pentru simplificarea interfeței clientului prin ascunderea widget-urilor complexe din tabloul de bord sau a notificărilor de plugin-uri care ar putea confuza utilizatorii non-tehnici.

Acum, problema este cum să spunem WordPress ce cod CSS să încarce pentru diferite roluri de utilizator.

Cum să aplicați CSS personalizat pentru roluri specifice de utilizator în WordPress

Cel mai simplu mod de a gestiona codul personalizat, inclusiv CSS, în WordPress este prin utilizarea WPCode. Este cel mai bun plugin pentru fragmente de cod pentru WordPress și vă permite să gestionați în siguranță CSS-ul personalizat într-un singur loc.

Notă: O versiune gratuită a WPCode este, de asemenea, disponibilă. Cu toate acestea, recomandăm upgrade-ul la un plan plătit pentru a debloca mai multe funcționalități.

De ce recomandăm WPCode:

• Vă permite să adăugați în siguranță orice cod personalizat, inclusiv CSS, fără a vă defecta site-ul web. Dacă un fragment de cod nu funcționează, îl puteți dezactiva cu ușurință.
• Acesta vine cu inserare puternică de cod și logică condițională, permițându-vă să executați un fragment doar atunci când este necesar.
• Obțineți acces la o bibliotecă masivă de fragmente utile, economisind astfel instalarea mai multor pluginuri separate.

Acestea fiind spuse, să vedem cum să adăugăm CSS personalizat pentru un rol specific de utilizator.

Adăugarea unei bucăți de CSS personalizat în WPCode

Pentru acest exemplu, vom personaliza Tabloul de bord de administrare WordPress pentru un rol specific (cum ar fi un Editor). Vom folosi cod care evidențiază meniul „Postări” în backend pentru a vă arăta cum funcționează procesul.

1. Mai întâi, instalați și activați plugin-ul WPCode. Pentru mai multe detalii, consultați tutorialul nostru despre cum să instalați un plugin WordPress.
2. După activare, accesați pagina Fragmente de cod » + Adăugați fragment.
3. Plasați cursorul peste ‘Adăugați codul dvs. personalizat (Fragment nou)’ și faceți clic pe ‘+ Adăugați fragment personalizat’.

4. Pe ecranul următor, selectați ‘Fragment CSS’ ca tip de cod din meniul derulant din dreapta (de obicei, este implicit Fragment HTML).

5. Introduceți un titlu pentru fragmentul dvs., cum ar fi „Evidențiere meniu administrator pentru editori”.
6. Lipiți CSS-ul dvs. personalizat în caseta „Previzualizare cod”.

Iată codul eșantion pe care îl folosim pentru acest exemplu de zonă de administrare:

li#menu-posts {
    background-color: #bf0505;
}

Important: Selectarea locației corecte

Deoarece acest cod specific este pentru Tabloul de bord administrator, trebuie să derulați în jos la secțiunea „Inserare” și să alegeți „Antet administrator” ca locație.

Dacă ați adăuga CSS pentru partea frontală a site-ului dvs. (cum ar fi pentru pagina unui membru), ați lăsa pur și simplu locația ca „Antet general site”.

Aplicarea logicii condiționale

Acum, să ne asigurăm că acest cod rulează doar pentru rolul de utilizator dorit.

7. Derulați în jos la caseta „Logică condițională inteligentă” și comutați comutatorul la „Activare logică”.
8. Setați „Condiția” la „Afișare” și faceți clic pe „+ Adăugați un grup nou”.

9. Selectați „Rol utilizator” din lista derulantă.

10. Alegeți rolul specific pe care doriți să îl vizați (de exemplu, Editor, Abonat).

11. În cele din urmă, faceți clic pe „Salvează fragmentul” în partea dreaptă sus și comutați comutatorul de la „Inactiv” la „Activ”.

Adăugați CSS personalizat pentru roluri specifice de utilizator în alte zone

Personalizarea designului pe site-urile de eCommerce duce la o experiență îmbunătățită a utilizatorului și s-a dovedit că scade vânzările din coșuri abandonate.

Dacă aveți un magazin WooCommerce, vindeți cursuri online sau alte produse digitale, atunci adăugarea de CSS personalizat pentru clienții conectați va fi utilă.

WPCode vă permite să vizați cu ușurință aceste pagini specifice. Deși este posibil să vedeți opțiuni de locație precum „WooCommerce”, recomandăm să păstrați Locația de inserare ca Antetul întregului site pentru tot CSS-ul, pentru a evita problemele de afișare.

În loc să schimbați locația, utilizați secțiunea Logica condițională inteligentă. Puteți adăuga reguli pentru a afișa CSS-ul numai atunci când „Tipul paginii” este „Coș WooCommerce” sau „Finalizare comandă”.

WPCode suportă WooCommerce, Easy Digital Downloads și MemberPress.

Întrebări frecvente

Iată răspunsuri la cele mai frecvente întrebări despre personalizarea WordPress pentru diferite roluri de utilizator.

Pot aplica CSS rolurilor personalizate de utilizator în WordPress?

Da. WPCode vă permite să vizați orice rol de utilizator, inclusiv cele personalizate create de pluginuri de abonament, instrumente LMS sau cod personalizat. Trebuie doar să vă asigurați că rolul personalizat apare în opțiunile de logică condițională.

Ce se întâmplă dacă modificările CSS nu apar pentru anumiți utilizatori?

Acest lucru se poate întâmpla dacă site-ul dvs. utilizează o cache agresivă sau un CDN. Încercați să-ți ștergi cache-ul și asigurați-vă că fragmentul WPCode este activ și vizează locația și rolul corect.

Pot previzualiza modificările CSS înainte de a le publica?

WPCode nu are o previzualizare vizuală, dar puteți păstra fragmentul inactiv în timp ce testați. Vă recomandăm să deschideți o fereastră Incognito sau Privată și să vă conectați cu rolul de utilizator specific (de exemplu, ca Abonat) pentru a inspecta modificările folosind instrumentele pentru dezvoltatori ale browserului dvs.

Este sigur să folosesc WPCode în loc să editez fișierele temei?

Absolut. La WPBeginner, folosim WPCode deoarece păstrează tot codul nostru personalizat separat de fișierele temei, astfel încât modificările să nu se piardă în timpul actualizărilor. În plus, face mai sigur și mai ușor de gestionat fragmentele într-un singur loc.

Resurse suplimentare

Următoarele sunt câteva resurse suplimentare pentru a vă ajuta să proiectați experiențe personalizate pentru utilizatori în WordPress. Nici măcar nu trebuie să învățați CSS pentru unele dintre aceste opțiuni:

• Cum să afișați conținut personalizat pentru diferiți utilizatori în WordPress
• Cum să personalizați culorile pe site-ul dvs. WordPress
• Cum să personalizați și să stilizați formularele dvs. WordPress (2 metode ușoare)
• Cum să creezi o pagină principală personalizată în WordPress (3 metode)

Sperăm că acest articol v-a ajutat să învățați cum să aplicați CSS pentru roluri specifice de utilizator în WordPress. De asemenea, ați putea dori să consultați fișa noastră de referință CSS generată implicit de WordPress pentru începători, sau să consultați aceste pluginuri și sfaturi pentru îmbunătățirea zonei de administrare WordPress.