WordPress – externe Links automatisch in neuem Tab öffnen

Um in WordPress einen Link in einem neuen Tab öffnen zu lassen, muss man jedes mal in die Linkoptionen und dort den Haken “Link in einem neuen Tab öffnen” setzen. Das ist sehr umständlich und wenn man es mal in einem größeren Beitrag vergessen hat, auch aufwendig. Eigentlich kann jeder externe Link einen neuen Tab öffnen, man möchte den Leser ja nicht von der Seite verjagen, sondern weiterführende Inhalte näher bringen. Mit ein wenig Code ist das sehr einfach machbar und man kann die separate Funktion vergessen.open link in new tab

Sucht man im Netz nach einer Möglichkeit, alle Links die von der eigenen WordPress-Seite wegführen in einem neuen Tab zu öffnen, findet man viele Anleitungen und Plugins, wovon vieles nicht richtig oder nichtmehr funktioniert. Diese Lösung hier sollte bei jeder Webseite (JS Code) und WordPress-Seite (JS und PHP Code) funktionieren.
[Getestet mit WordPress Version 4.8.1]

Code

Für die, die keine Erklärung benötigen, sind hier erstmal die benötigten Codezeilen.

JavaScript / jQuery

Bei den meisten Themes ist die Datei “functions.js” noch nicht vorhanden und du musst sie im Ordner deines Themes erstellen und mit obigem JS-Code füllen. Falls sie bei dir schon vorhanden ist, kannst du den PHP-Teil weiter unten überspringen, da die JavaScript-Datei bereits geladen wird.

Funktion

Hier fange ich mal von Innen nach Außen an zu erklären. Die Zeile $(this).attr('target','_blank'); bedeutet lediglich, dass dem aktuellen Element “this” das Attribut “target” mit den Wert “_blank” hinzugefügt wird und das sagt dem Link lediglich, dass er einen neuen Tab öffnen soll.

Die Zeile $("a:not([href*='" + window.location.host + "'])").each(function(){ ist etwas komplizierter. window.location.host gibt die Domain der Webseite aus, in meinem Fall “techblog.leuma.de“. Mit a:not([href*=' werden dann alle Links (a Tags) ausgewählt, die nicht die Domain enthalten, also alle externen. Der letzte Teil .each(function(){ führt einfach den inneren Teil für jedes ausgewählte Element aus.

jQuery( document ).ready( function( $ ) { wartet lediglich bis das Dokument bereit ist und führt dann den weiteren Code aus.

Also noch einmal zusammengefasst: Nachdem das Dokument bereit ist, werden alle Links ausgewählt in deren Verlinkung nicht die Domain der Webseite vorkommt und diesen wird das Attribut “target=_blank” hinzugefügt. Das wars schon. Jetzt muss WordPress nurnoch diesen Code laden.

PHP

In der Datei “functions.php” (sollte bei jedem Theme im Ordner vorhanden sein) musst du jetzt noch hinzufügen, dass die Datei “functions.js” geladen wird. Dazu einfach den obigen PHP-Code einfügen und speichern.

Funktion

function load_js_script( ){ wp_enqueue_script( 'load-js-script', get_stylesheet_directory_uri() . '/functions.js' ); } bewirkt lediglich, dass eine Funktion bereitgestellt wird, die die “function.js” zum Laden einreiht.

add_action( 'wp_enqueue_scripts', 'load_js_script' ); fügt die obige Funktion als Aktion hinzu, sodass sie von WordPress ausgeführt wird.

Sind beide Dateien erstellt bzw. ergänzt und gespeichert, kannst du deine Webseite neu laden und alle internen Links, wie z.B. Menüs sind weiterhin ohne Probleme verwendbar. Externe Links hingegen öffnen sich immer in einem neuen Tab.

2 Kommentare

  1. Hallo! Erstmal vorweg: Sehr gelungener Artikel! Prinzipiell auch gut, dass der Code gegeben ist – umso schwerer fällt es mir zu sagen, dass der JavaScript-Code bei mir falsch angezeigt wird. Es sollen Anführungszeichen fehlen, bei einem “+” und einem “.”, was aber eventuell auch an der neuen Version WordPress 4.9.1 liegen mag. Wenn das Problem behoben werden könnte, wäre ich ausgesprochen dankbar! Vielen Dank! Meine Website: https://juvoe.de/

    Schönen Abend noch 🙂

    1. Hallo Julian,
      leider kann ich das von dir geschriebene nicht nachvollziehen. Ich verwende hier die aktuellste Version von WordPress und der Code funktioniert.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.