Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
Link
smilies.4-user.de

Externe und interne Link, mit, und auch ohne Dashicon! – fein

Bild von sweetlouise
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Um einen guten Stil beizubehalten, kann man sowohl externe Links als auch interne Links mit einem Dashicon kennzeichnen. Zudem lassen sich eventuelle Probleme, wie das Nicht-Anzeigen des Icons bei bestimmten Links, beheben. Hier sind einige Informationen, die dabei helfen, solche Anpassungen vorzunehmen.

Externe Links ein Dashicon

Für Freunde minimalistischer Codes – seinerzeit – erfüllt einfach den Zweck von Dashicons für externe Links.

Hinweis: hier auf Wegerl.at sind die externen
und internen Links der Spielart nach Dashicons.

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 Externer Link mit Icon; Base64

Das Dashicon oder das Icon nicht anzeigen

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

/*Dashicon der Ausschluss für 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.

Social Media Button

Hier u. a. der Social Media Button ausgehenden Links. Hiermit würde der Pfeil in den Buttons störend sein. Somit sind auch den Links der Pfeil auszuschließen.

/* --- LINKS Auszeichnung --- */
a[target="_blank"]: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"]):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;
}

Möchte man bspw. internen Link in neuem Browser-Tab öffnen und das Dashicon nicht anzeigen, so sind mit not([href*="wegerl.at"]): auch diese internen Links des Icons ausgeschlossen.

Link target="_blank" ohne Icon mit Class

Folgende Beispiele für externen Link ohne Icon. Das ist dann sehr praktikabel, wenn ein Bild mit externem Link verknüpft ist und dort das Icon nicht dabei sein soll.

Hierzu ist der obigen /* – LINKS Auszeichnung – */ eine Class hinzufügbar. Mit not(.no-icon): ist das okay.

Das einfache Beispiel,

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

Ob das Dashicon vor oder nach dem Link visuell ist durch before oder after festzulegen.

Dem Bild ist so mit Anklicken 'Bearbeiten' unter Bild-Details die 'CSS-Klasse des Links' einzugeben:

Bild-Details_class
Nebeninformation: Das mit dem 'Image Border' und 'Image Margins' geht aus dem Plug-in Advanced Image Styles hervor.

Infolge ist die Ansicht im Text-Editor:

<a class="no-icon" href="https://ditmars.bplaced.net" target="_blank" rel="noopener noreferrer"><img class="aligncenter wp-image-175642 size-full" title="DITMAR'S BPLACED.NET-WIKI Okey-dokey ❤ with ClassicPress" role="img" src="https://wegerl.at/wp-content/uploads/2020/01/alluregraphicdesign_frosch.svg" alt="alluregraphicdesign_frosch" width="29" height="24" /></a>

Beispiel visuell:

So, mit target="_blank" + class="no-icon"

alluregraphicdesign_frosch
… und so, alleinig mit target="_blank"

OpenClipart-Vectors_schnecke

Das folgende ist für den Link im Text-Verlauf ohne Icon, nur so zum Bspw.:

Externer Link ohne dem Icon <a class="no-icon" href="https://stackoverflow.com/questions/58777894/how-to-override-the-after-css-selector" target="_blank" rel="noopener">https://stackoverflow.com/questions/58777894/how-to-override-the-after-css-selector</a>

Zur Bemerkung, die falsche Auszeichnung: Anstatt target="_blank" bspw. ein target="bla" geht auch. – wobei dies ein beliebiges Wort sein kann, als dass es nicht _blank ist. Das ist aber falsch! – da bei nochmaligen Öffnen des Bildeditors das _blank neu zu setzen ist; und nach dem Abspeichern des Bild-Editors ist das wieder von _blank auf _bla zu editieren. Zumindest war das früher mal so. Und außerdem ist es nicht W3C® konform.

Interne Links mit Dashicon

Folgendes PHP ist für die funktions.php, das mit dem PHP hat sich hier so ergeben, weil das der herkömmlichen Art allein über CSS verschiedene Ungereimtheiten hervorgebracht hätte.

/* Interne Links mit Dashicon, siehe auch CSS Datei */
add_filter('the_content', 'mark_internal_links_with_icon');

function mark_internal_links_with_icon($content) {
    $current_domain = $_SERVER['HTTP_HOST'];

    $content = preg_replace_callback('/<a[^>]*href=["\']([^"\']*)["\'][^>]*>(.*?)<\/a>/i', function ($matches) use ($current_domain) {
        $link = $matches[1];
        if (strpos($link, $current_domain) !== false || strpos($link, '#') === 0) {
            return '<a href="' . $link . '" class="internal-link">' . $matches[2] . '</a>';
        } else {
            return $matches[0];
        }
    }, $content);

    return $content;
}

Dazu das CSS:

/* Interne Links mit Dashicon im Zusammenhang mit separaten PHP */
.internal-link:not([href*="/wp-content/uploads/"])::before {
    font: normal 1em/1 'dashicons';
    content: "\f103";
    vertical-align: -16%;
    font-size: 1em;
}

Dieser Fasson ist das hier mit Theme Twenty Fourteen konform, allen Link im Content inklusive 'weiterlesen →' Links der Blogseite und Kategorien.

Es könnte angemessen sein, im selben Dokument für interne Ankerlinks kein Icon anzuzeigen. Zum Beispiel würde das Inhaltsverzeichnis standardmäßig das Icon anzeigen. Daher sollte der folgende Code anstelle des vorherigen gespeichert werden:

/*  Interne Links mit Dashicon und ohne Icon für interne Ankerlinks im selben Dokument; siehe auch CSS Datei */
add_filter('the_content', 'mark_internal_links_with_icon');

function mark_internal_links_with_icon($content) {
    $current_domain = $_SERVER['HTTP_HOST'];
    $current_path = parse_url(get_permalink(), PHP_URL_PATH);

    $content = preg_replace_callback('/<a[^>]*href=["\']([^"\']*)["\'][^>]*>(.*?)<\/a>/i', function ($matches) use ($current_domain, $current_path) {
        $link = $matches[1];

        // Parse den Link und erhalte den Pfad
        $link_path = parse_url($link, PHP_URL_PATH);

        // Prüfe, ob der Link auf denselben Host verweist, aber nicht denselben Pfad wie die aktuelle Seite hat
        if ($link_path && $current_domain === parse_url($link, PHP_URL_HOST) && $current_path !== $link_path) {
            return '<a href="' . $link . '" class="internal-link">' . $matches[2] . '</a>';
        } else {
            return $matches[0]; // Kein Icon für interne Ankerlinks im selben Dokument
        }
    }, $content);

    return $content;
}

Das CSS bleibt dasselbe von oberhalb.

Hingegen von Suchergebnisse auf der Website sollte das separat ausgezeichnet sein, wobei diese Links allein mit CSS ansprechbar sind, also ohne PHP, wie es den anderen, internen Links bedingend war:

/* Dashicon Weiterlesen-Link in Suchergebnisse */
a.more-link {
    color: #1656b0;
    font-weight: 350;
    font-size: 100%;
}

a.more-link::before {
    font: normal 1em/1 "dashicons";
    content: "\f103";
    vertical-align: -5%;
    font-size: 0.85em;
    padding-right: -2px;
}

Plug-in z. B. "External Links"

Wenn’s sein mag! – anklickt,
das ist sehr informativ

Das Plug-in Easy External Links (ohne Anzeige durch Image/Dashicon 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.

Unter anderen Einstellungen, die Einstellung:

External Links: Anfangs, "Settings for external link": '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.

Interne 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 Linksfarbe.

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 ausgeschlossene 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 ausgeschlossene 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 innerhalb der 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 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. …


Aktualisiert im Jahr 2023-Juni