5. CSSとJavaScriptを読み込む

WordPressテーマを開発するうえで、CSSやJavaScriptの読み込みは非常に重要です。スタイルを整えたり、動的な挙動を実装したりするためには、テーマに適切な方法でCSS・JSファイルを読み込む必要があります。この章では、WordPressの正しい方法でリソースを読み込む方法を解説していきます。

✅ なぜ「正しく」読み込む必要があるのか？

HTMLに直接<link>や<script>タグを記述する方法もありますが、WordPressにはそれ専用の仕組みが用意されています。それを使うことで、以下のようなメリットがあります：

リソースの競合や重複読み込みを避けられる
読み込み順の制御がしやすい
必要なページだけに限定的に読み込める
プラグインとの連携で不具合が起きにくくなる

これらの理由から、CSSやJavaScriptの読み込みには、wp_enqueue_style()およびwp_enqueue_script()という関数を使用するのがWordPressのベストプラクティスとされています。

🛠 functions.phpでの基本的な読み込み方法

まずは、functions.phpに以下のような関数を追加します：

<?php
function themery_enqueue_scripts() {
  // CSSの読み込み
  wp_enqueue_style('theme-style', get_stylesheet_uri()); // style.css
  
  wp_enqueue_style(
    'custom-style',
    get_template_directory_uri() . '/css/custom.css',
    array(), // 依存するスタイル
    '1.0',
    'all'
  );

  // JavaScriptの読み込み
  wp_enqueue_script(
    'custom-script',
    get_template_directory_uri() . '/js/custom.js',
    array('jquery'), // 依存するスクリプト（例：jQuery）
    '1.0',
    true // trueにするとfooterで読み込む
  );
}
add_action('wp_enqueue_scripts', 'themery_enqueue_scripts');

このように記述することで、style.cssだけでなく、任意のCSSファイルやJSファイルも正しく読み込まれます。

📂 CSS・JSファイルの配置例

ファイルの配置構造の一例は以下の通りです：


/my-theme/
├── style.css
├── functions.php
├── css/
│   └── custom.css
└── js/
    └── custom.js

get_template_directory_uri()は、テーマディレクトリのURLパスを返してくれる関数です。これを活用することで、テーマフォルダ内の任意の場所に配置したファイルを柔軟に読み込むことができます。

🚦 読み込みの優先順位と依存関係

複数のスタイルやスクリプトを読み込む場合、それぞれの依存関係を適切に管理することが大切です。たとえば、jQueryに依存するスクリプトを読み込む場合、array('jquery')を第3引数に指定することで順序を保証できます。

また、trueを第5引数に渡すことで、JavaScriptを</body>の直前（フッター）に読み込ませることができます。これはページ表示のパフォーマンスを向上させるテクニックです。

🔄 条件付きで読み込むことも可能

必要なページだけにリソースを読み込むように制御することも可能です。たとえば、トップページのみで読み込みたいときは以下のように書きます：


if (is_front_page()) {
  wp_enqueue_script('top-page-script', get_template_directory_uri() . '/js/top.js', array(), '1.0', true);
}

📌 CDNのリソースを読み込む

Google Fonts や Font Awesome、jQuery などを CDN から読み込むことも可能です。


wp_enqueue_style(
  'google-fonts',
  'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
  false
);

このように外部リソースも簡単に読み込むことができ、サイトのデザインやパフォーマンスを向上させることができます。

✅ まとめ

CSS・JSの読み込みはfunctions.phpで行う
wp_enqueue_style() / wp_enqueue_script()を使うのがWordPress流
読み込み順・依存関係を意識して記述する
不要なページでの読み込みを避けて最適化を図る

THEMERY(テーマリー)では、初心者でも安心してテーマ開発が進められるよう、基本から応用まで丁寧にガイドしています。CSSやJavaScriptの読み込みをマスターすることで、あなたのテーマにデザイン性と機能性を追加していきましょう。

次回は「WordPressループの理解と活用」について学んでいきます！

Post Views: 12