Så här använder du CSS för specifika användarroller i WordPress (enkelt sätt)

Att ändra webbplatsens utseende för olika användarroller kan hjälpa dig att skapa personliga användarupplevelser.

Vi har upptäckt att många användare föredrar webbplatser med personliga gränssnitt. Instansitivt kanske du vill visa specifika element för författare som är dolda för andra användare eller utforma vissa avsnitt annorlunda för prenumeranter eller klienter.

I denna poradnik kommer vi att przewodnik dig genom att tillämpa CSS för specifika användarroller i WordPress. Detta hjälper dig att anpassa olika områden baserat på dina klienters specifika behov.

Varför och när man ska använda CSS för specifika användarroller i WordPress

Vi hanterar olika webbplatser för våra företag som kräver inloggning av användare. Vi har ofta behov av att anpassa utseendet för olika användarroller.

När vi har kört split-test på dessa webbplatser har vi upptäckt att personalisering förbättrar användarupplevelsen avsevärt. En bättre användarupplevelse leder i slutändan till mer nöjda kunder, konverteringar 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ändningsområden:

• Medlemssajter: Du kan använda anpassad CSS för att erbjuda olika upplevelser till premiummedlemmar.
• Butiker för e-handel: Du kan lyfta fram kundvagnar, rabatter för återkommande kunder och andra funktioner för inloggade klienter.
• 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 och effektivt gränssnitt för redaktörer samtidigt som det är enkelt för bidragsgivare och prenumeranter.
• Webbplatser för klienter: Du kan skapa en förenklad obszar administracyjny för klienter genom att dölja vissa element med anpassad CSS.

Nu är problemet hur man talar om för WordPress vilken CSS-kod som ska laddas för olika användarroller.

Tillämpa anpassad CSS för specifika användarroller i WordPress

Det enklaste sättet att hantera anpassad kod, inklusive CSS, i WordPress är genom att använda WPCode. Det är det bästa pluginet för fragment kodu för WordPress och låter dig hantera din anpassade CSS på ett säkert sätt på ett ställe.

Obs: En gratis version av WPCode är också tillgänglig. Vi rekommenderar dock att du uppgraderar till en betald plan för att låsa upp fler funktioner.

Varför vi rekommenderar WPCode:

• Det gör att du på ett säkert sätt kan lägga till anpassad kod, inklusive CSS, utan att förstöra din webbplats. Om ett fragment kod inte fungerar kan du enkelt inaktivera det.
• Den levereras med kraftfulla verktyg för wstawić och villkorlig logik, så att du bara kan köra ett fragment kodu när det behövs.
• Du får tillgång till ett massivt kodbibliotek med användbara fragment kodu, vilket gör att du slipper installera flera separata plugins.

Med detta sagt, låt oss lägga till lite anpassad CSS och tillämpa den för specifika användarroller.

Lägga till anpassad CSS i WPCode

Först måste du installera och aktivera plugin-programmet WPCode. Mer information finns i vår poradnik om hur du installerar ett WordPress-plugin.

Efter aktivering går du till sidan Code Fragments ” +Add Sn ippet. Där kommer du att se många användbara fragment kodu för olika uppgifter.

Men eftersom du lägger till en anpassad CSS-kod måste du börja om från början genom att klicka på ”+ Lägg till anpassad fragment kod” under rutan ”Lägg till din anpassade kod (nytt fragment kod)”.

Då kommer du till kodredigeraren. Först måste du ange en titel för ditt fragment kodu och sedan välja ”CSS Snippet” under Kodtyp.

Nu kan du lägga till din anpassade CSS-kod i rutan Code Preview.

I den här poradniken använder vi den här koden, som framhäver menyn ”Inlägg” i obszar administracyjny genom att ändra dess bakgrundsfärg. Du kan använda din egen CSS-kod här:

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

Välj användarroll Villkorlig logik

Därefter bläddrar du ner till rutan ”Smart villkorlig logik” och växlar reglaget bredvid alternativet ”Aktivera logik”.

Därefter väljer du ”Villkor” (Visa eller Dölj) och klickar sedan på ”Lägg till ny grupp”.

Klicka på den första rutan i Rule för att expandera den. Du kommer att se en lista med regler att välja mellan.

Instansitivt kan du välja inloggningsstatus, användarroll, enhetstyp etc.

Välj ”Användarroll” eftersom du vill att den här anpassade CSS-koden ska läggas till för en viss användarroll.

Därefter kan du välja vilken användarroll du vill tillämpa den på.

Observera: Du kan lägga till flera villkorliga logikregler genom att klicka på knappen ”+ Lägg till ny grupp”.

När du är klar klickar du på ”Spara fragment kodu” längst upp till höger på skärmen och växlar sedan till ”Aktiv”.

WPCode kommer nu att visa din anpassade CSS till specifika användarroller i WordPress.

Lägg till anpassad CSS för specifika användarroller i obszar administracyjny i WordPress

Om du bara vill att din anpassade CSS ska läggas till i WordPress obszar administracyjny, gör WPCode det ännu enklare.

På kodredigeringsskärmen bläddrar du ner till alternativet ”Plats”. Klicka på rullgardinsmenyn för att expandera den och du kommer att se ett antal platser där du automatiskt kan ladda CSS.

Nu är det bara att välja alternativet ”Admin header” eller ”Admin footer” för att ladda din CSS-kod i obszar administracyjny på WordPress.

Lägg till anpassad CSS för specifika användarroller i andra områden

Designanpassning på webbplatser för e-handel leder till en förbättrad användarupplevelse och har visat sig minska försäljningen av övergivna kundvagnar.

Om du driver en WooCommerce-butik, säljer onlinekurser eller säljer andra digitala produkter kan det vara användbart att lägga till anpassad CSS för inloggade klienter.

Med WPCode kan du välja var du vill lägga till anpassad kod på en webbplats för e-handel. Under Platsinställningar växlar du till kartan ”e-handel”.

Du kommer att se flera ställen där du kan lägga till din anpassade CSS, till exempel före varukorgen, före utcheckningsformuläret, på produktsidor med mera.

WPCode stöder WooCommerce, Easy Digital Downloads och MemberPress.

Tips om bonusar

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 några av dessa alternativ:

• Så här visar du anpassat innehåll för olika användare i WordPress
• Så här anpassar du färger på din WordPress-webbplats
• Så här anpassar och utformar du dina WordPress-formulär (2 enkla metoder)
• Så här skapar du 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år standard WordPress-genererade CSS-fuskark för nybörjare eller kolla in dessa plugins och tips för att förbättra obszar administracyjny i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.