本記事では、WordPressでwp_enqueue_style/wp_enqueue_scriptでファイルが読み込まれない時の原因と対処法について解説しています。
WordPressの学習におすすめ参考書
1冊ですべて身につくWordPress入門講座
| 著者 | Mana |
|---|---|
| 発売日 | 2022/3/22 |
| ページ数 | 344ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (217件) |
【中・上級者向け】オリジナルテーマの作り方が学べるおすすめ参考書
WordPressオリジナルテーマ制作入門
| 著者 | 清水 由規 / 清水 久美子 / 鈴木 力哉 / 西岡 由美 |
|---|---|
| 発売日 | 2022/1/13 |
| ページ数 | 416ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (53件) |
パスの間違い
ファイルが読み込まれない時の原因の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>
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 
