External Links mit Dashicon

Des guten Tons wegen kann man externe Links mit einem sogenannt Dashicon kennzeichnen. Daher sind hier ein paar Informationen, wie man das arrangieren kann.

Dashicon

Für Freunde minimalistischer Codes, s. fastwp.de – erfüllt einfach den Zweck von Dashicons für externe Links.

Bspw. nach David K.

a[target="_blank"]:after{content:"";background:url("data:image/png;base64,R0lGODdhCgAKAIAAAGhoaP///ywAAAAACgAKAAACFIwPCcfq5hZKgUJbZ2OwcyltVWQVADs=") no-repeat scroll 100% 40%;margin-right:5px;padding-right:15px}

S. auch External Links Dashicons im Artikel Externer Link mit Icon; Base64

Das Dashicon nicht anzeigen

Im Kontext nach FastWP.

Gravatar Widget

In Verwendung eines „Autor Plug-in“ (s. Gravatar Widget) ist des Gravatar-Hovers das Dashikon mit angezeigt und inkorrekte Darstellung des Hovers.

CSS

/*Dashicon external Links unter Ausschluss gravatar.com*/
a[target="_blank"]:not([href*="gravatar.com"]):after {
 content: "";
 background: url("data:image/png;base64,R0lGODdhCgAKAIAAAGhoaP///ywAAAAACgAKAAACFIwPCcfq5hZKgUJbZ2OwcyltVWQVADs=") no-repeat scroll 100% 40%;
 margin-right: 5px;
 padding-right: 15px;
}

… also durch :not([href*="gravatar.com"]) ist der Linkadresse die Darstellung von Dashicon nicht wiedergegeben wie die normale Visualisierung des Hovers gegeben ist.

Sozial Media Button

Die 'Sozial Media Button' deren ausgehende Links. Hiermit würde der Pfeil in den Buttons störend wirken. Somit sind wie oben auch diesen Links der Pfeil auszuschließen.

CSS

/* --- LINKS Auszeichnung --- */
a[target="_blank"]:not([href*="gravatar.com"]):not([href*="helpful-plugin.info"]):not([href*="sovrn.com"]):not([href*="www.facebook.com"]):not([href*="twitter.com"]):not([href*="vk.com"]):not([href*="www.pinterest.com"]):not([href*="www.linkedin.com"]):not([href*="mewe.com"]):not([href*="ct.de"]):not([href*="wegerl.at"])::before {
content: "";
/*position:relative;*/
background: url("https://wegerl.at/wp-content/uploads/2019/06/Pfeil-Capa_1.svg") no-repeat left center;
padding: 4px 6px 5px 8px;
background-size: 12px;
}

Link intern in neuem Browser-Tab ohne Dashicon

Möchte man mal internen Link in neuem Browser-Tab öffnen und das Dashicon nicht anzeigen, so kann man, statt target="_blank"  bspw. den Code  target="_nt" verwenden. Wobei die verwendeten Buchstaben keine Rolle spielen, solange es nicht 'blank' heißt. Das wende ich hier auch gern an, von wegen der Bilder mit exteren Link ohne den Pfeil.

HTML

<a href="https://wegerl.at/wp-external-links/" target="_nt">Link intern in neuem Browser-Tab ohne Dashicon</a>

Link intern: in neuem Browser-Tab ohne Dashicon

Obiges mit dem target="_nt" ist aber nicht W3C® konform.

alluregraphicdesign_frosch



Das Plug-in „External Links“

… ist hier nicht in Gebrauch. 

Es wird gern empfohlen, die Kennzeichnung der Links innerhalb Website und Weiterführende zu unterscheiden.

Plug-ins Easy External Links (ohne Anzeige durch Image/Dashikon interner Links) wäre ebenso geeignet. Auswahl von Images, allerdings mit fest eingestellten öffnen des Links, in gleichem oder neuem Fenster. – Plug-in External Link wiederum ohne Auswahl von Images der externen Links, aber Einstellung unterschiedlichen öffnen von selbigen oder neuem Fenster möglich.

Mit Plug-in WP External Links lassen sich automatisch interne und externe Links unterscheiden.

Einstellungen:

Neben anderen, speziellen Einstellungen:

External Links

Anfangs, Settings for external links: „Apply these settings“, angehakt und hiermit erfolgt die Möglichkeit weiterer Einstellung:

  • Choose icon type: „Image“ *, ausgewählt (mehrerer Dessins)
  • Icon position: „Right side of the link“
  • Skip icon with <img>: „No icon for links already containing an <img>-tag“, angehakt, also kein Symbol für Links mit <img> -Tags.

Internal Links

… nicht aktiviert, weil kein zuwege bringen vom Ausschluss der Dashicons im Inhaltsverzeichnis von Plug-in Table of Contents Plus.

W. o., Settings for internal links: „Apply these settings“, angehakt …

  • Choose icon type: „Dashicon“ *, ausgewählt (wobei es vielerlei Dessins gibt).
  • Icon position: „Right side of the link“
  • Skip icon with <img>: „No icon for links already containing an <img>-tag“, angehakt, hiermit erscheint bei den Bildern kein überflüssiges Icon.

Der Unterschied zu Image und Dashicon: Image ist vorgegebenes Design und Dashicon fügt sich farblich an die Linkfarbe.

Exeptions

Exeptions (Ausnahmen), das Häkchen bei „Alle Inhalte (die ganze Seite)“, also bei „All contents (the whole page)“, entfernt. Hiermit erscheint weitere Einstellung:

  • Apply settings on: „Post content“ und „Comments“ angehackt, also Symbol für Links in Beiträge/Seiten und in Kommentare.
  • Eigene Einstellungen für ausgeschlossen Links, Own settings for excluded links: a) Treat excluded links as internal links, also ausgeschlossene Links als interne Links behandeln. Das Zweite wäre b) Eigene Einstellungen für ausgeschlossen Links (extra tab), Own settings for excluded links (extra tab), wobei ein extra Tab für dessen Einstellung folgte. Eins von den beiden muss konfiguriert sein.
  • Angehakt, „Ignore all links in <script> blocks“ und „Ignore all mailto links“.
Bemerkung

Augenfällig war sogleich, die Ankerziele innert Website sind durch das Plug-in WP External Links mit Image/Dashicon, wie interner Link angezeigt. Also hatte ich versuchsweise erst ein Ankerziel mit <a id=“ankername“>< /a> in ein <div id=“ankername“></div> oder (besser) in < span id=“ankername“ >< /span > (mit <span> erfolgt kein Zeilenumbruch) unbenannt und somit wurde das Ankerziel ohne Image/Dashicon angezeigt (auch im Editor nicht angezeigt) und funktionierte Websites – aber diese Version resettet und den richtigen Code in die Ankerziel-Links eingefügt:

data-wpel-link="ignore"

<a id="anker" class="position" data-wpel-link="ignore"></a>

OT Anmerkung zur class="position", s. Ankerziel.

Des anderen waren bei Suche/Suchergebnisse „weiterlesen → Hinweis “ die Icons doppelt angezeigt, aber dieses Missfallen sich zufällig mit dem Plugin Relevanssi – A Better Search von selbst gelöst hat (s. Hinweis).

Nachdem die Links mit Image und Dashicon deutlich erkennbar sind, kann man evtl. den Unterstrich entfernen, also im CSS Stylesheet Editor:

a:link {
 text-decoration: none;
}

Vergangene Anmerkung: In Verwendung des Plug-ins WP External Links wurden in Beiträge die Related Posts WP-Jetpack („Ähnliche Beiträge“) meist nicht angezeigt und ebenso keine Ausführung anderer CSS-Auszeichnungen. Aber der Fehler war andererseits, weil es bald ohne Probleme funktionell war. – nur so als bspw. …