Wir haben an vielen WordPress-Websites gearbeitet, bei denen verschiedene Benutzer unterschiedliche Erfahrungen benötigten. Mitglieder, Kunden, Autoren und Klienten können alle von einem Layout profitieren, das ihrer Rolle entspricht.
Aber WordPress bietet keine integrierte Möglichkeit, Dinge basierend auf Benutzerrollen zu gestalten. Der Versuch, dies über Theme-Dateien zu tun, kann riskant sein, besonders wenn Sie kein Entwickler sind.
Wir haben gesehen, wie Benutzer stecken geblieben sind oder sogar ihre Website beschädigt haben, nur weil sie den falschen Code hinzugefügt haben. Deshalb empfehlen wir immer einen sichereren und einfacheren Weg, dies zu handhaben.
In dieser Anleitung zeigen wir Ihnen, wie Sie benutzerdefiniertes CSS für bestimmte Benutzerrollen mit einem anfängerfreundlichen Tool anwenden. Dies ist dieselbe Methode, die wir auf unseren Websites verwenden, wenn wir eine schnelle und sichere Lösung benötigen.
Hier ist ein kurzer Überblick über die Themen, die wir in diesem Leitfaden behandeln werden:
- Warum und wann CSS für bestimmte Benutzerrollen in WordPress anwenden
- Anwenden von benutzerdefiniertem CSS für bestimmte Benutzerrollen in WordPress
- Benutzerdefiniertes CSS für bestimmte Benutzerrollen im WordPress-Adminbereich hinzufügen
- Benutzerdefiniertes CSS für bestimmte Benutzerrollen in anderen Bereichen hinzufügen
- Häufig gestellte Fragen
- Bonustipps
Warum und wann CSS für bestimmte Benutzerrollen in WordPress anwenden
Wir verwalten verschiedene Websites für unsere Unternehmen, die eine Benutzeranmeldung erfordern. Wir stellen oft fest, dass wir das Erscheinungsbild für verschiedene Benutzerrollen anpassen müssen.
Während wir Split-Tests auf diesen Websites durchgeführt haben, haben wir festgestellt, dass Personalisierung das Benutzererlebnis erheblich verbessert. Ein besseres Benutzererlebnis führt letztendlich zu mehr Kundenzufriedenheit, Konversionen und Verkäufen.
Ob Sie Website-Besitzer, Entwickler oder Designer sind, die Kontrolle darüber zu haben, wie Ihre Website für verschiedene Benutzer aussieht, kann sehr nützlich sein.
Hier sind einige gängige Anwendungsfälle:
- Mitgliederbereiche: Sie können benutzerdefiniertes CSS verwenden, um Premium-Mitgliedern unterschiedliche Erlebnisse zu bieten.
- E-Commerce-Shops: Sie können Einkaufswagen, Rückgabe Kundenrabatte und andere Funktionen für angemeldete Kunden hervorheben.
- Blogs mit mehreren Autoren: Die Verwaltung eines Blogs mit mehreren Autoren kann unübersichtlich werden. Mit benutzerdefiniertem CSS können Sie eine saubere, effiziente Oberfläche für Redakteure erstellen und gleichzeitig die Dinge für Mitwirkende und Abonnenten einfach halten.
- Kunden-Websites: Sie können einen vereinfachten Admin-Bereich für Kunden erstellen, indem Sie bestimmte Elemente mit benutzerdefiniertem CSS ausblenden.
Nun stellt sich die Frage, wie man WordPress mitteilt, welcher CSS-Code für verschiedene Benutzerrollen geladen werden soll.
Anwenden von benutzerdefiniertem CSS für bestimmte Benutzerrollen in WordPress
Der einfachste Weg, benutzerdefinierten Code, einschließlich CSS, in WordPress zu verwalten, ist die Verwendung von WPCode. Es ist das beste Code-Snippet-Plugin für WordPress und ermöglicht Ihnen die sichere Verwaltung Ihres benutzerdefinierten CSS an einem Ort.
Hinweis: Eine kostenlose Version von WPCode ist ebenfalls verfügbar. Wir empfehlen jedoch ein Upgrade auf einen kostenpflichtigen Plan, um weitere Funktionen freizuschalten.
Warum wir WPCode empfehlen:
- Es ermöglicht Ihnen, jeden benutzerdefinierten Code, einschließlich CSS, sicher hinzuzufügen, ohne Ihre Website zu beschädigen. Wenn ein Code-Snippet nicht funktioniert, können Sie es einfach deaktivieren.
- Es wird mit leistungsstarken Code-Einfügungs- und Conditional Logic-Tools geliefert, mit denen Sie einen Snippet nur bei Bedarf ausführen können.
- Sie erhalten Zugriff auf eine riesige Codebibliothek mit nützlichen Snippets, sodass Sie nicht mehrere separate Plugins installieren müssen.
Lassen Sie uns nun benutzerdefiniertes CSS hinzufügen und es für bestimmte Benutzerrollen anwenden.
Hinzufügen von benutzerdefiniertem CSS in WPCode
Zuerst müssen Sie das WPCode Plugin installieren und aktivieren. Weitere Details finden Sie in unserem Tutorial zur Installation eines WordPress-Plugins.
Gehen Sie nach der Aktivierung zur Seite Code-Ausschnitte » + Ausschnitt hinzufügen. Dort sehen Sie viele nützliche Ausschnitte für verschiedene Aufgaben.
Da Sie jedoch einen benutzerdefinierten CSS-Code hinzufügen, müssen Sie von Grund auf neu beginnen, indem Sie unter dem Feld „Fügen Sie Ihren benutzerdefinierten Code hinzu (neuer Ausschnitt)“ auf „+ Benutzerdefinierten Ausschnitt hinzufügen“ klicken.
Dann müssen Sie 'CSS-Snippet' als Code-Typ aus der Liste der Optionen auswählen, die auf dem Bildschirm angezeigt werden.
Dies bringt Sie zum Code-Editor.
Zuerst müssen Sie einen Titel für Ihr Snippet eingeben, der alles sein kann, um Ihnen zu helfen, sich daran zu erinnern, wofür der Code bestimmt ist.
Jetzt können Sie Ihren benutzerdefinierten CSS-Code in das Feld „Code-Vorschau“ einfügen.
Für dieses Tutorial verwenden wir diesen Code, der das Menü 'Beiträge' im Admin-Bereich hervorhebt, indem er seine Hintergrundfarbe ändert. Sie können hier Ihren eigenen CSS-Code verwenden:
li#menu-posts {
background-color: #bf0505;
}
Bedingungslogik für Benutzerrollen auswählen
Scrollen Sie als Nächstes zum Feld 'Smart Conditional Logic' und schalten Sie den Schalter neben der Option 'Enable Logic' um.
Wählen Sie danach die „Bedingung“ (Anzeigen oder Ausblenden) und klicken Sie dann auf „Neue Gruppe hinzufügen“.
Klicken Sie auf das erste Feld in der Regel, um es zu erweitern. Sie sehen eine Liste von Regeln zur Auswahl.
Sie können beispielsweise den Anmeldestatus, die Benutzerrolle, den Gerätetyp usw. auswählen.
Wählen Sie „Benutzerrolle“, da Sie diesen benutzerdefinierten CSS-Code für eine bestimmte Benutzerrolle hinzufügen möchten.
Danach können Sie auswählen, auf welche Benutzerrolle Sie sie anwenden möchten.
Hinweis: Sie können mehrere bedingte Logikregeln hinzufügen, indem Sie auf die Schaltfläche „+ Neue Gruppe hinzufügen“ klicken.
Wenn Sie fertig sind, klicken Sie oben rechts auf dem Bildschirm auf „Snippet speichern“ und schalten Sie es dann auf „Aktiv“.
WPCode zeigt nun Ihr benutzerdefiniertes CSS für bestimmte Benutzerrollen in WordPress an.
Benutzerdefiniertes CSS für bestimmte Benutzerrollen im WordPress-Adminbereich hinzufügen
Wenn Sie Ihr benutzerdefiniertes CSS nur im WordPress-Adminbereich hinzufügen möchten, macht WPCode dies noch einfacher.
Scrollen Sie auf dem Code-Bearbeitungsbildschirm nach unten zur Option „Speicherort“. Klicken Sie auf das Dropdown-Menü, um es zu erweitern. Sie sehen dann eine Reihe von Speicherorten, an denen Sie das CSS automatisch laden können.
Wählen Sie nun einfach die Option „Admin-Header“ oder „Admin-Footer“, um Ihren CSS-Code im WordPress-Adminbereich zu laden.
Benutzerdefiniertes CSS für bestimmte Benutzerrollen in anderen Bereichen hinzufügen
Personalisierung des Designs auf E-Commerce-Websites führt zu einer verbesserten Benutzererfahrung und hat sich nachweislich verringerte Warenkorbabbrüche.
Wenn Sie einen WooCommerce-Shop betreiben, Online-Kurse verkaufen oder andere digitale Produkte verkaufen, ist das Hinzufügen von benutzerdefiniertem CSS für angemeldete Kunden nützlich.
WPCode ermöglicht es Ihnen zu wählen, wo Sie benutzerdefinierten Code zu einer E-Commerce-Website hinzufügen möchten. Wechseln Sie unter den Standort-Einstellungen zum Tab „E-Commerce“.
Sie sehen mehrere Stellen, an denen Sie Ihr benutzerdefiniertes CSS hinzufügen können, z. B. vor dem Warenkorb, vor dem Checkout-Formular, auf Produktseiten und mehr.
WPCode unterstützt WooCommerce, Easy Digital Downloads und MemberPress.
Häufig gestellte Fragen
Hier sind Antworten auf die am häufigsten gestellten Fragen zur Anpassung von WordPress für verschiedene Benutzerrollen.
Kann ich benutzerdefiniertes CSS für benutzerdefinierte Benutzerrollen in WordPress anwenden?
Ja, WPCode ermöglicht es Ihnen, jede Benutzerrolle anzusprechen, einschließlich benutzerdefinierter Rollen, die von Mitgliedschafts-Plugins, LMS-Tools oder benutzerdefiniertem Code erstellt wurden. Sie müssen nur sicherstellen, dass die benutzerdefinierte Rolle in den Optionen für die bedingte Logik angezeigt wird.
Was passiert, wenn die CSS-Änderungen für einige Benutzer nicht angezeigt werden?
Dies kann passieren, wenn Ihre Website aggressives Caching oder ein CDN verwendet. Versuchen Sie, Ihren Cache zu löschen, und stellen Sie sicher, dass der Ausschnitt von WPCode aktiv ist und auf den richtigen Speicherort und die richtige Rolle abzielt.
Kann ich die CSS-Änderungen in der Vorschau anzeigen, bevor ich sie live schalte?
WPCode hat keine visuelle Vorschau, aber Sie können den Snippet inaktiv lassen, während Sie ihn in den Entwicklertools Ihres Browsers testen. Sobald Sie mit dem Aussehen zufrieden sind, fügen Sie ihn in WPCode ein und aktivieren ihn.
Ist es sicher, WPCode anstelle der Bearbeitung von Theme-Dateien zu verwenden?
Absolut. Bei WPBeginner verwenden wir WPCode, da es unseren gesamten benutzerdefinierten Code von den Theme-Dateien trennt, sodass Änderungen bei Updates nicht verloren gehen. Außerdem ist es sicherer und einfacher, Snippets an einem Ort zu verwalten.
Bonustipps
Die folgenden zusätzlichen Ressourcen helfen Ihnen bei der Gestaltung benutzerdefinierter Benutzererlebnisse in WordPress. Für einige dieser Optionen müssen Sie nicht einmal CSS lernen:
- So zeigen Sie personalisierte Inhalte für verschiedene Benutzer in WordPress an
- So passen Sie Farben auf Ihrer WordPress-Website an
- So passen Sie Ihre WordPress-Formulare an und gestalten sie (2 einfache Methoden)
- So erstellen Sie eine benutzerdefinierte Startseite in WordPress (3 Methoden)
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie CSS für bestimmte Benutzerrollen in WordPress anwenden. Möglicherweise möchten Sie auch unser Standard-CSS-Cheat-Sheet für Anfänger von WordPress für Anfänger ansehen oder diese Plugins und Tipps zur Verbesserung des WordPress-Adminbereichs überprüfen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Haben Sie eine Frage oder einen Vorschlag? Hinterlassen Sie bitte einen Kommentar, um die Diskussion zu beginnen.