Schlagwort: Hyperlinks

Stabile und komfortable Links mit WordPress einfügen

Wer mit dem WYSIWYG-Editor von WordPress arbeitet, wird festgestellt haben, dass der Editor absolute Links einfügt. Selbst wenn man Links zur eigenen Webseite haben möchte, erstellt einem der WYSIWYG-Editor einen Eintrag in dieser Form:

<a href="https://www.bennyn.de/css3-animationen" title="CSS3 Animationen">CSS3 Animationen</a>

Zieht man mit seinem Blog nun auf eine andere Domain um oder möchte man seinen Blog auf dem localhost testen, dann funktionieren die Verlinkungen nicht mehr, da der absolute Pfad nicht stimmt. Ich habe mir deshalb eine Lösung in Form eines Shortcodes überlegt, die Folgendes im Editor ermöglicht:

[link]5255[/link]
 
führt zu:
 
<a href="https://www.bennyn.de/css3-animationen" title="CSS3 Animationen">CSS3 Animationen</a>
 
[link text="Mein Text"]5255[/link]
 
führt zu:
 
<a href="https://www.bennyn.de/css3-animationen" title="Mein Text">Mein Text</a>

Die Links werden dynamisch mit PHP erzeugt, so dass der Host immer dem gerade verwendeten Host entspricht. Ein Domain-Umzug ist somit kein Problem! Außerdem muss man keinen Text mehr für die Links eingeben, da automatisch der Text des Beitrags genommen wird. Alles was man wissen muss, ist die Post-ID (im Beispiel 5255).

Wie kann man den Shortcode [ link ] benutzen?

Um den Shortcode zu verwenden, muss man folgende PHP-Zeilen in der Datei functions.php seines WordPress-Themes einfügen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/*
 * [link]5255[/link]
 * [link text="My Link"]5255[/link]
 */
function displayLink($attributes, $postId) {
  $linkTarget = get_permalink($postId);
  $linkText = $attributes[text];
 
  if (!$linkText)
    $linkText = esc_attr(strip_tags(get_the_title($postId)));
 
  $format = '<a href="%s" title="%s">%s</a>';
  $link = sprintf($format, $linkTarget, $linkText, $linkText);
 
  return $link;
}
 
add_shortcode('link', 'displayLink');

Sollte die Datei functions.php nicht vorhanden sein, kann eine leere PHP-Datei mit diesem Namen erstellt werden, um den Code einfügen zu können.

Externe Links in neuem Tab öffnen

Für externe Links hat man früher gerne das Hyperlink-Attribut target auf _blank gestellt, um zu erreichen, dass diese Links in einem neuen Fenster oder Tab geöffnet werden. Mit dem „XHTML 1.0 Strict“-Standard wurde das Attribut target jedoch begraben, weshalb der W3C Markup Validation Service nur ein there is no attribute "target" anzeigt, sofern dieses Attribut verwendet wird. Begründet wurde dieser Entschluss damit, dass man dem Webseiten-Besucher selber die Entscheidung überlassen möchte, ob er den Link in einem neuen Fenster öffnen möchte oder nicht.

Möchte man trotzdem externe Links in einem neuen Tab öffnen lassen und dabei die W3C Validierung bestehen, so hilft ein Umweg über JavaScript, welcher alle externen Links findet und mit dem Wert target="_blank" auszeichnet:

var links = document.getElementsByTagName('a');
if(links.length > 0){
  for(var i = 0; (link = links[i]); i++){
    if(link.href.indexOf(document.domain) == -1){
      link.setAttribute('target', '_blank');
    }
  }
}

Möchte man die Links von dynamisch generierten Inhalten ebenfalls auf target="_blank" setzen, so hilft folgender PHP-Trick:

$text = str_replace('<a', '<a target="_blank"', $text);

Im aktuellen HTML5-Entwurf wurde das target-Attribut übrigens wieder aufgenommen.

Relative WordPress Links

Interne Links der eigenen Seite können sich häufig ändern, zum Beispiel wenn man die Domain wechselt oder die Permalink-Struktur von WordPress ändert. Besonders ärgerlich ist das, wenn man in den eigenen Artikeln auf andere Beiträge verlinkt und dann die alten Links nicht mehr gültig sind und man gezwungen ist, alle Verlinkungen manuell anzupassen.

Zum Glück gibt es dagegen ein Heilmittel. Den Code dazu findet man im Beitrag „Interne Links in WordPress-Beiträgen zukunftssicher setzen“ von Sergej Müller.