投稿時に自動付加されるrel=noopener noreferrerを制御するWordPressカスタマイズ方法

WordPress5.1でリンクに関する仕様変更がありました。

それは、投稿の保存時に「target=”_blank”」属性があるAタグに対して「rel=”noopener noreferrer”」が強制的に付加されるというものです。

新しいタブで開くリンクのrel属性にnoopenerが付加されてしまうのは、セキュリティー的観点から見ても当然かもしれません。

WordPressの投稿で別ウィンドウで開くリンクtarget="_blank"を作成すると、 LINK TEXT のようなrel="noopener"属性を持ったaタグが出力されます。 rel="noopener" の意味 1. target="_blank" のセキュリティ上の脆弱性の問題を避ける Without ...

ただ、noreferrerまで自動付加されてしまうと、ちょっと困ったことになります。

例えば、リンクがアフィリエイトリンクだった場合だと「どのページからコンバージョンされたのか?」が分かるリファラが取得できなくなってしまう場合もあります。

リファラが取得できない

今回は、この問題に対応するために「投稿をポストしてもnoreferrerを強制付加しない方法」を紹介します。

noopenerは現時点では、Chrome、Firefox、Safari、Opera以外には対応していません。それ以外のブラウザに対応させるにはnoreferrerも付加しておく必要があります。すると、そうするとをリファラが取得できない…。ここらへんは難しい選択かと思います。セキュリティー面を考えるのであれば、変更しないことをおすすめします。
スポンサーリンク
レクタングル(大)広告

カスタマイズ方法

テーマ側からカスタマイズする場合は、子テーマのfunctions.phpに以下のコードを貼り付けます。

tiny_mce_before_initフック

最初の「tiny_mce_before_init」フックは、エディター側で「rel=”noopener noreferrer”」が自動付加されるのを防いでいます。

wp_targeted_link_relフック

「wp_targeted_link_rel」フックが、WordPress5.1からの機能です。

デフォルト動作だと、『「target=”_blank”」属性がついたリンク』に対して投稿をポストした時点で「rel=”noopener noreferrer”」を付加します(※内部リンク、外部リンクかかわらず「target=”_blank”」属性がついたリンクには付加されます)。

デフォルトの第一引数$rel_valueには「noopener noreferrer」という値が入っています。

フック関数によって、この「noopener noreferrer」から「 noreferrer」を取り除いて「noopener」のみにするという処理を行っています。

最終的には「rel=”noopener”」という属性が出力されます。

セキュリティー的に問題があると思いますが、noopenerも出力させたくない場合は、フック関数の返り値にnull(もしくは空文字)を返すことで実現できます。
wp_targeted_link_relフックの関数は、「target=”_blank”」属性がついたリンクに対してのみ実行されます。

動作確認

例えば、以下のようなリンクタグを投稿画面で保存したとします。

デフォルト動作

デフォルト動作だと投稿を保存した際「target=”_blank”」属性がついたリンクに「rel=”noopener noreferrer”」が自動付加されます。

カスタマイズ後の動作

けれど、今回のカスタマイズを行った場合、「target=”_blank”」属性がついたリンクに対して「rel=”noopener”」のみが自動付加されます。

ブロックエディター(Gutenberg)を利用している場合は、投稿をポストしても画面遷移が行われないので、タグ自体は変わりません。タグ変更を確認するには、画面の再読み込み(リロード)を行なう必要があります。

まとめ

今回のカスタマイズで投稿ポスト時に「target=”_blank”」がついたリンクに対してrel属性の変更を制御出来るかと思います。

ただ、今回のカスタマイズを行っても、既に投稿がポストされてしまったものは変更できませんでした。

既に「rel=”noopener noreferrer”」がついてしまったリンクは、手動で修正するか、コードを書いて置換するかで対応するしかないかと思います。

修正が面倒であれば以下のような、一括置換プラグインでまとめて変更するというのもありかもしれません。

Search Regex adds a powerful set of search and replace functions to WordPress that go beyond the standard searching capabilities, with full regex supp …
プラグインを用いた一括置換は、手順を誤るとコンテンツ表示に重大な問題が出る恐れもあります。実行前は必ずデータベースのバックアップを取って元に戻せる体制を整えておく必要があります。

『投稿時に自動付加されるrel=noopener noreferrerを制御するWordPressカスタマイズ方法』へのコメント

  1. 名前:TM_BB 投稿日:2019/03/01(金) 11:43:22 ID:c206cea1c

    わいひら様
    いつもお世話になっています。
    別テーマ(テンプレートキングさんの FSVBASIC)に放り込んでもバッチリでした。
    ありがとうございます。

  2. わいひら 名前:わいひら 投稿日:2019/03/01(金) 22:12:15 ID:5be266357

    うまくいったようでよかったです^^
    一応、当ページのサンプルコードはWordPress公式テーマでテストしているので、大抵のテーマであれば動作するかと思います。

  3. 名前:ひろちん 投稿日:2019/03/13(水) 23:27:18 ID:bc05c4039

    報酬発生元が全く分からなくなり困っていました。違うテーマですがこちらの記事で解決できました。
    NOOPENERだけ残すという理想形が実現できました。
    ありがとうございます!

  4. わいひら 名前:わいひら 投稿日:2019/03/14(木) 10:54:42 ID:6a3299e02

    noopenerだけだと、古いブラウザのセキュリティーに万全とは言えませんが、noreferrerを付加してリファラが取得できなくなるのは、アフィリエイトとかをやっているとキツイですよね…。
    「target=”_blank”」をつけないという手もありますが、やはり外部リンクは新しいタブで開きたいですし。