Am lucrat la multe site-uri WordPress unde diferiți utilizatori aveau nevoie de experiențe diferite. Membrii, clienții, autorii și clienții pot beneficia cu toții de un aspect care se potrivește rolului lor.
Dar WordPress nu oferă o metodă încorporată pentru a stiliza elemente în funcție de rolurile utilizatorilor. Încercarea de a face acest lucru prin fișierele temei poate părea riscantă, mai ales dacă nu sunteți un dezvoltator.
Am văzut utilizatori blocați sau chiar defectându-și site-ul doar prin adăugarea unui cod greșit. De aceea, recomandăm întotdeauna o modalitate mai sigură și mai ușoară de a gestiona acest lucru.
În acest ghid, vă vom arăta cum să aplicați CSS personalizat pentru roluri specifice de utilizator folosind un instrument ușor de utilizat pentru începători. Aceasta este aceeași metodă pe care o folosim pe site-urile noastre atunci când avem nevoie de o soluție rapidă și sigură.
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
- Aplicarea CSS personalizat pentru roluri specifice de utilizator în WordPress
- Adăugați CSS personalizat pentru roluri specifice de utilizator în zona de administrare WordPress
- Adăugați CSS personalizat pentru roluri specifice de utilizator în alte zone
- Întrebări frecvente
- Sfaturi bonus
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 a utilizatorului. Adesea constatăm nevoia de a personaliza aspectul pentru diferite roluri de utilizator.
În timp ce rulam teste A/B pe acele site-uri, am descoperit că personalizarea îmbunătățește semnificativ experiența utilizatorului. O experiență mai bună a utilizatorului duce, în cele din urmă, la o mai mare satisfacție a clienților, conversii și vânzări.
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 prin ascunderea anumitor elemente cu CSS personalizat.
Acum, problema este cum să spunem WordPress ce cod CSS să încarce pentru diferite roluri de utilizator.
Aplicarea CSS personalizat pentru roluri specifice de utilizator în WordPress
Cel mai simplu mod de a gestiona coduri personalizate, inclusiv CSS, în WordPress este prin utilizarea WPCode. Este cel mai bun plugin de fragmente de cod pentru WordPress și vă permite să vă gestionați în siguranță CSS-ul personalizat într-un singur loc.
Notă: Este disponibilă și o versiune gratuită a WPCode. Cu toate acestea, recomandăm actualizarea 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ă adăugăm niște CSS personalizat și să-l aplicăm pentru roluri specifice de utilizator.
Adăugarea CSS personalizat în WPCode
Mai întâi, trebuie să instalați și să activați pluginul WPCode. Pentru mai multe detalii, consultați tutorialul nostru despre cum să instalați un plugin WordPress.
După activare, accesați pagina Code Snippets » + Add Snippet. Acolo, veți vedea multe fragmente utile pentru diverse sarcini.
Cu toate acestea, deoarece adăugați un cod CSS personalizat, va trebui să începeți de la zero, făcând clic pe „+ Add Custom Snippet” sub caseta „Add Your Custom Code (New Snippet)”.
Apoi, trebuie să selectați „Fragment CSS” ca tip de cod din lista de opțiuni care apar pe ecran.
Acest lucru vă va duce la editorul de cod.
Mai întâi, trebuie să introduceți un titlu pentru fragmentul dvs., care poate fi orice pentru a vă ajuta să vă amintiți la ce servește codul.
Acum, puteți adăuga codul CSS personalizat în caseta „Previzualizare cod”.
În scopul acestui tutorial, folosim acest cod, care evidențiază meniul „Postări” din zona de administrare prin schimbarea culorii de fundal. Puteți folosi propriul cod CSS aici:
li#menu-posts {
background-color: #bf0505;
}
Alege logica condițională a rolului utilizatorului
Apoi, derulați în jos la caseta „Logica condițională inteligentă” și comutați comutatorul de lângă opțiunea „Activare logică”.
După aceea, alegeți „Condition” (Show sau Hide) și apoi faceți clic pe „Add new group”.
Faceți clic pe prima casetă din Regula pentru a o extinde. Veți vedea o listă de reguli din care puteți alege.
De exemplu, puteți selecta starea de autentificare, rolul utilizatorului, tipul dispozitivului etc.
Selectați „User Role” deoarece doriți ca acest cod CSS personalizat să fie adăugat pentru un anumit rol de utilizator.
După aceea, puteți selecta la ce rol de utilizator doriți să îl aplicați.
Notă: Puteți adăuga mai multe reguli de logică condițională făcând clic pe butonul „+ Adăugați un grup nou”.
Odată ce ați terminat, faceți clic pe „Salvare fragment” în colțul din dreapta sus al ecranului și apoi comutați-l la „Activ”.
WPCode va afișa acum CSS-ul dvs. personalizat anumitor roluri de utilizator în WordPress.
Adăugați CSS personalizat pentru roluri specifice de utilizator în zona de administrare WordPress
Dacă doriți ca CSS-ul dvs. personalizat să fie adăugat doar în zona de administrare WordPress, atunci WPCode face acest lucru și mai ușor.
Pe ecranul de editare a codului, derulați în jos la opțiunea „Location”. Faceți clic pe meniul derulant pentru a-l extinde și veți vedea o mulțime de locații unde puteți încărca automat CSS-ul.
Acum, selectați pur și simplu opțiunea „Antet admin” sau „Subsol admin” pentru a încărca codul CSS în zona de administrare WordPress.
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ă alegeți unde să adăugați cod personalizat pe un site de eCommerce. Sub setările de Localizare, comutați la fila „eCommerce”.
Veți vedea mai multe locuri unde puteți adăuga CSS-ul dvs. personalizat, cum ar fi înainte de coș, înainte de formularul de finalizare a comenzii, pe paginile de produse și multe altele.
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 în instrumentele de dezvoltator ale browserului. Odată ce sunteți mulțumit de aspect, lipiți-l în WPCode și activați-l.
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.
Sfaturi bonus
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.
Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.
Ai o întrebare sau o sugestie? Te rugăm să lași un comentariu pentru a începe discuția.