So ändern Sie die Standardfarbe der Textauswahl in WordPress

Haben Sie bemerkt, wie Text aussieht, wenn Besucher ihn auf Ihrer Website hervorheben? Wir müssen manchmal die Textauswahlfarbe auf den Websites, an denen wir arbeiten, aktualisieren, um sie an die Markenfarben anzupassen, und viele Benutzer haben gefragt, wie das geht.

Die gute Nachricht ist, dass es einfacher ist, als Sie vielleicht denken, dieses oft übersehene Designelement anzupassen. Egal, ob Sie Ihre Markenfarben anpassen oder die Lesbarkeit verbessern möchten, die Änderung der Textauswahlfarbe kann die Benutzererfahrung Ihrer Website verbessern.

In dieser Anleitung zeigen wir Ihnen genau, wie Sie die Standardfarbe für die Textauswahl in WordPress ändern.

Warum die Standardfarbe der Textauswahl in WordPress ändern?

Die Textauswahlfarbe bezieht sich auf die Schriftfarbe in WordPress, die angezeigt wird, wenn Sie einen Textabschnitt innerhalb eines Inhalts hervorheben. So:

In einigen Fällen möchten Sie diese Farbe möglicherweise ändern, da sie nicht gut zu Ihrem WordPress-Website-Design passt. Farbschema spielt eine wichtige Rolle dabei, Ihre Website gut aussehen zu lassen und ein konsistentes Markenerlebnis zu gewährleisten.

Wenn Sie einen WordPress-Blog betreiben, möchten Sie vielleicht auch die Standardfarbe für die Textauswahl ändern, wenn Sie der Meinung sind, dass sie sich nicht genug vom Rest des Inhalts abhebt und schwer zu lesen ist.

Mit diesen Worten sehen wir uns an, wie Sie die Schriftfarbe für die Textauswahl in WordPress ändern können. Verwenden Sie einfach die untenstehenden Links, um zu der Methode zu springen, die Sie verwenden möchten:

• Methode 1: Ändern der Textauswahlfarbe mit Code (funktioniert mit allen Themes)
• Method 2: Using the WordPress Theme Settings (Varies by the Classic Theme)

Methode 1: Ändern der Textauswahlfarbe mit Code (funktioniert mit allen Themes)

Einige WordPress-Themes bieten eine integrierte Funktion zum Ändern der Textauswahlfarbe, aber nicht alle. Deshalb empfehlen wir die Verwendung von benutzerdefiniertem CSS-Code, da diese Methode viel universeller ist.

Oft finden Sie CSS-Code-Schnipsel in WordPress-Tutorials mit Anweisungen, diese in die functions.php Datei Ihres Themes einzufügen.

Das größte Problem ist, dass selbst ein winziger Fehler im Code-Snippet Ihre WordPress-Website komplett lahmlegen kann. Ganz zu schweigen davon, dass Sie Ihren gesamten benutzerdefinierten Code verlieren, wenn Sie das WordPress-Theme aktualisieren.

Hier kommt WPCode ins Spiel. Dieses Plugin für Code-Snippets erleichtert das Hinzufügen von benutzerdefiniertem Code zu WordPress, ohne Fehler zu verursachen oder Ihre Website unzugänglich zu machen.

Das Erste, was Sie tun müssen, ist, das kostenlose WPCode Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Nach der Aktivierung gehen Sie zu Code Snippets » Snippet hinzufügen in Ihrem WordPress-Admin-Dashboard.

Hier fahren Sie einfach mit der Maus über „Benutzerdefinierten Code hinzufügen (Neues Snippet)“.

Wenn es erscheint, klicken Sie auf die Schaltfläche „+ Benutzerdefinierten Ausschnitt hinzufügen“.

Wählen Sie dann einen Codedatentyp aus der Liste der angezeigten Optionen aus.

Wählen Sie für dieses Tutorial „CSS-Snippet“.

Geben Sie auf der nächsten Seite einen Titel für den benutzerdefinierten Code-Snippet ein.

Dies kann alles sein, was Ihnen hilft, den Ausschnitt später im WordPress-Dashboard zu identifizieren, z. B. „Textauswahlfarbe ändern“.

Sie können dann das folgende CSS in das Feld „Code-Vorschau“ einfügen:

/* Customizing text selection for Firefox */
::-moz-selection {
    /* Background color when text is selected in Firefox */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in Firefox */
    color: #fff;
}

/* Customizing text selection for other browsers */
::selection {
    /* Background color when text is selected in other browsers */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in other browsers */
    color: #fff;
}

Beachten Sie, dass wir zwei Stile hinzugefügt haben. Der CSS-Selektor ::moz-selection funktioniert mit dem Firefox-Browser, und der CSS-Selektor ::selection funktioniert mit anderen beliebten Browsern wie Google Chrome, Safari, IE9+ und Opera.

Im obigen Beispiel ändert der # Hex-Code die Linkfarbe zu Grün. Sie müssen also background-color: #008000 in die Farbe ändern, die Sie für den hervorgehobenen Text verwenden möchten.

Wenn Sie sich nicht sicher sind, welchen Hex-Code Sie verwenden sollen, können Sie verschiedene Farben erkunden und deren Codes auf der HTML Color Codes Website erhalten.

Wenn Sie mit dem Aussehen Ihres Codes zufrieden sind, klicken Sie einfach auf den Schalter 'Inaktiv', um stattdessen 'Aktiv' anzuzeigen.

Klicken Sie dann auf „Snippet speichern“, um das CSS-Snippet live zu schalten.

Sie können Ihre Website jetzt besuchen, um die Änderungen in Aktion zu sehen.

So sah es auf unserer Demowebsite aus.

Methode 2: Verwendung der WordPress-Theme-Einstellungen (variiert je nach Classic-Theme)

Einige WordPress-Themes ermöglichen es Ihnen, die Einstellungen für Ihre Typografie und Schriftarten zu ändern, einschließlich der Farbe des ausgewählten Textes. Um zu prüfen, ob dies bei Ihrem Theme der Fall ist, müssen Sie zu Darstellung » Anpassen gehen.

Hinweis: Diese Methode ist für Block-Themes nicht anwendbar.

Suchen Sie hier nach Einstellungen mit der Bezeichnung 'Farben'.

Wenn Sie einen Tab namens „Allgemein“, „Global“ oder ähnlich sehen, enthält dieser oft die Farbeinstellungen des Themes.

Zum Beispiel, wenn Sie das Astra WordPress Theme verwenden, müssen Sie die Registerkarte „Global“ auswählen.

Klicken Sie danach auf „Farben“, um alle verschiedenen Farben anzuzeigen, aus denen dieses WordPress-Theme besteht.

Als Nächstes müssen Sie auf „Akzent“ klicken.

Dies öffnet eine Farbauswahl, mit der Sie eine neue Textauswahlfarbe auswählen können.

Sie können nun beobachten, wie sich die Schriftfarbe ändert, da die Live-Vorschau automatisch aktualisiert wird. Sie können also verschiedene Einstellungen ausprobieren, um zu sehen, was für Ihre WordPress-Website am besten aussieht.

Wenn Sie mit Ihren Änderungen zufrieden sind, klicken Sie einfach auf „Veröffentlichen“, um sie live zu schalten.

Danach sehen Sie die neue Textauswahlfarbe live auf Ihrem WordPress-Blog oder Ihrer Website.

Selbst wenn Sie keine Farbeinstellungen im WordPress Theme Customizer sehen, lohnt es sich dennoch, die Dokumentation Ihres Themes zu prüfen, ob es eine Möglichkeit gibt, die Standardfarbe für die Textauswahl zu ändern.

Sie können sich sogar an den Entwickler des Themes wenden, um Hilfe zu erhalten. Weitere Informationen finden Sie in unserem Leitfaden unter wie man richtig nach WordPress-Support fragt und ihn erhält.

Entdecken Sie weitere WordPress-Typografie-Tipps und -Tricks

Möchten Sie die Schriftarten auf Ihrer WordPress-Website anpassen, wissen aber nicht wie? Hier sind einige Anleitungen, die Ihnen den Einstieg erleichtern:

• Die besten WordPress-Typografie-Plugins zur Verbesserung Ihres Designs
• Schriftgröße in WordPress einfach ändern
• Was ist eine Web-Safe-Schriftart + Die besten Web-Safe-Schriftarten (Anfängerleitfaden)
• So fügen Sie ganz einfach Icon-Fonts in Ihr WordPress-Theme ein
• Wie man Drop Caps in WordPress-Beiträgen hinzufügt

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie Sie die Standardfarbe für die Textauswahl in WordPress ändern. Möglicherweise möchten Sie auch unseren Leitfaden zu den besten Drag-and-Drop-Seitenerstellern für WordPress und wie Sie Schriftarten online mit WordPress verkaufen sehen.

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.