外部リンクを作成したとき自動的に別タブで開くようにしたい

WordPressで投稿や固定ページのコンテンツを作成している時に外部リンクを作成することはよくあると思います。その時にリンク先のページを開くときに「別タブ（ウィンドウ）」で開くようにしている人も多いのではないでしょうか？リンクを作成した後に「リンクを編集」→「高度」→「新しいタブで開く」にチェックを入れることでリンク先を新しいタブで開くことはできますが地味にめんどくさい。チェックを入れ忘れたりすることもあります。

リンク先を別タブ（ウィンドウ）で開く意味は？

ウェブサイトでリンクを作成する際に、別ウィンドウ（または新しいタブ）で開くという設定は、ユーザー体験やサイト運用の観点から重要な選択肢となります。HTMLのリンクタグにtarget="_blank"属性を加えることで、リンク先のページを現在のページとは別のウィンドウまたはタブで開くように指定することができます。

<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部リンク</a>

リンク先を別タブ（ウィンドウ）で開く効果は？

1. ユーザーが現在のページを離れない

• 別タブで開くことで、ユーザーが元のページに戻りやすくなり、離脱率の低下が期待できます。
• 特にコンバージョンが重要なページでは、元ページを維持することで成果率を上げやすくなります。

2. 外部サイトに飛ばすときの安心感

• ユーザーにとって「別サイトに行く」ことが視覚的に明確になります。
• 信頼性を担保しつつ、意図しないサイト遷移を防ぎます。

3. ユーザー体験の向上

• 長い読み物やフォーム入力中に外部リンクを開く場合、元ページが消えてしまうリスクを回避できます。

リンク先を別タブ（ウィンドウ）で開く注意点とデメリット

● タブが増えすぎる可能性

• 多用するとユーザーのブラウザにタブが大量に開いて混乱を招くことがあります。

● アクセシビリティ上の配慮が必要

• スクリーンリーダーを使用している人にとっては「別ウィンドウで開く」ことが明示されていないと混乱します。
• aria-labelや明示的なテキスト（例：「※新しいタブで開きます」）を加えると親切です。

リンク先を別タブ（ウィンドウ）で開くことが推奨される場面

リンク先を別タブ（ウィンドウ）で開く基本方針

• 外部リンクは新しいタブで開くことを推奨
• 内部リンク（同じドメイン内）は通常通り同じタブで開く

ユーザーに配慮した設計を考える

• 「外部リンクです」「新しいタブで開きます」など、案内を明記する
• タブを開きすぎないよう、バランスを取る

WordPressで外部リンクを作成したとき自動的に別タブで開く方法

WordPressで投稿内の外部リンクをデフォルトで新しいタブ（別ウィンドウ）で開く方法には、主に以下の3つの方法があります。

JavaScriptを使う（テーマにコード追加）

テーマのfooter.phpや、functions.phpから読み込むJavaScriptファイルに以下のスクリプトを追加します。

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const currentHost = location.hostname;
    document.querySelectorAll("a[href]").forEach(function (link) {
      const url = new URL(link.href);
      if (url.hostname !== currentHost) {
        link.setAttribute("target", "_blank");
        link.setAttribute("rel", "noopener noreferrer");
      }
    });
  });
</script>

• 外部リンクだけを対象にし、内部リンクはそのままです。
• rel="noopener noreferrer"はセキュリティ対策として推奨です。

functions.phpでフィルターフックを使う

functions.phpに以下のPHPコードを追加します。投稿本文のリンクに対して、外部リンクのみtarget="_blank"を付与します。

function add_target_blank_to_external_links($content) {
  $site_url = parse_url(home_url(), PHP_URL_HOST);
  return preg_replace_callback(
    '/<a\s[^>]*href=["\']([^"\']+)["\'][^>]*>/i',
    function ($matches) use ($site_url) {
      $link_host = parse_url($matches[1], PHP_URL_HOST);
      if ($link_host && $link_host !== $site_url) {
        // 既に target 属性があるかチェック
        if (strpos($matches[0], 'target=') === false) {
          return str_replace('<a', '<a target="_blank" rel="noopener noreferrer"', $matches[0]);
        }
      }
      return $matches[0];
    },
    $content
  );
}
add_filter('the_content', 'add_target_blank_to_external_links');

プラグインを使う

おすすめプラグイン：

• External Links – nofollow, noopener & new window
  → 外部リンクに対して自動でtarget="_blank"やrel="nofollow"を付与できます。

WordPress.org 日本語

External Links – nofollow, noopener & new window Internal links & external links manager: open in new window or tab, control nofollow, ugc, sponsored & noopener. SEO friendly.

導入方法：

1. 管理画面 > プラグイン > 新規追加
2. 「External Links」で検索
3. インストール・有効化
4. 「設定 > External Links」から細かく挙動を設定可能

どれが良いか？