Skip to content
さきどりふぁくとり~
  • Webマーケティング
  • WordPress
  • SEO
  • YouTube
  • お問い合わせ
  • 求人情報

【JavaScript】WordPressでjQueryが動かない理由3点とその対処法

更新日:2021年9月15日
  • WordPressでjQueryを使おうとしたけど動かない。
  • jQueryの記述は間違っていないはずなのに読み込まれない。
こんな悩み抱えていませんか? この記事では、WordPressでjQueryを使用しようとした時に動かない典型的な例を解説したいと思います。

目次

  • 1 WordPressでjQueryが動かない理由とその対処法
  • 2 1.WordPressのjQueryは$が記述できない
  • 3 解決策
  • 4 2.JavaScriptの記述ファイル自体がリンク先に存在しない
  • 5 解決策
  • 6 jQueryの読み込みタイミングが他の要素の読み込みタイミングと合致していない
  • 7 参考URL

WordPressでjQueryが動かない理由とその対処法

WordPressでjQueryが動かない理由は大抵3つに絞ることが出来ます。
  • WordPressのjQueryは$が記述できない
  • JavaScriptの記述ファイル自体がリンク先に存在しない
  • jQueryの読み込みタイミングが他の要素の読み込みタイミングと合致していない
一つずつ順番に確認してみましょう。

1.WordPressのjQueryは$が記述できない

WordPressのテーマによっては標準のjQueryをWordPressの機能を使って読み込んでおり、その際に$が使えなくなるためです。 以下に動かないコードの一例を示します。
$(window).load(function () {
    $('#topImg').height();
});
このコードは標準でWordPressに搭載されているjQueryでは動作しません。 jQueryにはnoConflictという関数が用意されており、この関数は複数のjQueryを読み込んだ際に不具合が起きないようにするためのもので、 WordPressの標準装備のjQueryではこの関数が有効になっているため、$はjQueryの関数として認識されないのです。 簡潔に記述するためにこの記事では関数の仕組みまでは触れませんが、jQuery本家(英語)の参考URLを貼っておきますのでご参照下さい。

解決策

どうすればよいのかと言うと「$」を「jQuery」に置き換えるだけです。
jQuery(window).load(function () {
    jQuery('#topImg').height();
});
このようにすれば動くようになります。

2.JavaScriptの記述ファイル自体がリンク先に存在しない

この手の問題が発生するタイミングは主に運営サイトのドメインを変更したときです。 WordPressのローカルにjQueryの記述されたjsファイルなどを配置しており直接URLを指定していた場合に発生します。 上記はF12の検証ツールを利用して現在このブログのjQueryの読み込みURLについて見てみました。 検証ツールはWeb制作には欠かせないツールなので使い方を別記事で解説したいと思います。 この、内容を見てみるとURLが https://www.sakidori-factory.com/wordpress/wp-includes/js/jquery/jquery.js?ver=1.12.4 となっていますね。 https://www.hitozukiai.comの部分がドメインになりますが、ここが決め打ちでコーディングされていると他のドメインに差し替えた際にURLが見当たらないエラーが発生し動かなくなってしまいます。

解決策

urlを取得する際はドメイン部分とフォルダ階層部分を必ず分けて記述し、ドメインが変わっても対応可能なようにコーディングするのが好ましいです。 具体的にはget_template_directory_uri()というWordPressの関数を利用します。 この関数はWordPressで現在読み込んでいるテンプレートのルートディレクトリを取得するためのものです。 別の記事でget_template_directory_uri()の使い方について解説していますので見てみて下さい。

jQueryの読み込みタイミングが他の要素の読み込みタイミングと合致していない

この問題は、取得する要素が動的に生成されている場合や画像等の読み込み順序が関係してくる場合に発生します。 Webページの生成順序については深い理解が無いと調整が難しく、記述する箇所によっても動作が異なります。 以下の記事が参考になります。
【WordPress対応】jQueryを読み込まないときは実行順序が違うかも?
【WordPress対応】jQueryを読み込まないときは実行順序が違うかも?
jQueryを使って要素に高さや横幅などを設定したいが何故が設定できない。とお悩みですか? この記事ではjQueryが何故読み込まれないのかを解説しています。 イマイチjQueryの書き方について理解していない方は必見です!

参考URL

jQuery.noConflict

カテゴリー

  • AWS (3)
  • SEO (50)
  • SNS (16)
    • Facebook (7)
  • Webマーケティング (38)
  • WordPress (62)
  • YouTube (43)
  • プライバシー・ポリシー (1)
  • 未分類 (2)

プロフィール

ブログ運営・執筆または監修:
株式会社ルミナスネットワークス
https://www.luminous-networks.co.jp

代表取締役:生田 寿行

Webページ制作およびWebアプリケーションの設計~製造に至るまでをすべて通貫して行う独立系SIerです。
弊社はWebマーケティングに強いSIerとしての地位目指し、WEBページを制作することだけでなく、その先のWebマーケティングにも関係する内容を取り扱うことで、高いコストを掛けて制作したWEBページが無駄にならないようお客様を導くことを目標としております。 YouTubeマーケティングやその他SNSについても幅広い知見をもとにお客様をサポートして参ります。

本ブログで記載している内容は、必要に応じて環境を構築し、実際に調査・検証を行っており、より再現性・統計的な正当性の高いデータを目指したものとなっております。
参考にして頂けましたら幸いです。

投稿されている記事に関しまして、もっと深く知りたいという事がございましたら、無料で相談を受け付けておりますのでご遠慮無くお問い合わせください。

お仕事のご依頼・お問い合わせ

目次

  • 1 WordPressでjQueryが動かない理由とその対処法
  • 2 1.WordPressのjQueryは$が記述できない
  • 3 解決策
  • 4 2.JavaScriptの記述ファイル自体がリンク先に存在しない
  • 5 解決策
  • 6 jQueryの読み込みタイミングが他の要素の読み込みタイミングと合致していない
  • 7 参考URL
© 2023 さきどりふぁくとり~