【WordPress】linkタグのdns-prefetchやpreconnectにcrossoriginを出力する

更新日：2025/04/23

サイトにGoogle Fontsを追加することにしました。
手順としてはwp_headフックで出力するだけでいいのだけど、専用のフィルターがあるようなので使ってみることにした。

rel="preconnect"を生成する

これをheadタグ内に出力したい。

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

コード

add_filter('wp_resource_hints' , function( $urls, $relation_type ){
    if ($relation_type === 'preconnect') {
        array_push( $urls , array( 'rel'=>'preconnect' , 'href' => 'https://fonts.googleapis.com'));
        array_push( $urls , array( 'rel'=>'preconnect' ,'href' => 'https://fonts.gstatic.com', 1 => 'crossorigin'));
    }
    return $urls;
} , 10, 2);

解説

preconnect等のタグは、wp_resource_hintsフィルターで制御します。

コールバック関数の第二引数$relation_typeは、次の文字列のどれか一つがセットされています。

'dns-prefetch'
'preconnect'
'prefetch'
'prerender'

この引数で目的のタイプかどうかを判定して、第一引数の$urlsに次のキーのどれかを持つ連想配列をセットして返します。

'as'
'crossorigin'
'href'
'pr'
'rel'
'type'
数値インデックス

ただし連想配列ではなく、文字列をセットすることも可能です。
この場合、array( 'href' => 文字列 ) に変換されます。

今回はcrossoriginの出力で、数値インデックスを使用しました。
'crossorigin' がキーとして使用できますが、crossorigin="値" の形式で出力されます。
数値インデックスは値のみが表示されるので、こちらで出力しています。

rel属性は自動で付加され、フィルター内でセットした値は無視されます。
ただし、フィルター内でセットした順番でタグへ出力されるます。
Google Fontsのタグを再現するために、今回はrel属性をセットしています。

また、他のフィルターで同じ内容の hrefキーをセットしている場合、最初の連想配列のみが有効となります。
そのため確実に有効化したいときは、フィルターの優先順位を上げるか、受け取った第一引数の既存データをチェックして同じデータが存在するなら上書きする必要があります。

関連記事

スポンサーリンク

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。