フォルダ構成
外部のJSファイルやCSSファイルを読み込む場合、通常は テーマフォルダ内の assets/ フォルダ に保存するのが一般的です。例えば、以下のようなディレクトリ構成にすると整理しやすくなります。
mytheme/
│── assets/
│ ├── css/
│ │ ├── style.css
│ │ ├── custom.css
│ ├── js/
│ │ ├── main.js
│ │ ├── script.js
│── functions.php
│── header.php
│── footer.php
│── index.php
│── style.css
外部ファイルの読み込み方法（functions.php に記述）
外部CSSやJSファイルを適切に読み込むには、wp_enqueue_style と wp_enqueue_script を使用します。
|
1 2 3 4 5 6 7 8 9 10 |
function mytheme_enqueue_assets() { // CSSファイルを読み込む wp_enqueue_style('mytheme-style', get_template_directory_uri() . '/assets/css/style.css', array(), '1.0', 'all'); wp_enqueue_style('mytheme-custom', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0', 'all'); // JavaScriptファイルを読み込む wp_enqueue_script('mytheme-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true); wp_enqueue_script('mytheme-custom-script', get_template_directory_uri() . '/assets/js/script.js', array(), '1.0', true); } add_action('wp_enqueue_scripts', 'mytheme_enqueue_assets'); |
読み込んだCSS/JSが適用されない場合
wp_head();を<head>内に記述しているか確認するwp_footer();をfooter.phpの</body>の直前に記述しているか確認する- キャッシュが影響している場合があるので、ブラウザキャッシュを削除してみる