cssやJavaScriptと同じようにGoogle Fontsもfunctions.php内で読み込みたいな～。
というわけで今回は、WordPress編。Google Fontsをfunctions.php内で読み込む方法についてご紹介します。
目次
Google Fontsをfunctions.phpで読み込む
静的コーディングでは、CSSファイルやJavaScript、Google Fontsはhead内で読み込んでいると思います。
しかし、WordPressでは、head内ではなくfunctions.phpに記述して読み込むことが推奨されています。
functons.phpでファイルを読み込むことが推奨されている理由
1. テーマやプラグインの管理を一元化
functions.phpに登録することで、テーマやプラグインごとのCSSやJavaScriptを一括管理できます。- コードが散らばるのを防ぎ、保守性が向上します。
2. WordPressのフック機能を利用
- WordPressには
wp_enqueue_styleやwp_enqueue_scriptという専用関数があります。 - これらの関数はフック（
wp_enqueue_scriptsなど）を使ってスクリプトを正しいタイミングで読み込ませます。 - これにより、他のテーマやプラグインと干渉を避けることができます。
3. 依存関係の管理
wp_enqueue_scriptでは、読み込むスクリプトの依存関係を設定できます。- 例えば、jQueryに依存するスクリプトがある場合、
array('jquery')と指定することで正しい順序でスクリプトが読み込まれます。 - 順番の管理ミスを減らし、エラー発生を防ぎます。
4. キャッシュ管理が容易
- WordPressでは、スクリプトにバージョン番号を自動で付けることができます。これにより、更新時にキャッシュがクリアされ、最新のCSSやJavaScriptが確実に反映されます。
- 直接
<head>に記述した場合、手動でキャッシュ管理を行う必要があります。
5. パフォーマンス向上
- 必要に応じてスクリプトを特定のページや条件でのみ読み込むことができます。
- 無駄なスクリプトを読み込むのを防ぎ、ページの読み込み速度を向上させます。
6. セキュリティの強化
functions.phpを通してスクリプトを適切に管理することで、コードインジェクションなどのセキュリティリスクを軽減できます。
7. テーマ・プラグイン間の競合を回避
- 他のテーマやプラグインが同じスクリプトを読み込んでいても、
wp_enqueue_scriptによって重複読み込みを避けられます。 - WordPressは登録されたスクリプトの一覧を管理しており、同じスクリプトが2回読み込まれることを防ぎます。
まとめ：
functions.phpでスクリプトを管理することで、保守性、パフォーマンス、セキュリティ、互換性が向上します。- WordPressのベストプラクティスに従うことで、将来的なアップデートやカスタマイズもスムーズに行えるようになります。
コード紹介
では、実際にfunctions.phpに記述していきましょう！
【functions.php】
/**
* google fonts 読み込み
*
*/
function my_google_fonts(){
echo '<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">';
}
add_action('wp_footer', 'my_google_fonts', 1);
例ではGoogle Fontsの「Noto Sans JP」を読み込んでおります。
上記のコードをスニペットにして、内容だけ使いたいFontsのコードを書き換えるだけで使用できます！
まとめ
というわけで今回はGoogle Fontsをfunctions.phpで読み込む方法についてご紹介しました！
是非スニペットとしてご利用ください♪
