JavaScriptがWordPressアップデートでエラーになった時の解決方法【アクションフックまとめ】
このブログではアフィリエイト・アドセンス広告を利用しています
当ブログでは、アドセンス・アフィリエイト広告を掲載しています。
消費者庁が発表しているルールに沿って記事を作成していますが、問題のある表現を見つけた際にはご連絡ください。
WordPressをアップデートしたことで、自分で追加していたJavaScriptが「jQuery is not defined」エラーになり動かなくなってしまいました。
原因を探したところ、WordPressアクションフックの実行順を正しく理解していないために、jQueryが適切な順番で呼び出されていなかったことが判明したのです。JQueryを読み込む前に自作したJavaScriptコードがJQueryを使おうとしていたから、「jQuery is not defined」エラーを引き起こしていたのでした。
アクションとアクションフックのまとめについて、メモがわりに記録を残しておきます。きっと、またすぐ忘れてしまいそうなので。
目次（読みたいところへジャンプ！）
WordPressアクションフックとは
WordPressアクションフックとは、指定したタイミングで処理を実行できる仕組みです。
テーマ内でよく使われる例としては、次のような使い方が挙げられます。
- Webフォントを読み込む
- アイコンフォントを読み込む
- JQueryプラグインを読み込む
- ウィジットエリアを追加する
- カスタマイザーを登録する
- カスタムフィールドを追加する
- XMLサイトマップを更新する
- ログイン画面をカスタマイズする
- editor-style.cssをグーテンベルク編集画面で表示させる
- ブログカードをカスタマイズする
add_action関数の引数には、①アクションフック名 と②フック時に実行する関数名を指定します。
add_action( $hook, $function_to_add, $priority, $accepted_args );| $hook | $function_to_add がフックされるアクション名（必須） |
| $function_to_add | フックする関数名（必須） |
| $priority | 優先順序（デフォルト値：10） |
| $accepted_args | フックした関数が受け入れられる引数の数 |
アクションフックの実行順序と使用例
| フック名 | 実行タイミング | 使用例 |
|---|---|---|
| login_enqueue_scripts | ログイン画面にデータが格納された時 | ログイン画面カスタマイズ |
| after_setup_theme | テーマのfunctions.php読み込み直後 ユーザー未認証 | テーマの初期化やオプション設定 |
| init | WordPress読込み完了しヘッダー送信前に実行 ユーザー認証済 | |
| widgets_init | ウィジット初期化 | ウィジットエリア追加 |
| wp_enqueue_scripts | JavaScriptやCSSがエンキューされた時 | JavaScriptやCSS読み込み |
| wp_head | wp_head関数が呼び出された時 | 自作テーマのカスタマイズCSS設定 |
| add_meta_boxes | 記事編集画面の読み込み時 | カスタムフィールドを追加する |
| embed_content_meta | ブログカード表示時 | ブログカードをカスタマイズする |
| save_post | 記事が保存された時 | |
| publish_post | 記事が公開された時 | XMLサイトマップ作成関数呼び出し |
JavaScript呼び出しに使用するアクションフック
自作テーマがJavaScriptエラーになってしまった原因は、5年前に自作したままでWordPressアップデートに対応していなかったからでした。
今まで使用していたJQueryプラグインが対応していないこともあり、WordPressが自動で読み込むJQueryをwp_deregister_script関数で読み込まないようにしていました。
wp_deregister_script('jquery')自分で用意したJQueryファイルの後にJavaScriptファイルを読み込んでいたので、問題なく動いていたのです。
JQueryプラグインをアップデート後、WordPressが自動で読み込むJQueryを使用するように修正したところ、jQuery is not definedエラーが発生するようになってしまいました。
一昔前までJavaScriptファイルの読み込みは、wp_headのタイミングで実行していたのです。wp_enqueue_scriptsフックなんてまだ無かったから。私の古いままのコードもそうなっていました。wp_headの実行順序は、wp_enqueue_scriptsの後なので、「JQuery見つからないんだけど！」と怒られていたのでした。JavaScriptもCSSもwp_enqueue_scriptsのタイミングで読み込むように修正しました。
WordPressテーマを作成してから5年ぐらい放置してしまっているので、他にもボロボロと古臭いままのコードが残っているかもしれません。エラーが発生する度に少しずつ直していこうと思います。
