WordPressのスクリプト・CSS読み込みとデバッグ実践 — レッスン記録
この記事でわかること
- 今日のレッスン概要
- 学んだこと
- 1. WordPressのスクリプト読み込みの仕組み
- 2. header.phpの構造とコードの配置
- 3. デバッグの手法
- 4. 今日の作業の流れ（実践）
WordPressのスクリプト・CSS読み込みとデバッグ実践 — レッスン記録
日付： 2026年4月20日
生徒： Aさん
レッスン時間： 約1時間28分
今日のレッスン概要
WordPressテーマ開発において、jQueryやCSSをどのように正しく読み込むかを学びました。また、エラーが発生した際のデバッグ手順を実際の作業を通じて体験しました。
学んだこと
1. WordPressのスクリプト読み込みの仕組み
通常のHTMLでは<script>タグや<link>タグで直接CSSやJavaScriptを読み込みますが、WordPressには専用の関数があります。
なぜWordPressの関数（wp_enqueue）を使うのか？
- 同じスクリプト（jQueryなど）が複数のプラグインやテーマから読み込まれると、重複してしまう
- jQueryは比較的ファイルサイズが大きく、2回読み込むとページの表示速度が落ちてユーザーの離脱につながる
wp_enqueue_scriptsを使うと、WordPressが重複を自動的に除去してくれる
// functions.php での正しい書き方（例）
function my_theme_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/assets/css/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
2. header.phpの構造とコードの配置
- CSSやスクリプトのコードは
<head>タグの中に書く必要がある <head>の外に出てしまうと、機能はしても正しい構造ではない- VSCodeで確認しながら修正した
3. デバッグの手法
ブラウザのソースコードで確認する方法：
1. ブラウザで右クリック →「ページのソースを表示」
2. Ctrl + F（Mac: Cmd + F）で検索窓を開く
3. jqueryなどのキーワードで該当箇所を検索する
AIを活用したデバッグ：
– ChatGPT（チャッピー）：コードの意味説明・修正案の提示
– 玄人（Kuro-jin）：コード解析に強く、バグやエラーの原因特定に活用
コードをAIに投げて「何がおかしいか教えてください」「このコードをWordPressのスクリプトタグ記述に直してください」のように質問すると効率よく解決できる。
4. 今日の作業の流れ（実践）
header.phpの11行目にあったjQuery読み込みコードを確認- コメントアウトして動作テスト →ハンバーガーメニューが動かなくなることを確認
<script>タグで書いた場合との違いを比較- ブラウザのソースコードでjQueryが2行出ていたことを発見
- AIを使って原因を調査 → WordPressの仕様変更の可能性、または記述の重複が原因
- CSSの
wp_enqueue_styleへの移行に挑戦（一部時間内に解決できず持ち越し） - サイトデータをAll-in-One WP Migrationでエクスポートし、次回確認用に送付
補足：enqueue処理はなぜ関数（function）で書かないといけないのか？
教材では header.php の中に直接 wp_enqueue_script() を書いていますが、正しくは functions.php に関数としてまとめてフックする書き方が推奨されています。
結論：関数で書く必要があります。理由は以下の通りです。
WordPressは起動時に決まった順番で処理を実行します。wp_enqueue_scripts というタイミング（フック）が来た時に初めてスクリプトの登録が行われる仕組みになっています。
関数でくるまずに functions.php に直接書いてしまうと、WordPressの準備が整う前に実行されてしまい、正常に動作しないことがあります。
// NG：関数でくるまず直接書く（動かない場合がある）
wp_enqueue_script( 'jquery' );
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/assets/css/style.css' );
// OK：関数にまとめて、add_action でフックする
function my_theme_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/assets/css/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
ポイント：
– function my_theme_scripts() { ... } で処理をひとまとめにする
– add_action( 'wp_enqueue_scripts', 'my_theme_scripts' ) で「wp_enqueue_scriptsのタイミングが来たらこの関数を呼んでね」とWordPressに伝える
– 関数名（my_theme_scriptsの部分）は自由につけてOK。ただし他のプラグインと重複しないようにテーマ名などを先頭につけるのが慣習
なぜ教材は header.php に書いているのか？
入門段階では「まず動かす」ことを優先しているため、シンプルな書き方で始めている場合があります。実務では functions.php にまとめるのが標準です。
add_action でタイミングを指定しないといけないのはなぜ？
WordPressは起動時に決まった順番で処理を実行します。
WordPress起動
↓
プラグイン読み込み
↓
functions.php 読み込み ← ここでコードが実行される
↓
【wp_enqueue_scripts のタイミング】← ここでないとスクリプト登録できない
↓
HTMLのheadを出力
↓
ページ表示
functions.php が読み込まれる時点では、まだWordPressのスクリプト管理システムが準備できていません。そのため直接 wp_enqueue_script() を書いても「まだその機能は使えません」という状態になることがあります。
add_action は 「このタイミングが来たら実行してね」と予約する 命令です。
// 「wp_enqueue_scriptsのタイミングが来たら my_theme_scripts を呼んでね」と予約
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
準備が整った正しいタイミングで関数が呼ばれるので、確実に動作します。
この考え方はWordPress全体で使われていて、「直接実行」ではなく「タイミングを指定して予約」 するのがWordPressの基本的な作法です。慣れると自然に感じるようになります。
解決済み：持ち越し課題
wp_enqueue_styleでCSSを読み込む方法 → 動画で解説済みfunctions.php内でのfunctionの書き方（関数化） → 動画で解説済み
先生コメント
つまずいた方がいいんですよ。トントン拍子に進むよりも、引っかかったことを解決した方が理解が深まる。
今日はデバッグ作業の実体験ができた。実際の現場もこういう感じで、AIがなければ解決に何倍も時間がかかると思う。Aさんは理解が早いので、引き続きしっかり説明していきたい。
このノートはレッスン音声の文字起こしをもとに作成しました。
