So wenden Sie CSS für bestimmte Benutzerrollen in WordPress an (einfache Methode)

Wir haben an vielen WordPress-Websites gearbeitet, bei denen verschiedene Benutzer unterschiedliche Erfahrungen benötigten. Mitglieder benötigen möglicherweise übersichtlichere Layouts, Autoren profitieren möglicherweise von weniger Ablenkungen, und Kunden sollten oft nicht dieselben Elemente wie Administratoren sehen.

Die Herausforderung besteht darin, dass WordPress keine integrierte Möglichkeit bietet, Ihre Website basierend auf Benutzerrollen zu gestalten. Wenn Sie Elemente ausblenden, Layouts anpassen oder Designs für bestimmte Benutzer ändern möchten, müssen Sie normalerweise Theme-Dateien bearbeiten oder benutzerdefinierten Code hinzufügen.

Hier wird es riskant. Wir haben Benutzer gesehen, die versehentlich ihre Website beschädigt haben, nur weil sie einen kleinen CSS-Schnipsel an der falschen Stelle eingefügt haben, insbesondere wenn sie in Theme-Dateien oder Child-Themes gearbeitet haben.

Der sicherste und einfachste Weg, CSS basierend auf Benutzerrollen anzuwenden, ist die Verwendung des WPCode-Plugins. Seine integrierte bedingte Logik ermöglicht es Ihnen, Rollen wie Administratoren, Redakteure oder Abonnenten anzusprechen, ohne Ihre Theme-Dateien zu berühren.

In diesem Leitfaden zeigen wir Ihnen, wie Sie benutzerdefiniertes CSS für bestimmte Benutzerrollen mit einem anfängerfreundlichen Tool anwenden. Dies ist derselbe Ansatz, den wir auf unseren eigenen Websites verwenden, wenn wir eine schnelle, sichere Lösung benötigen, die später keine Probleme verursacht.

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

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 durchführen, haben wir festgestellt, dass Personalisierung die Benutzererfahrung erheblich verbessert. Forschungsergebnisse deuten darauf hin, dass personalisierte Web-Erlebnisse die Konversionsraten um bis zu 10-15 % steigern können, was rollenbasiertes Styling zu einer wertvollen Strategie macht.

Eine bessere Benutzererfahrung führt letztendlich zu mehr Kundenzufriedenheit 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. Dies ist besonders nützlich, um die Client-Oberfläche zu vereinfachen, indem komplexe Dashboard-Widgets oder Plugin-Hinweise ausgeblendet werden, die technisch nicht versierte Benutzer verwirren könnten.

Nun stellt sich die Frage, wie man WordPress mitteilt, welcher CSS-Code für verschiedene Benutzerrollen geladen werden soll.

So wenden Sie benutzerdefiniertes CSS für bestimmte Benutzerrollen in WordPress an

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, auf einen kostenpflichtigen Plan aufzurüsten, 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.

Nun wollen wir uns ansehen, wie Sie benutzerdefiniertes CSS für eine bestimmte Benutzerrolle hinzufügen.

Hinzufügen eines benutzerdefinierten CSS-Schnipsels in WPCode

In diesem Beispiel passen wir das WordPress Admin-Dashboard für eine bestimmte Rolle (z. B. einen Redakteur) an. Wir verwenden Code, der das Menü 'Beiträge' im Backend hervorhebt, um Ihnen zu zeigen, wie der Prozess funktioniert.

1. Installieren und aktivieren Sie zuerst das WPCode-Plugin. Weitere Details finden Sie in unserem Tutorial zur Installation eines WordPress-Plugins.
2. Nach der Aktivierung gehen Sie zur Seite Code-Snippets » + Snippet hinzufügen.
3. Bewegen Sie den Mauszeiger über „Benutzerdefinierten Code hinzufügen (neuer Ausschnitt)“ und klicken Sie auf „+ Benutzerdefinierten Ausschnitt hinzufügen“.

4. Wählen Sie auf dem nächsten Bildschirm im Dropdown-Menü auf der rechten Seite „CSS-Ausschnitt“ als Code-Typ aus (standardmäßig ist es normalerweise „HTML-Ausschnitt“).

5. Geben Sie einen Titel für Ihren Ausschnitt ein, z. B. „Admin-Menü-Hervorhebung für Redakteure“.
6. Fügen Sie Ihr benutzerdefiniertes CSS in das Feld „Code-Vorschau“ ein.

Hier ist der Beispielcode, den wir für dieses Admin-Bereichsbeispiel verwenden:

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

Wichtig: Auswahl des richtigen Speicherorts

Da dieser spezielle Code für das Admin-Dashboard bestimmt ist, müssen Sie nach unten zum Abschnitt „Einfügen“ scrollen und als Speicherort „Admin-Header“ auswählen.

Wenn Sie CSS für das Frontend Ihrer Website hinzufügen würden (z. B. für eine Mitgliederseite), würden Sie den Speicherort einfach als „Site-Wide-Header“ belassen.

Bedingte Logik anwenden

Stellen Sie nun sicher, dass dieser Code nur für die gewünschte Benutzerrolle ausgeführt wird.

7. Scrollen Sie nach unten zum Feld „Intelligente bedingte Logik“ und schalten Sie den Schalter auf „Logik aktivieren“.
8. Setzen Sie die „Bedingung“ auf „Anzeigen“ und klicken Sie auf „+ Neue Gruppe hinzufügen“.

9. Wählen Sie „Benutzerrolle“ aus der Dropdown-Liste.

10. Wählen Sie die spezifische Rolle aus, die Sie ansprechen möchten (z. B. Redakteur, Abonnent).

11. Klicken Sie abschließend oben rechts auf „Snippet speichern“ und schalten Sie den Schalter von „Inaktiv“ auf „Aktiv“.

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, diese spezifischen Seiten einfach anzusprechen. Während Sie möglicherweise Standortoptionen wie „WooCommerce“ sehen, empfehlen wir, den Einfügeort für alle CSS als Website-weiter Header beizubehalten, um Anzeigeprobleme zu vermeiden.

Anstatt den Speicherort zu ändern, verwenden Sie den Abschnitt Intelligente bedingte Logik. Sie können Regeln hinzufügen, um die CSS nur anzuzeigen, wenn der „Seitentyp“ „WooCommerce-Warenkorb“ oder „Kasse“ ist.

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 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 bietet keine visuelle Vorschau, aber Sie können den Snippet inaktiv lassen, während Sie testen. Wir empfehlen, ein Inkognito- oder privates Fenster zu öffnen und sich mit der spezifischen Benutzerrolle (z. B. als Abonnent) anzumelden, um die Änderungen mit den Entwicklertools Ihres Browsers zu überprüfen.

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.

Zusätzliche Ressourcen

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.