Möchtest du neben externen Links automatisch ein Symbol einblenden lassen auf deiner WordPress-Website? Gute Idee. Ich erkläre dir anhand zweier Beispiele, wie du das per Eingabe von wenigen Code-Zeilen und einem beliebigen Icon umsetzen kannst – mit dem Block-Editor oder Classic-Editor.
Diese Anleitung richtet sich an fortgeschrittene WordPress.org-Nutzer:innen mit Kenntnissen in CSS und HTML. Von Vorteil wäre auch, wenn du bereits Font Awesome lokal installiert hast.
Warum sollten an externe Links Symbole angefügt werden?
So wie ich an verschiedenen Stellen die Webhosting-Pakete von All-Inkl.com und andere nützliche Produkte empfehle, kannst auch du externe Links auf deiner WordPress-Website mit einem kleinen Symbol schmücken.
Im Gegensatz zu internen Links können Besucher:innen an geeigneten Symbolen, die direkt neben externen Links angebracht werden, erkennen, dass sie zu einer Internetseite geführt werden, die außerhalb deiner Website bzw. deines Blogs liegt.
Insbesondere bei Werbe-Links (auch „Affiliate-Textlinks“ genannt), wie ich sie neuerdings verwende, ist der Einsatz von Symbolen ratsam, da diese Links eine besondere Kennzeichnung erfordern und sich von anderen Links auf der Website unterscheiden sollten. Auf ROCK DEINEN PC kennzeichne ich ausschließlich Werbe-Links mit Symbolen.
Sternchen in Klammern (*) an Werbe-Links anzuhängen, wie es oftmals auf anderen Blogs praktiziert wird, halte ich für nicht zielführend. Solche Kennzeichnungen verbinde ich immer mit Verweisen zu klitzeklein verfassten, indirekten Preiserhöhungen und lösen ein Unbehagen in mir aus. Symbole sind meiner Meinung nach offensichtlicher und ehrlicher.
Welches Symbol du einsetzen möchtest, ist natürlich dir überlassen. Der Kreativität sind da keine Grenzen gesetzt. Hauptsache, du verwendest immer das gleiche Symbol für den gleichen Zweck, damit deine Leserinnen und Leser nicht durcheinanderkommen.
MERKE: Symbole, die direkt an den externen Link angebracht werden, helfen Besucher:innen deiner WordPress-Website, zwischen internen und externen (Werbe-) Links zu unterscheiden.
Woher kriegt man solche Symbole (Icons)?
Symbole dieser Art nennt man in Fachkreisen auch Icon. Icons kann man entweder mit einem speziellen Icon-Editor selber erstellen oder man sucht im Internet nach entsprechenden Anbietern (gebe einfach „Icon“ oder „Icon-Editor“ in die Suchmaschine ein).
Ich persönlich bevorzuge Free Icons von Font Awesome (lokal eingebunden). Die Icons sehen ansprechend und modern aus und stehen unter der Font Awesome Free License für private, Open Source- und kommerzielle Projekte kostenlos zur Verfügung – und davon reichlich: Derzeit werden über 2.000 Free Icons angeboten.
Die jeweils aktuelle Version „For The Web“ / „Free for Web“ findest du auf der Font Awesome-Download-Seite – inklusive Hinweislink zur englisch-sprachigen Anleitung, wie man Font Awesome händisch auf dem eigenen Webserver hostet.
Alternativ bietet Font Awesome ein eigenes Plugin für WordPress an, das sich vor allem an WordPress-Nutzer:innen richtet, die mit Gutenberg-Block-Funktionen arbeiten (wie du den ursprünglichen Classic-Editor wiederholst, siehe mein Artikel WordPress Gutenberg und Blöcke vollständig deaktivieren 😉 ). Ich persönlich komme ohne das Plugin aus.
Wie eingangs erwähnt, wäre es vorteilhaft, wenn du Font Awesome bereits lokal auf deiner Website eingebunden hast. Denn darauf stützen sich meine nachfolgenden Anleitungen.
Vorteil Automatisierung von Link-Symbolen
Mithilfe von CSS-Code lässt sich die Aufgabe automatisieren. Auf Deutsch: Damit du nicht hinter jedem einzelnen externen Link von Hand ein Symbol einfügen musst (womöglich auch noch im Text-Modus), besteht die Möglichkeit, durch Eingabe von Code-Zeilen die Symbole bzw. Icons „automatisch“ hinter jedem externen Link einzublenden.
Eingefügt an passender Stelle (zum Beispiel im Customizer, im Custom-CSS-Feld von Beiträgen oder Seiten, in den Einstellungen eines Plugins, Widgets etc.) sparst du dir ein weiteres Plugin, das deinen Webspace nur unnötig belastet.
Dritter Vorteil: Die von mir genannte Lösung funktioniert in allen Browsern.
Davon ausgehend, dass du dich im Umgang mit CSS und HTML in WordPress.org auskennst (ansonsten überlasse das besser Geübten) … hier kommen die Anleitungen:
Automatisch Icon neben Link mit Font Awesome umsetzen
Anhand zweier Beispiele, von mir praxiserprobt, erkläre ich Schritt für Schritt, wie du vorgehen kannst.
Beispiel 1 (Custom-Code in einem Plugin):
- Wähle auf der Webseite von Font Awesome ein Free Icon aus (in meinem Beispiel „cart-shopping“), das du an externe Links anhängen möchtest:
- Klicke auf das Symbol (Icon). Es öffnet sich ein Fenster mit zahlreichen Informationen.
- Notiere oder merke dir den Unicode (in meinem Beispiel: f07a), der fast unscheinbar ganz oben rechts in dem geöffneten Fenster eingeblendet wird (siehe nachfolgende Vorschau). Der Unicode ist einzigartig und gilt nur für dieses Symbol, oder anders gesagt: Jedes Icon von Font Awesome hat zur Unterscheidung einen anderen Unicode.
- Navigiere nun zu dem CSS-Eingabefeld in deiner WordPress-Website, wo du den Code für die automatische Ausgabe eines Link-Symbols an externe Links hinterlegen möchtest).
In meinem Beispiel rufe ich die Einstellungen (Settings) in einem Affiliatelink-Plugin auf und navigiere zum Eingabefeld Custom Code.
Wie du in obiger Vorschau erkennen kannst, habe ich in den Einstellungen des Plugins lediglich posts ausgewählt, damit das ausgewählte Symbol (Icon) ausschließlich an externe Links angehängt wird, die in Beiträgen vorkommen. Außerdem habe ich per Schieberegler die Ausgabe von Custom Code aktiviert, damit der Code im Eingabefeld auch funktioniert, sobald eingegeben. (Die Auswahl und Aktivierung kann je nach Plugin variieren). - Jetzt erstelle mit dem Plugin einen Textlink (zum Beispiel über einen dem Plugin zugeordneten Button) in irgendeinem Beitrag und speichere den Beitrag (am besten als Entwurf).
- Öffne den soeben gespeicherten Beitrag in der Beitragsvorschau.
- Tätige einen Rechtsklick auf den erstellten Textlink und klicke im Auswahlmenü mit der linken Maustaste auf Untersuchen, um die Browser-Konsole einzublenden.
In der Spalte Elemente wird nun automatisch der HTML-Code markiert angezeigt, der sich auf den Textlink bezieht. - Mache einen Rechtsklick auf den markierten HTML-Code und klicke im Auswahlmenü mit der linken Maustaste auf Kopieren und anschließend auf Element kopieren.
- Füge den kopierten HTML-Code in eine leere Textdatei auf deinem Computer oder in den Entwurfs-Beitrag ein und speichere die Datei oder den Beitrag.
In meinem Beispiel halte ich mich an den eingangs erwähnten Werbe-Link Webhosting-Pakete von All-Inkl.com (den du ruhig einmal aufrufen kannst 😉 – ich bin überzeugt von deren Angeboten und empfehle sie guten Gewissens jedem weiter, der einen zuverlässigen, sicheren Webhoster für sein neues WordPress-Projekt sucht).
In dem dazugehörigen HTML-Code findest du „class“-Angaben, die so aussehen können (beispielhaft – nicht übernehmen!):class="eafl-link eafl-link-text eafl-link-direct"Diese Angaben sind wichtig, um dem nachfolgenden CSS-Code die richtige Klasse (class) zuordnen zu können.
- Jetzt füge folgenden Code in das unter Punkt 4 genannte CSS-Eingabefeld deines Plugins ein.
(BEACHTE, dass du die „class“-Angaben in den eckigen Klammern und die „font“-Angaben in den geschweiften Klammern sowie den Unicode des Font Awesome-Symbols an die Vorgaben deines Plugins, deiner Schriftart/-größe auf deiner WordPress-Website und an das von dir gewählte Font Awesome-Symbol anpassen musst! Ich habe die entsprechenden Stellen braun markiert.)a[class="eafl-link eafl-link-text eafl-link-direct"]:after{font-family:fontawesome;font-size:18px;content:" \f07a"}
- Speichere deine Eingaben.
- Fertig!
Hast du alles richtig gemacht, erscheint hinter jedem externen Link, den du mit deinem Plugin über den entsprechenden Button in einen Beitrag eingefügt hast, automatisch das von dir ausgewählte Symbol (Icon).
Beispiel 2 (Custom-Code in einem Beitrag):
Arbeitest du mit dem Gutenberg-Block-Editor von WordPress, gehe wie folgt vor (eine Anleitung zum Classic-Editor findest du weiter unten):
- Führe die Schritte unter Punkt 1 bis 3 aus oben genanntem Beispiel 1 aus.
- Erstelle einen externen Link in einem (Entwurfs-) Beitrag und konfiguriere ihn so, dass sich der Link in einem neuen Fenster bzw. Tab öffnet (target=“_blank“).
- Navigiere zu dem CSS-Eingabefeld deines Beitrags, wo du den Code für die automatische Ausgabe eines Link-Symbols an externe Links hinterlegen möchtest.
In meinem Beispiel mache ich einen Mausklick irgendwo im Beitrag, navigiere zu „Block“ / „Settings“ und öffne das „Custom CSS“-Eingabefeld (Hinweis: Das Eingabefeld stand in meinem Fall erst zur Verfügung, nachdem ich das WordPress-Plugin Otter – Gutenberg Blocks – Page Builder for Gutenberg Editor & FSE installiert hatte).
- Nun füge nachfolgenden Code in das CSS-Eingabefeld deines Beitrags ein.
(BEACHTE, dass du die „font“-Angaben in den geschweiften Klammern sowie den Unicode des Font Awesome-Symbols entsprechend den Vorgaben deiner Schriftart/-größe auf deiner WordPress-Website und dem von dir gewählten Font Awesome-Symbol anpassen musst! Ich habe die entsprechenden Stellen braun unterlegt.)a[target="_blank"]:after{font-family:fontawesome;font-size:18px;content:" \f07a"} - Aktualisiere bzw. speichere den Beitrag.
- Fertig!
Arbeitest du mit dem Classic-Editor von WordPress, gehe wie folgt vor:
- Führe die Schritte unter Punkt 1 bis 3 aus oben genanntem Beispiel 1 aus.
- Erstelle einen externen Link in einem (Entwurfs-) Beitrag und konfiguriere ihn so, dass sich der Link in einem neuen Tab öffnet (target=“_blank“).
- Navigiere zu dem CSS-Eingabefeld deines Beitrags, wo du den Code für die automatische Ausgabe eines Link-Symbols an externe Links hinterlegen möchtest.
In meinem Beispiel aktiviere ich unter „Ansicht anpassen“ die Option „Page Options“ (da mein Theme diese Funktion unterstützt) und scrolle anschließend unter dem Beitrag zu dem Eingabefeld „Custom CSS“ („Custom CSS for this page only“). Das sieht in meinem Fall so aus:
- Nun füge – wie oben unter Punkt 4 zum Gutenberg-Block-Editor beschrieben (BEACHTE auch die dortigen Hinweise!) – nachfolgenden Code in das CSS-Eingabefeld deines Beitrags ein:
a[target="_blank"]:after{font-family:fontawesome;font-size:18px;content:" \f07a"} - Aktualisiere bzw. speichere den Beitrag.
- Fertig!
Hast du alles richtig gemacht, erscheint in dem von dir gewählten Beitrag hinter jedem externen Link, der sich in einem neuen Fenster öffnet, automatisch das von dir gewählte Symbol (Icon).
Hier noch eine letzte Beispielvorschau:
Das war’s für heute. Ich hoffe, ich konnte dir weiterhelfen. Selbstverständlich stellen die obigen Anleitungen nur Beispiele dar. Welche Icons von welchem Anbieter du nutzt, ist ganz dir überlassen; genau wie die Gestaltung deiner Links und an welcher Stelle der Custom Code zum Einsatz kommen soll.
Ich wünsche dir gutes Gelingen!