WordPress5.1でリンクに関する仕様変更がありました。
それは、投稿の保存時に「target=”_blank”」属性があるAタグに対して「rel=”noopener noreferrer”」が強制的に付加されるというものです。
新しいタブで開くリンクのrel属性にnoopenerが付加されてしまうのは、セキュリティー的観点から見ても当然かもしれません。
ただ、noreferrerまで自動付加されてしまうと、ちょっと困ったことになります。
例えば、リンクがアフィリエイトリンクだった場合だと「どのページからコンバージョンされたのか？」が分かるリファラが取得できなくなってしまう場合もあります。
今回は、この問題に対応するために「投稿をポストしてもnoreferrerを強制付加しない方法」を紹介します。
詳細は以下を参照してください。
【対策】「noopener noreferrer」の自動付与の問題点は？ | わかるWeb
目次
カスタマイズ方法
テーマ側からカスタマイズする場合は、子テーマのfunctions.phpに以下のコードを貼り付けます。
//エディターでrel="noopener noreferrer"自動付加の解除
add_filter('tiny_mce_before_init','tinymce_allow_unsafe_link_target_demo');
function tinymce_allow_unsafe_link_target_demo( $mce_init ) {
$mce_init['allow_unsafe_link_target']=true;
return $mce_init;
}
//投稿時に強制付加されるnoreferrer削除
add_filter( 'wp_targeted_link_rel', 'wp_targeted_link_rel_custom_demo', 10, 2 );
function wp_targeted_link_rel_custom_demo( $rel_value, $link_html ){
$rel_value = str_replace(' noreferrer', '', $rel_value);
return $rel_value;
}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”」という属性が出力されます。
動作確認
例えば、以下のようなリンクタグを投稿画面で保存したとします。
<!-- wp:paragraph --> <p><a href="https://www.yahoo.co.jp/" target="_blank">外部リンク（新しいタブ）</a></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><a href="https://www.yahoo.co.jp/">外部リンク</a></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><a href="http://demo.local/" target="_blank">内部リンク（新しいタブ）</a></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><a href="http://demo.local/">内部リンク</a></p> <!-- /wp:paragraph -->
デフォルト動作
デフォルト動作だと投稿を保存した際「target=”_blank”」属性がついたリンクに「rel=”noopener noreferrer”」が自動付加されます。
<!-- wp:paragraph --> <p><a href="https://www.yahoo.co.jp/" target="_blank" rel="noopener">外部リンク（新しいタブ）</a></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><a href="https://www.yahoo.co.jp/">外部リンク</a></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><a href="http://demo.local/" target="_blank" rel="noopener">内部リンク（新しいタブ）</a></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><a href="http://demo.local/">内部リンク</a></p> <!-- /wp:paragraph -->
カスタマイズ後の動作
けれど、今回のカスタマイズを行った場合、「target=”_blank”」属性がついたリンクに対して「rel=”noopener”」のみが自動付加されます。
<!-- wp:paragraph --> <p><a href="https://www.yahoo.co.jp/" target="_blank" rel="noopener">外部リンク（新しいタブ）</a></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><a href="https://www.yahoo.co.jp/">外部リンク</a></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><a href="http://demo.local/" target="_blank" rel="noopener">内部リンク（新しいタブ）</a></p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><a href="http://demo.local/">内部リンク</a></p> <!-- /wp:paragraph -->
まとめ
今回のカスタマイズで投稿ポスト時に「target=”_blank”」がついたリンクに対してrel属性の変更を制御出来るかと思います。
ただ、今回のカスタマイズを行っても、既に投稿がポストされてしまったものは変更できませんでした。
既に「rel=”noopener noreferrer”」がついてしまったリンクは、手動で修正するか、コードを書いて置換するかで対応するしかないかと思います。
修正が面倒であれば以下のような、一括置換プラグインでまとめて変更するというのもありかもしれません。
わいひら様
いつもお世話になっています。
別テーマ(テンプレートキングさんの FSVBASIC)に放り込んでもバッチリでした。
ありがとうございます。