[WordPress] 投稿されたコメント内のリンクを別ウィンドウで開く方法

WordPressに投稿されたコメント内のリンクを別ウィンドウ(タブ)で開くようにする方法です。
通常はコメント内のリンクは同じウィンドウで開きますが、これをfunctions.phpのカスタマイズで改善します。

管理人

特に外部リンクが同じウィンドウってのが嫌なんだ。

りさ

他サイトはタブで開くイメージがあるよね。

◆ 安全にfunctions.phpをカスタマイズする方法
functions.phpの修正に不安がある人は以下を参考にしてください。

コードを追加する

functions.phpとかに以下のコードを追加します。

// コメント内のaタグに"_blank"と"noopener"を付加
add_filter( 'comment_text', function( $comment_text, $comment = null ) {
  if ( $comment !== null ) {
    $comment_text = preg_replace( '/<a /i', '<a target="_blank" ', $comment_text );

    if ( preg_match_all( '/<a[^>]*>.*?<\/a>/is', $comment_text, $as ) ) {
      foreach ( $as[0] as $a ) {
        if ( preg_match( '/rel=[\'"]([^\'"]*)[\'"]/i', $a, $rel ) ) {
          if ( ! preg_match( '/noopener/i', $rel[1] ) ) {
            $replace = preg_replace( '/rel="/', 'rel="noopener ', $a, 1 );
            $comment_text = preg_replace( '/' . preg_quote($a, '/') . '/', $replace, $comment_text, 1 );
          }
        } else {
          $replace = preg_replace( '/ /', ' rel="noopener" ', $a, 1 );
          $comment_text = preg_replace( '/' . preg_quote($a, '/') . '/', $replace, $comment_text, 1 );
        }
      }
    }
  }

  return $comment_text;
}, 10, 2 );

仕組み

先程のコードを追加すると、aタグにtarget="_blank"属性が付加されます。
また、WordPressが標準出力するコメントはrel属性のnoopenerが付いてないので、それも付加します。

管理人

noopener付加はサンプルが無かったので、正規表現を含めて自己流です。

あとがき

WordPressには、target="_blank"属性が付いてるリンクに自動的にnoopenerを付加する機能があります。
ただし、今回のように後から強制的に付加した場合は機能しないみたいです。たぶん、記事内で設置した場合のみ機能します。