JavaScriptがWordPressアップデートでエラーになった時の解決方法【アクションフックまとめ】

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読み込み直後
ユーザー未認証
テーマの初期化やオプション設定
initWordPress読込み完了しヘッダー送信前に実行
ユーザー認証済
widgets_initウィジット初期化ウィジットエリア追加
wp_enqueue_scriptsJavaScriptやCSSがエンキューされた時JavaScriptやCSS読み込み
wp_headwp_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年ぐらい放置してしまっているので、他にもボロボロと古臭いままのコードが残っているかもしれません。エラーが発生する度に少しずつ直していこうと思います。

Related Posts