Jak zastosować CSS dla określonych ról użytkowników w WordPress (prosty sposób)

Zmiana wyglądu witryny dla różnych ról użytkowników może pomóc w tworzeniu spersonalizowanych doświadczeń użytkowników.

Odkryliśmy, że wielu użytkowników preferuje strony internetowe ze spersonalizowanymi interfejsami. Na przykład, możesz chcieć wyświetlać określone elementy autorom, które są ukryte przed innymi użytkownikami, lub stylizować niektóre sekcje inaczej dla subskrybentów lub klientów.

W tym poradniku przeprowadzimy cię przez stosowanie CSS dla określonych ról użytkowników w WordPress. Pomoże to dostosować różne obszary w oparciu o konkretne potrzeby klientów.

Dlaczego i kiedy stosować CSS dla określonych ról użytkowników w WordPress?

Zarządzamy różnymi stronami internetowymi dla naszych firm, które wymagają logowania użytkowników. Często spotykamy się z potrzebą dostosowania wyglądu dla różnych ról użytkowników.

Podczas przeprowadzania testów podzielonych na tych stronach odkryliśmy, że personalizacja znacznie poprawia wrażenia użytkownika. Lepsze doświadczenie użytkownika ostatecznie prowadzi do większej satysfakcji klientów, konwersji i sprzedaży.

Niezależnie od tego, czy jesteś właścicielem witryny, programistą czy projektantem, posiadanie kontroli nad wyglądem witryny dla różnych użytkowników może być bardzo przydatne.

Oto kilka typowych przypadków użycia:

• Witryny członkowskie: Możesz użyć niestandardowego CSS, aby zaoferować członkom premium różne doświadczenia.
• Sklepy e-handel: Możesz wyróżnić koszyki zakupowe, rabaty dla klientów powracających i inne funkcje dla zalogowanych klientów.
• Blogi z wieloma autorami: Zarządzanie blogiem z wieloma autorami może być nieuporządkowane. Dzięki niestandardowemu CSS możesz stworzyć przejrzysty, wydajny interfejs dla redaktorów, zachowując jednocześnie prostotę dla współpracowników i subskrybentów.
• Witryny klientów: Możesz utworzyć uproszczony obszar administracyjny dla klientów, ukrywając niektóre elementy za pomocą niestandardowego CSS.

Teraz problem polega na tym, jak powiedzieć WordPressowi, który kod CSS załadować dla różnych ról użytkowników.

Stosowanie niestandardowego CSS dla określonych ról użytkowników w WordPress

Najprostszym sposobem na zarządzanie niestandardowym kodem, w tym CSS, w WordPress jest użycie WPCode. Jest to najlepsza wtyczka do fragmentów kodu dla WordPress i pozwala bezpiecznie zarządzać niestandardowym CSS w jednym miejscu.

Uwaga: Dostępna jest również darmowa wersja WPCode. Zalecamy jednak uaktualnienie do płatnego planu, aby odblokować więcej funkcji.

Dlaczego polecamy WPCode:

• Pozwala bezpiecznie dodawać dowolny niestandardowy kod, w tym CSS, bez uszkadzania witryny. Jeśli fragment kodu nie działa, można go łatwo wyłączyć.
• Jest wyposażony w potężne narzędzia do wstawienia kodu i logiki warunkowej, co pozwala na uruchamianie fragmentu kodu tylko wtedy, gdy jest to potrzebne.
• Otrzymujesz dostęp do ogromnej biblioteki przydatnych fragmentów kodu, dzięki czemu nie musisz instalować kilku oddzielnych wtyczek.

To powiedziawszy, dodajmy niestandardowy CSS i zastosujmy go dla określonych ról użytkowników.

Dodawanie własnego CSS w WPCode

Najpierw należy zainstalować i aktywować wtyczkę WPCode. Więcej szczegółów można znaleźć w naszym poradniku na temat instalacji wtyczki WordPress.

Po aktywacji przejdź do strony Fragmenty kodu ” +Dodaj fragment kodu. Zobaczysz tam wiele przydatnych fragmentów kodu do różnych zadań.

Ponieważ jednak dodajesz niestandardowy kod CSS, musisz zacząć od zera, klikając „+ Dodaj niestandardowy fragment kodu” w polu „Dodaj swój niestandardowy kod (nowy fragment kodu)”.

Spowoduje to przejście do edytora kodu. Najpierw należy wprowadzić tytuł fragmentu kodu, a następnie wybrać opcję „Fragment kodu CSS” w sekcji Typ kodu.

Teraz możesz dodać swój niestandardowy kod CSS do pola podglądu kodu.

Na potrzeby tego poradnika używamy tego kodu, który podświetla menu „Posty” w obszarze administracyjnym, zmieniając jego kolor tła. Możesz użyć tutaj własnego kodu CSS:

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

Wybierz logikę warunkową roli użytkownika

Następnie przewiń w dół do pola „Inteligentna logika warunkowa” i przełącz przełącznik obok opcji „Włącz logikę”.

Następnie wybierz „Warunek” (Pokaż lub Ukryj), a następnie kliknij „Dodaj nową grupę”.

Kliknij pierwsze pole reguły, aby je rozwinąć. Wyświetli się lista reguł do wyboru.

Można na przykład wybrać status logowania, rolę użytkownika, typ urządzenia itp.

Wybierz „Rola użytkownika”, ponieważ chcesz, aby ten niestandardowy kod CSS został dodany dla określonej roli użytkownika.

Następnie możesz wybrać rolę użytkownika, do której chcesz ją zastosować.

Uwaga: Możesz dodać wiele reguł logiki warunkowej, klikając przycisk „+ Dodaj nową grupę”.

Po zakończeniu kliknij „Zapisz fragment kodu” w prawym górnym rogu ekranu, a następnie przełącz go na „Aktywny”.

WPCode pokaże teraz Twój niestandardowy CSS dla określonych ról użytkowników w WordPress.

Dodawanie niestandardowego CSS dla określonych ról użytkowników w obszarze administracyjnym WordPressa

Jeśli chcesz, aby niestandardowy CSS był dodawany tylko w obszarze administracyjnym WordPress, WPCode jeszcze bardziej to ułatwi.

Na ekranie edycji kodu przewiń w dół do opcji „Lokalizacja”. Kliknij menu rozwijane, aby je rozwinąć, a zobaczysz kilka lokalizacji, w których możesz automatycznie załadować CSS.

Teraz wystarczy wybrać opcję „Admin header” lub „Admin footer”, aby załadować kod CSS w obszarze administracyjnym WordPress.

Dodaj niestandardowy CSS dla określonych ról użytkowników w innych obszarach

Personalizacja projektu na stronach e-handlu prowadzi do poprawy doświadczenia użytkownika i udowodniono, że zmniejsza sprzedaż porzuconych koszyków.

Jeśli prowadzisz sklep WooCommerce, sprzedajesz kursy online lub inne produkty cyfrowe, to dodanie niestandardowego CSS dla zalogowanych klientów będzie przydatne.

WPCode pozwala wybrać miejsce dodania niestandardowego kodu do witryny e-handlu. W ustawieniach lokalizacji należy przejść do karty „e-handel”.

Zobaczysz kilka miejsc, w których możesz dodać swój niestandardowy CSS, takich jak przed koszykiem, przed formularzem kasy, na stronach produktów i nie tylko.

WPCode obsługuje WooCommerce, Easy Digital Downloads i MemberPress.

Wskazówki bonusowe

Poniżej znajduje się kilka dodatkowych zasobów, które pomogą Ci zaprojektować niestandardowe doświadczenia użytkowników w WordPress. Niektóre z tych opcji nie wymagają nawet znajomości CSS:

• Jak wyświetlać spersonalizowane treści różnym użytkownikom w WordPress?
• Jak dostosować kolory na swojej stronie WordPress
• Jak dostosować i stylizować formularze WordPress (2 proste metody)
• Jak utworzyć niestandardową stronę główną w WordPress (3 metody)

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak zastosować CSS dla określonych ról użytkowników w WordPress. Możesz również zapoznać się z naszą domyślnie generowaną przez WordPress ściągawką CSS dla początkujących lub sprawdzić te wtyczki i wskazówki, aby ulepszyć obszar administracyjny 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.