Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

Um einen guten Stil beizubehalten, kann man sowohl externe Links als auch interne Links mit einem Genericon 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 Genericon

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

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

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;
}

Siehe auch Externer Link mit Icon; Base64.

Das Genericon oder das Icon nicht anzeigen

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

/*Genericon 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 Genericons 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("../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 Genericon 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,

/* Icon 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 Icon 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:

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://../alluregraphicdesign_frosch.svg" alt="alluregraphicdesign_frosch" width="29" height="24" /></a>

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

… und so, alleinig mit target="_blank"

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>

• Externer Link ohne dem Icon https://stackoverflow.com/questions/58777894/how-to-override-the-after-css-selector

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 Genericon

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 Genericon, 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 Genericon im Zusammenhang mit separaten PHP */
.internal-link:not([href*="/wp-content/uploads/"])::before {
    font: normal 1em/1 'gernericons';
    content: "\f107";
    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 Genericon 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:

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

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

Tipp

Falls es bei einem Zeilenumbruch dazu kommt, dass das Icon allein in der vorherigen Zeile verbleibt, kann man dies verhindern mit:

style="white-space: nowrap;"

Beispiel: <a style="white-space: nowrap;" href="https://wordpress.org/plugins/boxzilla/" target="_blank" rel="noopener">Boxzilla</a>

Plug-in z. B. "External Links"

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

a:link {
 text-decoration: none;
}

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 April