【WordPress/PHP】wp_enqueue_style/wp_enqueue_scriptでファイルが読み込まれない時の原因と対処法

2023年5月22日2023年7月16日

本記事では、WordPressでwp_enqueue_style/wp_enqueue_scriptでファイルが読み込まれない時の原因と対処法について解説しています。

WordPressの学習におすすめ書籍

1冊ですべて身につくWordPress入門講座

総合評価

( 5 )

メリット

楽天ブックス

¥2,200 （2024/04/16 07:05時点 | 楽天市場調べ）

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

ポチップ

パスの間違い

ファイルが読み込まれない時の原因の1つ目は、読み込ませたいファイルまでのパスが間違えていることです。

wp_enqueue_style/wp_enqueue_scriptの関数では第二引数に読み込みたいファイルが配置されているパスを指定します。CDNなどの外部ファイルを読み込む場合は絶対パスなのでパス間違いは起きないと思われますが、テーマ配下に配置したファイルを読み込ませたい場合は注意が必要です。

テーマ配下に配置したファイルを読み込ませたい場合は「get_theme_file_uri」や「get_template_directory_uri」などの関数を使用しテーマまでの絶対パスを取得しそれにテーマ配下の読み込ませたいファイルまでのパスを組み合わせます。

例えば、テーマ配下の「assets/css/style.css」を読み込ませたい場合は以下のように記述します。

wp_enqueue_style('my-style', get_theme_file_uri('/assets/css/style.css'));

先輩くん

wp_enqueue_style/wp_enqueue_scriptの使い方がよく分からないという方は、下記の記事で詳しく解説しているのでご参考ください。

ファイルが読み込まれない時の原因の2つ目は、wp_headとwp_footerを追記していないことです。

wp_enqueue_style/wp_enqueue_scriptを正しく記述していても、wp_headやwp_footerを追記していないと出力がされません。

wp_headは<head>タグ内に、wp_footerは</body>タグの直前に記述します。

<head>
    <?php wp_head(); ?>
</head>

<?php wp_footer(); ?>
</body>

よかったらシェアしてね！