WordPress:headタグの dns-prefetch を削除したり追加したりする

dns-prefetchは、今後アクセスする可能性があるドメインのＩＰアドレスを事前に確認しておくことをブラウザに指示するタグです。
WordPressもheadタグ内に出力しています。

今回は既存の dns-prefetch を削除したり、追加したりする方法を紹介します。

既存の dns-prefetch

WordPressは規定値として、次のタグを出力しています。

<link rel='dns-prefetch' href='//s.w.org' />

s.w.orgはWordPressのドメインで、アクセスするとhttps://wordpress.org/にリダイレクトされます。

dns-prefetch を出力している関数

dns-prefetchはwp_head()関数を呼び出したタイミングで生成されています。
wp_head()は、wp_headアクションを実行しているだけなので、このアクションが呼び出している関数を確認してみます。

確認は、次の記事で紹介している方法で行います。

WordPress:アクションまたはフィルターに登録されている関数をリストアップする

次のように、上の記事で紹介しているlist_filter()関数を呼び出します。

  • list_filter('wp_head');
AFFS Simple Code Viewer
Copy

すると、次の情報が出力しました。

  • 1 , wp_maybe_inline_styles [/wp-includes/script-loader.php(2680)]
  • 1 , my_robots [/my-simple-theme/functions.php(4)]
  • 2 , wp_resource_hints [/wp-includes/general-template.php(3302)]
  • 2 , feed_links [/wp-includes/general-template.php(3084)]
  • 3 , feed_links_extra [/wp-includes/general-template.php(3130)]
AFFS Simple Code Viewer
Copy

実際はもっと長いですが、関係がある箇所の前後のみ抜粋してあります。

この中で、dns-prefetchを処理しているのはwp_resource_hints()関数です。

wp_resource_hints()関数は最初に、wp_enqueue_script()またはwp_enqueue_style()で登録されている、外部ドメインのurlを収集します。
その後、emoji_svg_urlフィルターで、emoji SVG のurlを決定して、外部ドメインのurlに追加します。

emoji SVG のurlは、WordPress5.9でのデフォルトは'https://s.w.org/images/core/emoji/13.0.0/svg/'です。
既存の dns-prefetch は、このドメインが出力されています。

その後wp_resource_hintsフィルターで、収集したドメインに追加したり削除したりします。

そして最終的なドメインを、dns-prefetchとして出力します。

dns-prefetch を完全に削除する

dns-prefetch を完全に削除したいときは、wp_headアクションからwp_resource_hints()関数を削除します。

  • remove_action('wp_head','wp_resource_hints' ,2);
AFFS Simple Code Viewer
Copy

dns-prefetch を追加する

wp_enqueue_script()などで指定されたもの以外に、dns-prefetchを追加したい場合、wp_resource_hints フィルターを使用します。

  • add_filter( 'wp_resource_hints' , 'my_resource_hints' , 20 , 2);
  • function my_resource_hints($urls, $relation_type){
  • if( $relation_type === 'dns-prefetch' ){
  • $urls[] = "https://test.com";
  • $urls[] = "aaaa.com/";
  • }
  • return $urls;
  • }
AFFS Simple Code Viewer
Copy

wp_resource_hintsフィルターは引数を2個受け付ける関数を登録するので、4番目の引数に 2が必要です。
指定しないと、フィルター実行時にエラーになります。

実行する関数の引数は、一つ目がurl名の配列で、二つ目が rel属性の値です。

rel属性は'dns-prefetch'の他に、'preconnect'、'prefetch'、'prerender'も処理されます。
そのため、二つ目の引数の値をチェックしています。

一つ目の引数は、配列です。
ここにドメイン名を追加するのですが、ドメインとして判断できるものなら受け付けてくれます。

最後に、一つ目の引数を戻り値として返します。

実行すると、次のタグが出力されます。

<link rel='dns-prefetch' href='//s.w.org' />
<link rel='dns-prefetch' href='//test.com' />
<link rel='dns-prefetch' href='//aaaa.com' />

//s.w.org を削除する

他のdns-prefetchは残して //s.w.orgのみを削除したい場合、emoji_svg_urlフィルターで 文字列以外を返します。

  • add_filter( 'emoji_svg_url' , '__return_null');
AFFS Simple Code Viewer
Copy

これで初期値の 'https://s.w.org/images/core/emoji/13.0.0/svg/' が null に置き換わります。
その結果、有効な値でないと判断されて、dns-prefetchとして出力されません。

その他の dns-prefetch を削除する

//s.w.org 以外の dns-prefetch を削除するときは、wp_resource_hints フィルターを使用します。

例えば、次のコードを実行すると dns-prefetch を５つ生成します。

  • wp_enqueue_script( 'a1', 'https://xxx.com/js/a1.js' );
  • wp_enqueue_script( 'a2', 'https://xxx2.com/js/a2.js' );
  • add_filter( 'wp_resource_hints' , 'my_resource_hints' , 20 , 2);
  • function my_resource_hints($urls, $relation_type){
  • if( $relation_type === 'dns-prefetch' ){
  • $urls[] = "https://test.com";
  • $urls[] = "aaaa.com/";
  • }
  • return $urls;
  • }
AFFS Simple Code Viewer
Copy

↓ 生成された dns-prefetch
<link rel='dns-prefetch' href='//xxx.com' />
<link rel='dns-prefetch' href='//xxx2.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel='dns-prefetch' href='//test.com' />
<link rel='dns-prefetch' href='//aaaa.com' />

ここから、特定のタグだけ削除します。
wp_resource_hintsフィルターで受け取ったurlリストから、目的のものを削除して返せばＯＫです。

  • add_filter( 'wp_resource_hints' , 'my_remove_resource_hints' , 30 , 2);
  • function my_remove_resource_hints($urls, $relation_type){
  • if( $relation_type === 'dns-prefetch' ){
  • $remove = ['test.com','aaaa.com','xxx2.com'];
  • foreach ( $remove as $r){
  • $matches = preg_grep('/(^|\/)' . $r . '($|\/)/', $urls);
  • if( is_array( $matches ) ){
  • $keys = array_keys($matches);
  • foreach ( $keys as $key){
  • unset( $urls[ $key ] );
  • }
  • }
  • }
  • return array_values($urls);
  • }
  • return $urls;
  • }
AFFS Simple Code Viewer
Copy

まずは、add_filterの3つ目の引数に、一番最後に関数が呼ばれるような優先順位を指定する必要があります。
それには既存のものを確認しないといけません。

この記事の最初の方で紹介しているlist_filter()関数で確認します。

  • list_filter('wp_resource_hints');
AFFS Simple Code Viewer
Copy
  • *************wp_resource_hints
  • 20 , my_resource_hints [/my-simple-theme/functions.php(9)]
AFFS Simple Code Viewer
Copy

今回は優先順位20に関数を登録してあるので、それ以降の番号を指定しています。

次にurlリストから、目的のものを削除。
しかし、urlリストはドメインとして認識できる値が指定されていて、決まった形式はありません。
正規表現などを駆使して削除していきます。

その結果、次のように削除できました。

<link rel='dns-prefetch' href='//xxx.com' />
<link rel='dns-prefetch' href='//s.w.org' />