KikuchiWordPressでjQueryを使うとスクリプトエラーに悩まされることが多々あります。この原因をWordPressの仕様だと気づかない人は多いです。そこでWordPressにおけるjQueryのメカニズムをまとめました。WordPressは16年の歴史があるが、その中でずっとjQueryの独特な使い回しに関する本質的理解は進んでいません。通常のAPPに記載する方法ではWordPressではエラーになることが多く、しかもその原因がWordPressの仕様であることに時間を使ってしまった体験は誰しもあるはずです。私自身もう何度目かわかりませんが、つい先日またもやこのjQueryスクリプトの使い回しに悩まされたので、使い方をまとめてしまうことにしました。Modeについて理解しなおそうと思います。気づいていると思いますが、WordPressはコア機能としてjQueryを読みこんでいます。このコアに実装されているjQueryの仕様が、他のAppで書いたjQueryスクリプトがWordPressで機能しない最大の原因です。「WordPressのjQueryを無効化してオリジナルのjQueryを読み込む方法」を選択する人は多いです。(この方法はバッドプラクティスです。)しかし、一方でWordPressのコアに搭載されているjQueryが何故この様な仕様になっているのかを理解している人は多くありません。Modeを実装したものです。これは他のJSライブラリとの思わぬコンフリクトを防ぐ目的であえて導入されています。端的に特徴を表すと「$」マークが使えない様になっています。「$」とはそもそも「ショートカット」そもそも「$」はjQueryのショートカット構文であり、実装当初の書き方ではありません。$(this).hide();})この書き方はショートカットを利用しています。このショートカットの書き方に関する補足説明(というか注意)はきちんとjQueryの公式サイトに記載されています。page.訳:jQueryのショートカット記法として「$」の利用を可能にしていますが、「$」は他のJavaScript系ライブラリとコンフリクトを起こしやすいので注意してください。jQuery公式サイトより私たちが見慣れている記法はショートカットなので、本来は次の様に書くべきなのです。jQuery(this).hide();})これを踏まえて、プラグインで拡張が前提となるWordPressでは「このショートカット記法」を最初から無効にしているわけです。WordPressコアのjQueryでの正しいjQueryスクリプトの書き方ここまでの説明で、何故「WordPressのjQueryを無効化してオリジナルのjQueryを読み込む方法」がバッドプラクティスなのかは理解いただけたと思います。なると、次に考えるべきはWordPressコアのjQueryで正しくjQueryを書く方法になります。jQueryをFooterに記載するなら・・・jQueryをFooterに記載するのであれば、匿名関数で「$」を囲ってあげると良いでしょう。);jQueryをheadタグ内に記載するなら・・・jQueryをheadタグ内に記載するのであれば(パフォーマンスの観点からオススメしません。)、下記の様な書き方がベストプラクティスです。{の様にサイト読み込み直後のタイミングで実行するためにはこの書き方がベストです。(匿名関数は読み込み時で実行されるので、headタグ内向けの書き方ではありません。)jQueryのnoConfilctモードを実装するこれまでの2つのコードの使い回しをきにすることなく、実装したい場合は下記の様にnoConflictモードのための関数を変数に定義してあげれば良いです。$j(this).hide();})jQueryの本来の書き方を使う私が採用することにした方法です。そもそもjQueryは「$」は「jQuery」のショートカット記法なのでした。普通にオリジナルの書き方をしてあげれば何も迷うことはないという発想から採用しています。jQuery(this).hide();})まとめこの様に、一回きちんと調べるとWordPressが何故jQueryの仕様をカスタマイズしているのか理解もできますし、正しい対処方法もわかります。同様の問題で困っている人は参考にしていただけると幸いです。HACKHomeShareFollowTop。