WordPressでCSSやJavaScriptを読み込むとき、つい<link>タグや<script>タグを直接テーマファイルに書いてしまうこと、ありませんか？
実はWordPressでは、wp_enqueue関数を使うのが正しいやり方です。
今回はその理由をわかりやすく解説します！
そもそもwp_enqueueとは？
wp_enqueue_style()やwp_enqueue_script()は、
WordPressに正しくCSSやJavaScriptファイルを登録・読み込ませるための関数です。
簡単に言うと、
「これをこのタイミングで読み込んでね！」
とWordPressに教えてあげるイメージです。
wp_enqueueを使うべき理由
1. プラグインやテーマとの競合を防げる
WordPressにはたくさんのプラグインやテーマが共存します。
それぞれが適当にスクリプトを読み込んだら、順番がバラバラになったり、同じファイルを二重で読み込んだりしてしまうかも…。
wp_enqueueを使えば、
依存関係や読み込みの順番をきちんと管理できるので、競合を防ぐことができます！
2. 公式テーマ・プラグインの審査基準だから
もしテーマを配布したい、公式ディレクトリに登録したいなら、wp_enqueueでの管理は必須です。
WordPressのテーマレビューチームも、「直書き禁止、enqueue必須」と明言しています。
3. 必要ないページでは読み込まない工夫ができる
例えば、あるJavaScriptをトップページだけで使いたいとき。
直書きだと常に読み込まれてしまいますが、wp_enqueueを使えば条件分岐で必要なページだけに限定できます！
if ( is_front_page() ) {
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/front-page.js', array(), null, true );
}これで無駄な読み込みを減らして、ページ表示速度アップにもつながります。
4. バージョン管理ができる
wp_enqueue_scriptやwp_enqueue_styleでは、
バージョン番号を引数で指定できます。
これによって、
- キャッシュ対策ができる
- サイトの更新管理が楽になる
といったメリットも！
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css', array(), '1.2.0' );まとめ
WordPressでCSSやJSを読み込むときは、必ずwp_enqueueを使いましょう！
まとめポイント：
- 競合を防げる
- 公式基準に沿う
- 無駄な読み込みを減らせる
- バージョン管理ができる
正しく管理することで、安全で軽快なサイト作りができます！
おまけ：基本的な書き方
function my_theme_scripts() {
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css', array(), '1.0.0' );
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );これをfunctions.phpに書けばOKです！
