WordPress jQuery読み込み・書き方 動かないエラー時の注意点

WordPress

WordpPressでjQueryを利用する際の書き方と注意点

2022年7月21日

WordPressでjqueryのスクリプトを扱う際に、「うまく動かない」「$ is not function...」のようなエラーがで困っているという人も多いのではないでしょうか。

WordPressでjqueryを扱う際にはいくつかの注意願があります。

本記事では、WordPressでjqueryを使う際の注意点や書き方について解説していきます。
 


 

WordPressのjQueryを使う際の注意点

ここでは、WordPressでjQueryを使う際に動かなくなる原因になりやすいものについて解説していきます。
 

【注意点1】WordPressでjqueryを記述する場合は$を使わない

標準のjQueryとWordPressのjQueryで書き方は基本的には同じですが、 $(ドルマーク)の代わりにjQueryと記述することが大きな特徴です。

■標準のjQueryの書き方の例※WordPressでは基本的にエラーで動作しない

 

■WordPressのjQueryの書き方の例

 

WordPressでは初期状態では内包されているjQueryライブラリを利用するように動作しています。
WordPress jqueryライブラリが読み込まれている

上記のjqueryファイルにはnoConflictという関数が含まれていて、$が使えないようになっています(WordPressで使っている他のライブラリとの衝突(同じ名前の関数を使ってしまうことで動作が不安定になる)を避けるため)。
 

"$"を使うとエラーで動かない場合が多い

"$"を使ってしまうことが、一番多いjQueryが動かなくなる原因です。下記は$を使ってエラーが起きている画面です。 $ is not function...というエラーが発生しています。

 

繰り返しになりますが、WordPressのjqueryを利用する場合$の代わりに「jQuery」と記述する必要があります。

ネット上に記載のあるスクリプトでもWordPressを想定していない場合"$"を使っているものも多いため、WordPressに組み込む場合は$をjQueryに修正する必要があります。

■(動作不可)"$"を使って動かないスクリプト

 

■(動作可能)$をjQueryに置き換えたスクリプト

 

なお、単純に"$"を全て"jQuery"に変える以外にも、"jQuery(function($){"と"});"でコードを囲むという方法もあります。 以下に例を記載しますので参考にしてください。

■(動作可能)"jQuery(function($){"と"});"でコードを囲んだスクリプト

 
 

【注意点2】jqueryのスクリプトを読み込む位置はjqueryライブラリを読み込んだ後にする

2つ目の注意点は、jqueryのコードを読み込む位置はjqueryライブラリを読み込んだ後にするです。

WordPressではWordPressに内包されているjqueryライブラリがwp_headという関数で読み込まれています。 そのため、jqueryスクリプトは、jqueryライブラリの後に読み込むように制御する必要があります。

■WordPress表示画面のソースコード jqueryライブラリが読み込まれている
WordPress jqueryライブラリが読み込まれている

functions.phpでjqueryスクリプトを読み込む

WordPressではfunctions.phpでjQueryを読み込むやり方が一般的です。

get_template_directory_uri はテーマフォルダまでのパスを返す関数です。 WordPressでパスを記載する時によく使いますので、覚えておくと便利です。
 

上記の引数の意味は下記のとおりです。

読み込み関数の引数を解説します。

  • $handle・・・スクリプトを区別するための任意の名称(必須)
  • $src ・・・スクリプトのパス(必須)
  • $deps ・・・スクリプトの読み込み順を配列で指定(依存関係がある場合に指定)
  • $ver ・・・スクリプトのバージョン指定
  • $in_footer ・・・スクリプトの読み込み位置を指定。指定方法はtrueでbodyタグの終了直前、falseでheadタグの終了直前。デフォルトはfalse。

 

※下記のようにheader.phpなどで直接記述しても動作はしますが、細かい動作制御・一元管理のため、上記のようにwp_enqueue_script(xxxx)で読み込むことが一般的です。

■単純にwp_head()の後に独自のjqueryのスクリプトを読み込んだ例

 

【注意点3】2重でjqueryライブラリを読み込ませない

前述の通り、とくに何もしていなくても、通常はWordPressに内包されているjqueryが読み込まれています。

それに気づかずに、標準のjqueryを読み込ませると2種類のjqueryライブラリが読み込まれてしまい、スクリプトが正常に動作しなくなる場合があります。

■気づかずに2重でjqueryライブラリを読み込んでいる例

 

独自テーマを使っている際に起こりやすいので、 重複して読み込んでいないか確認してみてください。
 

そのほかの原因はconsole.logで確認する

上記以外の原因を確認した上でスクリプトが動かない場合は、ブラウザの検証画面から確認する方法もあります。

スクリプトが動かないファイルを開いているブラウザで"F12"を押すと、検証画面を開くことが出来ます。

そこに"コンソール"と呼ばれるウインドウがあるのでそこで、起きているエラーを確認することが出来ます。 以下に、"$"を使ってエラーが起きた場合の状態を記載していますので、参考にしてください。


 

(補足)WordPressのjQueryを使わないようにする方法

WordPressのjqueryを使わないようにする方法もあります。

ただし、WordPressで内包しているjqueryを利用する前提のプラグインやテーマもあるため、動作上不具合が起こる可能性もあるのであまり推奨はされていません。

あえてWordPress内包のjqueryライブラリを利用せず独自にjqueryライブラリを読み込みたい場合、以下のコードをfunctions.phpに記載いただければ、 WordPressのjQueryの読み込みを止め、標準のjQueryを読み込むことが出来ます。

 

まとめ

今回のまとめです。今回は、WordPressでjqueryを使う際の注意点や書き方について解説しました
 
■よくあるエラー「$ is not function...」

 

気をつける点としては大きく2点。「$のかわりにjQueryと記述すること」「WordPress内包のjqueryライブラリより後ろの方でjqueryスクリプトを読み込むこと」です。

なお、これからWordPressを始めようと考えている人向けに、おすすめのレンタルサーバーを「【おすすめレンタルサーバー比較総まとめ】WordPress対応5社」でご紹介していますので、レンタルサーバーご検討の方はあわせてご参考いただけると幸いです。

今回は以上になります。最後までご覧いただきありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-WordPress