So ändern Sie die Linkfarbe in WordPress (Anfängerleitfaden)

„Wie ändere ich die Linkfarbe in WordPress?“ Das ist eine Frage, die wir regelmäßig von unseren WPBeginner-Lesern hören.

Auch wenn es wie ein kleines Detail erscheinen mag, spielen Linkfarben eine wichtige Rolle für die Benutzerfreundlichkeit und die Konversionsraten Ihrer Website. Deshalb verwenden wir bei WPBeginner die Farbe Orange für Links.

Die gute Nachricht ist, dass das Ändern von Linkfarben in WordPress viel einfacher geworden ist als früher. Sie müssen kein CSS-Experte sein oder einen Entwickler beauftragen – es gibt jetzt einfache Lösungen, die jeder nutzen kann, unabhängig von seinen technischen Fähigkeiten.

In dieser Anleitung führen wir Sie durch die genauen Schritte, um Ihre Linkfarben in WordPress zu ändern.

Warum die Linkfarbe in WordPress ändern?

Die Hauptgründe für die Änderung von Link-Farben in WordPress sind die Anpassung an Ihre Markenidentität und die Verbesserung der Lesbarkeit Ihrer Inhalte. Durch die Anpassung dieser Farben lenken Sie die Aufmerksamkeit Ihrer Besucher auf die wichtigsten Teile Ihrer Seite.

Hier sind einige spezifische Vorteile der Anpassung Ihrer Linkfarben:

• Bessere Barrierefreiheit: Ausreichender Farbkontrast erleichtert das Lesen und Erkennen von Links, insbesondere für Besucher mit Sehbehinderungen. Als allgemeine Regel empfehlen die WCAG-Richtlinien ein Kontrastverhältnis von mindestens 4,5:1 für Text normaler Größe. Bevor Sie eine neue Linkfarbe auswählen, können Sie diese mit dem WebAIM Contrast Checker testen, um sicherzustellen, dass sie gut lesbar bleibt.
• Markenkonsistenz: Sie können Ihre Links an Ihr Logo und Ihr gesamtes Farbschema anpassen, um ein professionelles Aussehen zu erzielen.
• Höhere Klickraten: Die Verwendung einer bestimmten Farbe für Links (wie z. B. Schaltflächen oder Handlungsaufforderungen) ermutigt Besucher zum Klicken und steigert die Konversionen.

Nichtsdestotrotz wollen wir uns ansehen, wie Sie die Linkfarbe auf Ihrer WordPress-Website ändern können. Verwenden Sie einfach die folgenden Links, um direkt zu der von Ihnen bevorzugten Methode zu gelangen:

So ändern Sie die Linkfarbe in klassischen WordPress-Themes

Einige klassische WordPress-Themes enthalten integrierte Einstellungen zum Ändern der Linkfarben. Um dies zu überprüfen, gehen Sie zu Design » Anpassen und suchen Sie nach einem Abschnitt namens Farben, Typografie oder etwas Ähnlichem.

Beliebte Themes wie Astra, GeneratePress und OceanWP enthalten oft Linkfarbsteuerungen in diesen Einstellungen.

Wenn Sie keine spezielle Option „Linkfarbe“ sehen, suchen Sie nach „Akzentfarbe“ oder „Primärfarbe“, da diese Einstellungen häufig die Linkfarben auf Ihrer gesamten Website steuern.

Zum Beispiel sind diese Optionen im Sydney-Theme unter dem Abschnitt „Farben“ zu finden.

Finden Sie als Nächstes eine Einstellung, die es Ihnen ermöglicht, Linkfarben zu ändern.

Sydney macht dies mit den Optionen „Linkfarbe“ für den Standard- und den Hover-Zustand einfach.

Die Link-Hover-Farbe ist diejenige, die erscheint, wenn ein Besucher mit der Maus über einen Link fährt. Sie ist also eine großartige Möglichkeit, seine Aufmerksamkeit zu erregen und Ihre Klickrate zu verbessern.

Sie können dann auf „Veröffentlichen“ klicken, um Ihre Änderungen zu speichern.

Beachten Sie, dass einige Themes keine direkten Einstellungen für die Linkfarbe haben. Stattdessen kann die Linkfarbe global mit den primären oder sekundären Farben Ihres Themes verknüpft sein.

Wenn Ihr Theme keine direkte Anpassung der Linkfarbe anbietet, machen Sie sich keine Sorgen! Sie können zur vierten Methode gehen, wo wir Ihnen zeigen, wie Sie Ihre Linkfarbe mit Code ändern können.

Linkfarbe in WordPress Block Themes ändern

Wenn Sie ein Block-Theme verwenden, müssen Sie den Full-Site-Editor verwenden, um Ihre Linkfarben anzupassen.

Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung » Editor.

Sie sehen alle Menüs zur Anpassung des Erscheinungsbilds Ihrer Website.

Klicken Sie hier auf „Stile“.

Sie sehen die Standardstile Ihres Themes angezeigt.

Suchen Sie nach dem Stift-Symbol „Bearbeiten“ und klicken Sie darauf, um mit der Anpassung zu beginnen.

Der Full-Site-Editor wird mit einer Seitenleiste zum Bearbeiten der Stile Ihres Themes geöffnet.

Klicken Sie in dieser Seitenleiste auf „Farben“, um auf die Optionen zur Farbanpassung zuzugreifen.

Finden Sie die Option „Link“ und klicken Sie darauf, um die Farbeinstellungen für Standard- und Hover-Zustände anzuzeigen. Sie sollten eine Farbe wählen, die zu Ihrem Website-Design passt.

Es ist jedoch auch wichtig, einen hohen Kontrast zwischen dem Hintergrund und der Linkfarbe sicherzustellen. Gemäß den WCAG 2.1-Richtlinien sollten Textlinks ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund aufweisen.

Sie können Ihre Farbauswahl mit kostenlosen Tools wie dem WebAIM Contrast Checker testen, um sicherzustellen, dass Ihre Links für Besucher mit Sehbehinderungen lesbar sind. 

Wenn Sie mit Ihren Änderungen zufrieden sind, klicken Sie einfach auf „Speichern“, um sie auf Ihrer Website live zu schalten.

Einzelne Linkfarben im Block-Editor ändern

Manchmal möchten Sie vielleicht die Farbe einzelner Links ändern. Zum Beispiel möchten Sie vielleicht die Aufmerksamkeit des Besuchers auf den Call-to-Action auf einer Landingpage lenken.

Markieren Sie dazu einfach den spezifischen Link, den Sie anpassen möchten.

Klicken Sie dann auf das Pfeilsymbol in der Symbolleiste und wählen Sie im Dropdown-Menü 'Hervorheben'.

Klicken Sie anschließend auf die Registerkarte 'Text'. Sie können nun die Farbe für diesen spezifischen Link auswählen.

Wenn Sie dies getan haben, wählen Sie die gewünschte Farbe aus.

Um weitere Links anzupassen, wiederholen Sie einfach diese Schritte.

Wenn Sie mit dem Aussehen der Links zufrieden sind, klicken Sie auf „Speichern“, um Ihre Änderungen live zu schalten.

So ändern Sie die Linkfarbe in WordPress mit Code (alle Themes)

Wenn Ihr Theme nicht die Option bietet, Ihre Linkfarbe zu ändern, dann ist der einfachste Weg, benutzerdefiniertes CSS zu Ihrer WordPress-Site hinzuzufügen.

Oft finden Sie Code-Schnipsel in WordPress-Tutorials mit Anweisungen, diese zu Ihrer Theme-Datei functions.php hinzuzufügen.

Das größte Problem ist, dass selbst ein winziger Fehler im benutzerdefinierten Code-Snippet Ihre WordPress-Website zum Absturz bringen und unzugänglich machen kann. Außerdem verlieren Sie alle Ihre Anpassungen bei der nächsten Aktualisierung Ihres WordPress-Themes.

Hier kommt WPCode ins Spiel. Mit über 3 Millionen Installationen wurde es speziell für WordPress-Anfänger entwickelt, die benutzerdefinierten Code hinzufügen müssen, ohne Theme-Dateien zu berühren.

Dies eliminiert das Risiko, Ihre Website mit einem einzigen Tippfehler zu beschädigen oder Anpassungen bei Theme-Updates zu verlieren.

Nach gründlichen Tests sind wir zu dem Schluss gekommen, dass dies der sicherste und einfachste Weg ist, benutzerdefinierten Code zu Ihrer Website hinzuzufügen. Details finden Sie in unserem WPCode-Testbericht.

Das erste, was Sie tun müssen, ist die Installation und Aktivierung des kostenlosen WPCode-Plugins. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung zu Code Snippets » Add Snippet.

Bewegen Sie hier einfach die Maus über 'Benutzerdefinierten Code hinzufügen (Neues Snippet)'.

Klicken Sie dann auf die Schaltfläche „+ Benutzerdefiniertes Snippet hinzufügen“, wenn sie erscheint.

Als Nächstes müssen Sie „CSS-Snippet“ als Code-Typ aus der Liste der angezeigten Optionen auswählen.

Geben Sie danach einen Titel für den benutzerdefinierten Code-Snippet ein. Dies kann alles sein, was Ihnen hilft, das Snippet im WordPress-Dashboard zu identifizieren.

Sie können nun einen benutzerdefinierten CSS-Schnipsel in das Codefeld einfügen. Sehen wir uns einige der verschiedenen Schnipsel an, die Sie verwenden können.

Ändern Sie die Linkfarbe auf Ihrer gesamten WordPress-Website

Zunächst möchten Sie vielleicht die allgemeine Linkfarbe anpassen. Dies ist die Farbe, die Besucher sehen, bevor sie auf einen Link klicken.

Um die Linkfarbe auf Ihrer gesamten Website zu ändern, verwenden Sie diesen CSS-Snippet:

a {
     color: #FFA500;
}

Hinweis: Dieser CSS-Code ändert die Linkfarbe für Ihre gesamte Website. Dies schließt Navigationsmenüs, Schaltflächen und Fußzeilenlinks ein.

Im obigen Beispiel ändert der # Hex-Code die Linkfarbe in Orange, sodass Sie #FFA500 in die gewünschte Farbe ändern müssen.

Wenn Sie nicht sicher sind, welchen Hex-Code Sie verwenden sollen, können Sie verschiedene Farben erkunden und deren Codes auf der HTML Color Codes-Website abrufen. Alternativ können Sie ein kostenloses Online-Tool wie den Farbwähler von Google verwenden, um den perfekten Farbton zu finden.

Wenn Sie mit dem Aussehen Ihres Codes zufrieden sind, klicken Sie auf den Schalter 'Inaktiv', sodass stattdessen 'Aktiv' angezeigt wird. Klicken Sie abschließend auf 'Snippet speichern', um das CSS-Snippet live zu schalten.

Wenn Sie nun Ihre WordPress-Website besuchen, sehen Sie die neue Linkfarbe in Aktion.

Link-Hover-Farbe in WordPress ändern

Um die Link-Hover-Farbe zu ändern, fügen Sie einfach den folgenden Ausschnitt in den Editor von WPCode ein:

a:hover {
     color: #FF0000;
     text-decoration: underline;
}

Der obige Code ändert die Linkfarbe zu Rot und unterstreicht den Text, wenn Besucher mit der Maus darüber fahren. Wie zuvor können Sie den Hex-Code #FF0000 in jede gewünschte Farbe ändern.

Wenn Sie bereit sind, live zu gehen, können Sie den Code-Snippet veröffentlichen, indem Sie denselben Prozess wie oben beschrieben befolgen.

Linkfarbe nach Besuch in WordPress ändern

Als Nächstes möchten Sie vielleicht die Linkfarbe ändern, nachdem ein Benutzer auf den Link geklickt hat. Dies kann Besuchern helfen, sich in Ihrem WordPress-Blog zurechtzufinden, indem angezeigt wird, auf welche Links sie bereits geklickt haben.

Sie können den folgenden CSS-Code verwenden, um die Farbe von besuchten Links zu ändern:

a:visited {
     color: #0000FF;
}

Stellen Sie wie immer sicher, dass Sie den blauen #0000FFHex-Code durch die Farbe ersetzen, die Sie in Ihren Links verwenden möchten.

Wenn das erledigt ist, klicken Sie auf den Schalter „Inaktiv“, sodass er zu „Aktiv“ wechselt. Klicken Sie dann einfach auf „Snippet speichern“, um den Code auf Ihrer Website, Ihrem Blog oder Ihrem Online-Shop live zu schalten.

Linkfarben für bestimmte Seiten in WordPress ändern

Wenn Sie Linkfarben nur auf bestimmten Seiten (z. B. einer Landingpage oder einer Kontaktseite) ändern möchten, können Sie seiten-spezifische CSS-Selektoren verwenden.

Jede WordPress-Seite hat eine eindeutige Body-Klasse wie .page-id-123. Sie können Links auf dieser spezifischen Seite mit diesem CSS ansprechen:

.page-id-123 .entry-content a {
     color: #FF6600;
}

Ersetzen 123 durch Ihre tatsächliche Seiten-ID (Sie finden diese in der URL des Seiten-Editors).

Alternativ, wenn Sie WPCode Pro verwenden, können Sie die bedingte Logikfunktion nutzen, um CSS-Snippets nur auf bestimmten Seiten anzuwenden, ohne benutzerdefinierte Selektoren zu benötigen.

Was ist die beste Farbe für Links auf einer Website?

Die beste Linkfarbe hängt von Ihrer Marke und Ihrem Website-Design ab, aber es gibt bewährte Vorgehensweisen, denen Sie folgen können:

• Blau ist der Standard: Die meisten Benutzer erwarten, dass Links blau sind (#0000FF oder ähnliche Farbtöne), da dies die Standardkonvention im Web ist. Blaue Links sind sofort erkennbar.
• Hoher Kontrast ist unerlässlich: Ihre Linkfarbe sollte einen Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund aufweisen, um die Barrierefreiheit zu gewährleisten (WCAG AA-Konformität).
• Vermeiden Sie Rot und Grün: Diese Farben können für Benutzer mit Farbenblindheit (betrifft etwa 8 % der Männer und 0,5 % der Frauen) schwer zu unterscheiden sein.
• Verwenden Sie Unterstreichungen: Das Unterstreichen von Links (insbesondere beim Hovern) hilft Benutzern mit Sehbehinderungen und verbessert die allgemeine Benutzerfreundlichkeit.
• Passen Sie zu Ihrer Marke: Wenn Ihre Marke eine bestimmte Farbpalette verwendet, wählen Sie eine Linkfarbe, die passt und gleichzeitig einen ausreichenden Kontrast beibehält.

Bei WPBeginner verwenden wir Orange (#FFA500) für Links, da es zu unserer Marke passt und sich deutlich von unserem weißen Hintergrund abhebt.

Video-Tutorial

Wenn Sie keine schriftlichen Anleitungen mögen, können Sie sich stattdessen unser Video-Tutorial ansehen:

Häufig gestellte Fragen zum Ändern der Linkfarbe in WordPress

Hier sind einige häufig gestellte Fragen unserer Leser zum Ändern von Linkfarben auf ihrer Website:

Kann ich die Farbe eines Hyperlinks ändern?

Ja, die meisten WordPress-Themes erlauben es Ihnen, Hyperlinkfarben global über die Einstellungen für Erscheinungsbild oder den Website-Editor zu ändern. Sie können auch die Farbe einzelner Links direkt im Beitrageditor ändern, indem Sie den Link hervorheben und eine Farbe aus der Symbolleiste auswählen.

Wie passe ich einen Link in WordPress an?

Sie können einen Link anpassen, indem Sie ihn im Block-Editor auswählen und die Optionen der Symbolleiste verwenden. Dies ermöglicht es Ihnen, die Ziel-URL zu ändern, festzulegen, dass er in einem neuen Tab geöffnet wird, oder die Farb- und Stileinstellungen in der rechten Seitenleiste anzupassen.

Wie passe ich meinen URL-Link an?

Um den Text der URL selbst (den Slug) zu ändern, gehen Sie zu den „Post“-Einstellungen in der rechten Seitenleiste und suchen Sie nach dem Abschnitt „URL“. Wenn Sie ändern möchten, wie der Link visuell aussieht, z. B. Schriftart oder Farbe, verwenden Sie die „Stil“-Einstellungen im Block-Editor.

Weitere Informationen finden Sie in unserem Tutorial zum Ändern Ihrer WordPress-Site-URLs.

Wie ändert man Links in WordPress?

Klicken Sie einfach auf den vorhandenen Linktext im Inhaltseditor und wählen Sie die Schaltfläche „Bearbeiten“ (Bleistiftsymbol) in der schwebenden Symbolleiste. Von dort aus können Sie eine neue URL einfügen oder den Text ändern, der Ihren Besuchern angezeigt werden soll.

Wie kann ich meinen Seitenlink ändern?

Sie können einen Seitenlink ändern, indem Sie die Permalink-Slug in der Seiten-Einstellungen-Seitenleiste unter dem Abschnitt „URL“ bearbeiten. Wenn die Seite bereits veröffentlicht ist, empfehlen wir eine 301-Weiterleitung einzurichten, damit Besucher, die den alten Link verwenden, zur richtigen neuen Seite weitergeleitet werden.

Was ist die beste Farbe für Links auf einer Website?

Blau ist die erkennbarste Linkfarbe, aber die beste Wahl hängt von Ihrer Marke und Ihrem Design ab. Stellen Sie ein Kontrastverhältnis von 4,5:1 für Barrierefreiheit sicher, vermeiden Sie Rot/Grün für farbenblinde Benutzer und verwenden Sie Unterstreichungen beim Hovern zur besseren Lesbarkeit. Passen Sie Ihre Markenfarben an und behalten Sie gleichzeitig die Lesbarkeit bei.

Wie ändere ich das Link-Symbol in WordPress?

WordPress hat keine Standardeinstellung zum Hinzufügen oder Ändern von Link-Symbolen, daher müssen Sie normalerweise ein Plugin verwenden. Plugins wie External Links können automatisch Symbole zu ausgehenden Links hinzufügen, oder Sie können Symbole manuell mit FontAwesome und benutzerdefiniertem CSS hinzufügen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie die Linkfarbe in WordPress ändern. Möglicherweise möchten Sie auch unseren Leitfaden zum Ändern der Textfarbe in WordPress oder unseren ultimativen Leitfaden zu den effektivsten WordPress-Designelementen 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.