Trick # 549 | Dieser Beitrag beinhaltet 462 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Externe Links in einem Blogbeitrag oder auf einer Website zu kennzeichnen, ist nicht nur eine Frage des Designs, sondern auch der Benutzerfreundlichkeit. Es hilft den Besuchern, schnell zu erkennen, dass sie die Website verlassen, wenn sie auf einen bestimmten Link klicken. Eine elegante Lösung dafür ist das Hinzufügen eines Icons zu externen Links.
Für das Icon verwenden wir Font Awesome mit seiner reichhaltigen Auswahl an passenden Symbolen. Wie Sie Font Awesome einbinden, erfahren Sie im Beitrag «Font-Awesome-Icons einbinden und verwenden».
Wenn der Font-Awesome-Font bereits eingebunden ist, benötiugen Sie den folgenden PHP-Code. Fügen Sie ihn in die Datei functions.php Ihrer WordPress-Installation – unter Design/Theme-Datei-Editor – ein:
function add_external_link_icon($content) {
// Überprüfen, ob im Inhalt Links vorhanden sind
if (is_singular() && !is_admin()) {
$dom = new DOMDocument();
libxml_use_internal_errors(true); // Fehler unterdrücken, um HTML5 zu unterstützen
$dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));
libxml_clear_errors();
$links = $dom->getElementsByTagName('a');
foreach ($links as $link) {
$href = $link->getAttribute('href');
// Prüfen, ob der Link extern ist
if (!empty($href) && strpos($href, home_url()) === false) {
$icon = $dom->createElement('i');
$icon->setAttribute('class', 'fas fa-external-link-alt');
$icon->setAttribute('style', 'margin-right: 5px;');
// Das Icon vor dem Linktext einfügen
$link->insertBefore($icon, $link->firstChild);
}
}
return $dom->saveHTML();
}
return $content;
}
add_filter('the_content', 'add_external_link_icon');Damit die Icons optisch ansprechend dargestellt werden, können Sie überdies mit etwas CSS nachhelfen. Fügen Sie dazu folgenden Code in das CSS-Stylesheet (unter Design/Customizer/Zusätzliches CSS) Ihres Themes ein:
a i.fa-external-link-alt {
color: inherit;
font-size: 0.8em;
vertical-align: middle;
}Schon sind die externen Links in Ihren Beiträgen mit dem Icon versehen.
Werbung
Werbung
