WordPressで何かカスタマイズがしたい場合、jQueryというものが必要になる場合があります。

私の場合もカスタマイズでどうしても jQuery が必要になり、恐る恐る使ってみたところ、なぜか動作をせずにさんざん悩みました。解決法は至って単純でポイントは以下3点。

  • jQueryが使える環境になっているか
  • コードはワードプレス用になっているか
  • コードの読み込みタイミングは問題ないか

私のように ワードプレスで jQueryを使う初心者にむけて、参考になりましたら幸いです!

jQueryが使える環境

何もする必要はない

jQueryが動作しない、ということで、まず確認したいのが、そもそもワードプレスでjQueryが使える環境になっているか。

私の場合テーマは賢威を使ってますが、もしかしたら jQuery 自体を読み込んでないのでは?と header.php にそれ用のコードを追加したりしましたが、結論としては、jQuery はワードプレスに標準的に用意されているので何もする必要はないようです。

ということから、jQueryの使い方を間違えなければ、普通に動作する、ということになるので、動かない、という場合には、実際のコードやそのコードの読み込みタイミングを疑ってみるのが良いです。

jQuery読み込みコードを追加してみたい

jQueryを使う環境としてはワードプレスでは何もする必要はない、といっても、jQueryが動作しない原因はそこにあるかも、と気になる場合もありますね。

ということで、jQueryの読み込み用のコードを追加して試したい、という場合には、以下を header.php 内の wp_head(); より前に入れてみて何か改善するか確認してみるのも良いと思います。(私も実際やってみましたし ^-^;)

実際に、header.php 内にコピペした例が以下。参考までに。

テーマ「賢威」の header.php 内にjQueryの読み込み用コードを記述した例

1行目の「wp_deregister_script(‘jquery’);」は、ワードプレスがjQueryを自動で読み込まないようにするためのもの。(2重で読み込んでしまって何か不具合が起きないようにするためのもの)

2行目の「wp_enqueue_script(‘jquery’, ‘https://~」は、このバージョンの jQuery を読み込んでくれ、というもの。(ここでは2020年7月時点で最新のバージョン 3.5.1 を使ってね、と指定している)

ワードプレス用の記述の仕方

ワードプレスではすでにjQueryが使えるようになっている、k環境的には問題ないとすると、次に疑うべくは jQuery のコードが正しいかどうか。

jQuery にはそれ用の記述の仕方がありますが、ワードプレスで使う場合には、ワードプレス用のjQueryの記述の仕方が必要です。

これが中々分からず(というか気が付かづ)「jQueryが動作しない!」の筆頭の理由になるかも知れません。

一般的なjQueryの記述

ネットで色々検索して jQuery の記述をみると以下の形を基本となってますが、ワードプレスの場合、これでは動作しないんですね。

(このコードは、h2(見出し2)の文字色を赤色にせよ、という単なるサンプルなので気にしない)

ワードプレスでjQueryのコードを動作させるには先頭の「$(function()」にある「$」のマークを変えないと、ワードプレスは正しく jQueryのコードと認識しないようです。(何かと競合してしまい動作しなくなってしまうらしい)

ワードプレスでの記述の仕方

そこで以下のように変更が必要。

先頭の「$」マークを「jQuery」に置き換えただけ。その他は一切変更してませんが、これでワードプレスでも正しく動作するコードになりました。

ということで、ワードプレスで jQuery を正しく動作させるには以下の形で書けばOK!となりますね。

(これが分かるまで結構な時間がかかった...)

読み込みのタイミング

jQueryを使う環境も問題ない、jQueryの書き方も分かった、でもなぜか動作しない!

そこで最後のポイントとなるのが、jQueryで書いたコードをいつ読み込んでいるのか、というタイミング

考えて見れば分かりますが、HTMLのコードに対して、例えば先ほどのサンプルのように特定の箇所の文字色を変えたい、という場合、HTMLのコードを全て読み込んで初めて、そのHTMLコードに対して「文字色を変える」、ということができるわけです。

HTMLコードを読み込む前に、先に jQuery のコードを読み込んでしまうと、何か変更したい、という箇所がまだ存在しないので動作しようがない。

つまり、jQueryのコードは、HTMLコードが読み込まれた後で読み込まないと、見た目的に動作してない、ということになりますね

私の場合、CSSファイルを外部読み込みする感覚で、jQueryのコードをヘッダーで読み込むようにしていたのが大間違い。

jQueryのコードはCSSやJavaScriptを挿入できる「Custom CSS & JS」というプラグインを使って書いてましたが、最初「Header」で読み込む、としてました。

それを「Footer」で読み込む(つまり最後に読み込む)としたところ、やっとのことで動作した、という感じです。

jQueryを使う環境も大丈夫、コードもこれで間違いないはず!、でも動かないよ~、という場合には、jQueryのコードをどのタイミングで読み込んでいるのか、一度確認してみると幸せが一気に訪れるかもしれません。

今回のポイント

ワードプレスで jQuery が動作しない場合のポイントは以下3点。

  • jQueryが使える環境
    • ワードプレスは標準でjQuery を読み込んでくれているので特に何もする必要なし
  • コードはワードプレス用に
    • 「$(function()」を「jQuery(function()」に変える必要あり
  • コードの読み込みタイミング
    • jQueryのコードはヘッダーではなく、フッターなど最後にする

この3点を押さえておけば、後は jQuery のコードだけの問題になると思います。

なぜに動かないんだ!という場合には、上の方にあるような簡単なサンプルコードを書いてまず動かしてみる、動作を確認したうえで、実際に追加したいコードを書いて試してみる、という順で進めてみてください。

また、ブログやサイトで収益化を図りたいがやり方が分からない、ネットビジネスで収入を得たいが、何をやったらいいか分からない、という場合には、是非以下のメルマガにも登録してみてくださいね。

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短最速で月収10万円を手に入れる方法 ~

苗字(必須)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

お預かりした情報は保護されます

迷惑メールは一切配信されませんので、ご安心くださいね