Pracowaliśmy nad wieloma stronami WordPress, gdzie różni użytkownicy potrzebowali różnych doświadczeń. Członkowie mogą potrzebować czystszych układów, autorzy mogą skorzystać z mniejszej liczby rozpraszaczy, a klienci często nie powinni widzieć tych samych elementów co administratorzy.
Wyzwaniem jest to, że WordPress nie zawiera wbudowanego sposobu na stylizację strony w oparciu o role użytkowników. Jeśli chcesz ukryć elementy, dostosować układy lub zmienić projekty dla konkretnych użytkowników, zazwyczaj jesteś zmuszony do edycji plików motywu lub dodawania niestandardowego kodu.
Właśnie tam sprawy mogą stać się ryzykowne. Widzieliśmy, jak użytkownicy przypadkowo psują swoje strony, dodając mały fragment CSS w złym miejscu, zwłaszcza podczas pracy w plikach motywu lub motywach potomnych.
Najbezpieczniejszym i najłatwiejszym sposobem stosowania CSS w oparciu o role użytkowników jest użycie wtyczki WPCode. Jej wbudowana logika warunkowa pozwala na targetowanie ról takich jak Administratorzy, Edytorzy czy Subskrybenci bez dotykania plików motywu.
W tym przewodniku pokażemy Ci, jak zastosować niestandardowy CSS dla konkretnych ról użytkowników za pomocą narzędzia przyjaznego dla początkujących. Jest to to samo podejście, którego używamy na naszych własnych stronach, gdy potrzebujemy szybkiego, bezpiecznego rozwiązania, które nie spowoduje problemów w przyszłości.
Oto krótkie omówienie tematów, które poruszymy w tym przewodniku:
Dlaczego i kiedy stosować CSS dla konkretnych ról użytkowników w WordPressie
Zarządzamy różnymi stronami internetowymi dla naszych firm, które wymagają logowania użytkowników. Często znajdujemy potrzebę dostosowania wyglądu dla różnych ról użytkowników.
Podczas przeprowadzania testów A/B na tych stronach odkryliśmy, że personalizacja znacznie poprawia doświadczenie użytkownika. Badania wskazują, że spersonalizowane doświadczenia internetowe mogą zwiększyć współczynniki konwersji nawet o 10-15%, co czyni stylizację opartą na rolach cenną strategią.
Lepsze doświadczenie użytkownika ostatecznie prowadzi do większej satysfakcji klienta i sprzedaży.
Niezależnie od tego, czy jesteś właścicielem witryny, deweloperem czy projektantem, kontrola nad wyglądem witryny dla różnych użytkowników może być bardzo przydatna.
Oto kilka typowych przypadków użycia:
- Strony członkowskie: Możesz użyć niestandardowego CSS, aby zaoferować różne doświadczenia członkom premium.
- Sklepy eCommerce: Możesz wyróżnić koszyki zakupowe, zniżki dla klientów i inne funkcje dla zalogowanych klientów.
- Blogi z wieloma autorami: Zarządzanie blogiem z wieloma autorami może być kłopotliwe. Dzięki niestandardowemu CSS możesz stworzyć czysty, wydajny interfejs dla redaktorów, jednocześnie zachowując prostotę dla współpracowników i subskrybentów.
- Witryny klientów: Możesz stworzyć uproszczony obszar administracyjny dla klientów, ukrywając pewne elementy za pomocą niestandardowego CSS. Jest to szczególnie przydatne do uproszczenia interfejsu klienta poprzez ukrycie złożonych widżetów pulpitu lub powiadomień wtyczek, które mogą zdezorientować użytkowników nietechnicznych.
Teraz problem polega na tym, jak poinformować WordPress, który kod CSS ma być ładowany dla różnych ról użytkowników.
Jak zastosować niestandardowy CSS dla określonych ról użytkowników w WordPressie
Najprostszym sposobem zarządzania niestandardowym kodem, w tym CSS, w WordPressie jest użycie WPCode. Jest to najlepsza wtyczka do fragmentów kodu dla WordPressa i pozwala bezpiecznie zarządzać niestandardowym CSS w jednym miejscu.
Uwaga: Dostępna jest również bezpłatna wersja WPCode. Zalecamy jednak przejście na płatny plan, aby odblokować więcej funkcji.
Dlaczego polecamy WPCode:
- Pozwala bezpiecznie dodać dowolny niestandardowy kod, w tym CSS, bez psucia Twojej witryny. Jeśli fragment kodu nie działa, możesz go łatwo wyłączyć.
- Zawiera potężne narzędzia do wstawiania kodu i logiki warunkowej, pozwalające na uruchamianie fragmentu kodu tylko wtedy, gdy jest to potrzebne.
- Uzyskujesz dostęp do ogromnej biblioteki kodu z użytecznymi fragmentami, co pozwala uniknąć instalowania wielu oddzielnych wtyczek.
Mając to na uwadze, przyjrzyjmy się, jak dodać niestandardowy CSS dla określonej roli użytkownika.
Dodawanie niestandardowego fragmentu CSS w WPCode
W tym przykładzie dostosujemy Pulpit administracyjny WordPressa dla określonej roli (np. Edytora). Użyjemy kodu, który podświetli menu „Wpisy” w backendzie, aby pokazać, jak działa ten proces.
- Najpierw zainstaluj i aktywuj wtyczkę WPCode. Więcej szczegółów znajdziesz w naszym poradniku jak zainstalować wtyczkę WordPress.
- Po aktywacji przejdź do strony Fragmenty kodu » + Dodaj fragment.
- Najedź kursorem na „Dodaj własny kod (nowy fragment)” i kliknij „+ Dodaj własny fragment”.
- Na następnym ekranie wybierz „Fragment CSS” jako typ kodu z menu rozwijanego po prawej stronie (zazwyczaj domyślnie jest to „Fragment HTML”).
- Wpisz tytuł dla swojego fragmentu, na przykład „Podświetlenie menu administratora dla redaktorów”.
- Wklej swój niestandardowy kod CSS w polu „Podgląd kodu”.
Oto przykładowy kod, którego używamy w tym przykładzie obszaru administracyjnego:
li#menu-posts {
background-color: #bf0505;
}
Ważne: Wybór właściwej lokalizacji
Ponieważ ten konkretny kod jest przeznaczony dla Panelu Administratora, musisz przewinąć w dół do sekcji „Wstawienie” i wybrać „Nagłówek administratora” jako lokalizację.
Jeśli dodawałbyś kod CSS dla frontendu swojej witryny (na przykład dla strony członka), po prostu pozostawiłbyś lokalizację jako „Nagłówek całej witryny”.
Stosowanie logiki warunkowej
Teraz upewnijmy się, że ten kod będzie działał tylko dla wybranej przez nas roli użytkownika.
- Przewiń w dół do pola „Inteligentna logika warunkowa” i przełącz przełącznik na „Włącz logikę”.
- Ustaw opcję „Warunek” na „Pokaż” i kliknij „+ Dodaj nową grupę”.
- Wybierz „Rola użytkownika” z listy rozwijanej.
- Wybierz konkretną rolę, którą chcesz wybrać (np. Edytor, Subskrybent).
- Na koniec kliknij „Zapisz fragment” w prawym górnym rogu i przełącz przełącznik z „Nieaktywny” na „Aktywny”.
Dodaj niestandardowy CSS dla określonych ról użytkowników w innych obszarach
Personalizacja projektu na stronach eCommerce prowadzi do lepszego doświadczenia użytkownika i udowodniono, że zmniejsza sprzedaż z porzuconych koszyków.
Jeśli prowadzisz sklep WooCommerce, sprzedajesz kursy online lub inne produkty cyfrowe, dodanie niestandardowego CSS dla zalogowanych klientów będzie przydatne.
WPCode pozwala łatwo kierować te konkretne strony. Chociaż możesz zobaczyć opcje lokalizacji, takie jak „WooCommerce”, zalecamy pozostawienie Lokalizacji wstawienia jako Nagłówek całej witryny dla wszystkich stylów CSS, aby uniknąć problemów z wyświetlaniem.
Zamiast zmieniać lokalizację, użyj sekcji Inteligentna logika warunkowa. Możesz dodać reguły, aby wyświetlać style CSS tylko wtedy, gdy „Typ strony” to „Koszyk WooCommerce” lub „Kasa”.
WPCode obsługuje WooCommerce, Easy Digital Downloads i MemberPress.
Najczęściej zadawane pytania
Oto odpowiedzi na najczęściej zadawane pytania dotyczące dostosowywania WordPress dla różnych ról użytkowników.
Czy mogę zastosować CSS do niestandardowych ról użytkowników w WordPress?
Tak. WPCode pozwala kierować dowolną rolę użytkownika, w tym niestandardowe role utworzone przez wtyczki członkowskie, narzędzia LMS lub niestandardowy kod. Musisz tylko upewnić się, że niestandardowa rola pojawia się w opcjach logiki warunkowej.
Co jeśli zmiany CSS nie pojawią się u niektórych użytkowników?
Może się to zdarzyć, jeśli Twoja witryna używa agresywnego buforowania lub sieci CDN. Spróbuj wyczyścić pamięć podręczną i upewnij się, że fragment WPCode jest aktywny i celuje we właściwą lokalizację i rolę.
Czy mogę podglądać zmiany CSS przed ich opublikowaniem?
WPCode nie ma podglądu wizualnego, ale możesz pozostawić fragment nieaktywny podczas testowania. Zalecamy otwarcie okna Incognito lub Prywatnego i zalogowanie się z określoną rolą użytkownika (np. jako Subskrybent), aby sprawdzić zmiany za pomocą narzędzi deweloperskich przeglądarki.
Czy bezpieczne jest używanie WPCode zamiast edycji plików motywu?
Absolutnie. W WPBeginner używamy WPCode, ponieważ utrzymuje cały nasz niestandardowy kod z dala od plików motywu, dzięki czemu zmiany nie giną podczas aktualizacji. Ponadto ułatwia i ułatwia zarządzanie fragmentami kodu w jednym miejscu.
Dodatkowe zasoby
Poniżej znajdują się dodatkowe zasoby, które pomogą Ci zaprojektować niestandardowe doświadczenia użytkownika w WordPress. Nie musisz nawet uczyć się CSS dla niektórych z tych opcji:
- 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 stworzyć niestandardową stronę główną w WordPress (3 metody)
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak stosować CSS dla konkretnych ról użytkowników w WordPressie. Możesz również zapoznać się z naszym domyślnym arkuszem stylów CSS generowanym przez WordPress dla początkujących lub sprawdzić te wtyczki i wskazówki dotyczące ulepszenia obszaru administracyjnego WordPress.
Masz pytanie lub sugestię? Zostaw komentarz, aby rozpocząć dyskusję.