Vi har arbetat med många WordPress-sajter där olika användare behövde olika upplevelser. Medlemmar kan behöva renare layouter, författare kan dra nytta av färre distraktioner, och kunder bör ofta inte se samma element som administratörer.
Utmaningen är att WordPress inte har ett inbyggt sätt att styla din sajt baserat på användarroller. Om du vill dölja element, justera layouter eller finjustera designer för specifika användare, tvingas du vanligtvis att redigera temafiler eller lägga till anpassad kod.
Det är där saker kan bli riskabla. Vi har sett användare oavsiktligt förstöra sina sajter bara genom att lägga till ett litet CSS-utdrag på fel ställe, särskilt när de arbetar i temafiler eller barn-teman.
Det säkraste och enklaste sättet att applicera CSS baserat på användarroller är att använda WPCode-pluginet. Dess inbyggda villkorsstyrda logik låter dig rikta in dig på roller som Administratörer, Redaktörer eller Prenumeranter utan att röra dina temafiler.
I den här guiden visar vi dig hur du applicerar anpassad CSS för specifika användarroller med ett nybörjarvänligt verktyg. Detta är samma metod som vi använder på våra egna sajter när vi behöver en snabb, säker lösning som inte orsakar problem senare.
Här är en snabb översikt över de ämnen vi kommer att täcka i den här guiden:
Varför och när man ska tillämpa CSS för specifika användarroller i WordPress
Vi hanterar olika webbplatser för våra företag som kräver användarinloggning. Vi finner ofta behovet av att anpassa utseendet för olika användarroller.
Under A/B-testning på dessa sajter har vi upptäckt att personalisering avsevärt förbättrar användarupplevelsen. Forskning indikerar att personliga webbupplevelser kan öka konverteringsgraden med upp till 10-15%, vilket gör rollbaserad styling till en värdefull strategi.
En bättre användarupplevelse leder i slutändan till större kundnöjdhet och försäljning.
Oavsett om du är webbplatsägare, utvecklare eller designer, kan det vara mycket användbart att ha kontroll över hur din webbplats ser ut för olika användare.
Här är några vanliga användningsfall:
- Medlemskapssajter: Du kan använda anpassad CSS för att erbjuda olika upplevelser till premiummedlemmar.
- E-handelsbutiker: Du kan framhäva kundvagnar, returnera kundrabatter och andra funktioner för inloggade kunder.
- Bloggar med flera författare: Att hantera en blogg med flera författare kan bli rörigt. Med anpassad CSS kan du skapa ett rent, effektivt gränssnitt för redaktörer samtidigt som du håller det enkelt för bidragsgivare och prenumeranter.
- Klientwebbplatser: Du kan skapa ett förenklat administratörsområde för klienter genom att dölja vissa element med anpassad CSS. Detta är särskilt användbart för att förenkla klientgränssnittet genom att dölja komplexa instrumentpanelswidgets eller plugin-meddelanden som kan förvirra icke-tekniska användare.
Nu är problemet hur man talar om för WordPress vilken CSS-kod som ska laddas för olika användarroller.
Hur man tillämpar anpassad CSS för specifika användarroller i WordPress
Det enklaste sättet att hantera anpassad kod, inklusive CSS, i WordPress är att använda WPCode. Det är det bästa pluginet för kodavsnitt för WordPress och låter dig säkert hantera din anpassade CSS på ett ställe.
Notera: En gratisversion av WPCode finns också tillgänglig. Vi rekommenderar dock att uppgradera till en betald plan för att låsa upp fler funktioner.
Varför vi rekommenderar WPCode:
- Det låter dig säkert lägga till all anpassad kod, inklusive CSS, utan att bryta din webbplats. Om en kodsnutt inte fungerar kan du enkelt inaktivera den.
- Den levereras med kraftfull kodinfogning och villkorlig logik-verktyg, vilket gör att du bara kan köra ett kodavsnitt när det behövs.
- Du får tillgång till ett massivt kodbibliotek med användbara kodavsnitt, vilket sparar dig från att installera flera separata plugins.
Med det sagt, låt oss titta på hur man lägger till anpassad CSS för en specifik användarroll.
Lägga till ett anpassat CSS-utdrag i WPCode
I det här exemplet kommer vi att anpassa WordPress Admin Dashboard för en specifik roll (som en redaktör). Vi kommer att använda kod som markerar menyn 'Inlägg' i backend för att visa hur processen fungerar.
- Installera och aktivera först pluginet WPCode. För mer information, se vår handledning om hur man installerar ett WordPress-plugin.
- Efter aktivering, gå till sidan Kodavsnitt » + Lägg till avsnitt.
- Håll muspekaren över ‘Lägg till din anpassade kod (nytt kodavsnitt)’ och klicka på ‘+ Lägg till anpassat kodavsnitt’.
- På nästa skärm, välj ‘CSS-kodavsnitt’ som kodtyp från rullgardinsmenyn till höger (den är vanligtvis inställd på HTML-kodavsnitt som standard).
- Ange en titel för ditt kodavsnitt, till exempel ”Markering av adminmeny för redigerare”.
- Klistra in din anpassade CSS i rutan ‘Kodförhandsgranskning’.
Här är exempelkoden vi använder för detta exempel på adminområdet:
li#menu-posts {
background-color: #bf0505;
}
Viktigt: Välja rätt plats
Eftersom den här specifika koden är för Admininstrumentpanelen, måste du skrolla ner till avsnittet ‘Infogning’ och välja ‘Adminhuvud’ som plats.
Om du skulle lägga till CSS för webbplatsens framsida (som för en medlemsida), skulle du helt enkelt lämna platsen som ‘Webbplatsomfattande huvud’.
Tillämpa villkorlig logik
Nu ska vi se till att den här koden bara körs för den användarroll vi vill ha.
- Skrolla ner till rutan ‘Smart villkorlig logik’ och slå omkopplaren till ‘Aktivera logik’.
- Ställ in 'Villkor' till 'Visa' och klicka på '+ Lägg till ny grupp'.
- Välj 'Användarroll' från listrutan.
- Välj den specifika roll du vill rikta in dig på (t.ex. Redaktör, Prenumerant).
- Klicka slutligen på 'Spara kodsnutt' längst upp till höger och byt reglaget från 'Inaktiv' till 'Aktiv'.
Lägg till anpassad CSS för specifika användarroller på andra områden
Designanpassning på e-handelswebbplatser leder till en förbättrad användarupplevelse och har visat sig minska övergivna kundvagnsförsäljningar.
Om du driver en WooCommerce-butik, säljer onlinekurser eller andra digitala produkter, kommer det att vara användbart att lägga till anpassad CSS för inloggade kunder.
WPCode låter dig enkelt rikta in dig på dessa specifika sidor. Även om du kan se platsalternativ som "WooCommerce", rekommenderar vi att du behåller Infogningsplats som Hela webbplatsens sidhuvud för all CSS för att undvika visningsproblem.
Istället för att ändra platsen, använd sektionen Smart villkorsstyrd logik. Du kan lägga till regler för att visa CSS endast när "Sidtyp" är "WooCommerce kundvagn" eller "Kassa".
WPCode stöder WooCommerce, Easy Digital Downloads och MemberPress.
Vanliga frågor
Här är svar på de vanligaste frågorna om att anpassa WordPress för olika användarroller.
Kan jag tillämpa CSS på anpassade användarroller i WordPress?
Ja. WPCode låter dig rikta in dig på vilken användarroll som helst, inklusive anpassade roller som skapats av medlemskapsplugins, LMS-verktyg eller anpassad kod. Du behöver bara se till att den anpassade rollen visas i alternativen för villkorsstyrd logik.
Vad händer om CSS-ändringarna inte visas för vissa användare?
Detta kan hända om din webbplats använder aggressiv cachning eller ett CDN. Försök att rensa din cache, och se till att WPCode:s utdrag är aktivt och riktar sig till rätt plats och roll.
Kan jag förhandsgranska CSS-ändringarna innan jag gör dem live?
WPCode har ingen visuell förhandsgranskning, men du kan behålla kodsnutten inaktiv medan du testar. Vi rekommenderar att du öppnar ett Inkognitofönster eller privat fönster och loggar in med den specifika användarrollen (t.ex. som prenumerant) för att inspektera ändringarna med hjälp av webbläsarens utvecklarverktyg.
Är det säkert att använda WPCode istället för att redigera temafiler?
Absolut. På WPBeginner använder vi WPCode eftersom det håller all vår anpassade kod separat från temafiler, så ändringar går inte förlorade under uppdateringar. Dessutom gör det det säkrare och enklare att hantera kodavsnitt på ett ställe.
Ytterligare resurser
Följande är några ytterligare resurser som hjälper dig att designa anpassade användarupplevelser i WordPress. Du behöver inte ens lära dig CSS för vissa av dessa alternativ:
- Hur man visar personligt innehåll för olika användare i WordPress
- Hur man anpassar färger på din WordPress-webbplats
- Hur man anpassar och stylar dina WordPress-formulär (2 enkla metoder)
- Hur man skapar en anpassad startsida i WordPress (3 metoder)
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du tillämpar CSS för specifika användarroller i WordPress. Du kanske också vill se vårt standard-CSS-fuskblad för nybörjare genererat av WordPress, eller kolla in dessa plugins och tips för att förbättra WordPress adminområde.
Har du en fråga eller ett förslag? Lämna gärna en kommentar för att starta diskussionen.