Skip to content
さきどりふぁくとり~
プラグインインストール
GoogleAnalytics
GoogleAdsense
jQuery

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

更新日:2020年1月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.hitozukiai.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は動作しているのにタグにスタイルが反映されない。 このよ…

参考URL

jQuery.noConflict

関連記事

WordPressで効果的なテーマ「cocoon」の使い方

WordPress

【簡単】WordPressプラグインで電話番号を表示する方法

WordPress

WordPressで簡単に見積もり依頼ページを作成出来るプラグインを紹介

WordPress

WordPressで画像挿入時のHTMLをカスタマイズする方法

WordPress

プロフィール

ブログ著者:
株式会社ルミナスネットワークス

Webページ制作およびWebアプリケーションの設計~製造に至るまでをすべて通貫して行う独立系SIerです。
Webマーケティングにも力を入れており、AIを用いたデジタルマーケティング最適化システムの設計開発も行っております。

こちらで記載している内容は、必要に応じて環境を構築し、実際に調査・検証を行っておりますので、より再現性の高いデータとなっております。
参考にして頂けましたら幸いです。

株式会社ルミナスネットワークス代表取締役
Twitter>
会社HP>
お仕事のご依頼・お問い合わせ>

最近の投稿

  • YouTube収益化済みアカウントの販売がブラックな理由
  • 【簡単開設】YouTube収益化にGoogleアドセンスが必要
  • YouTubeの収益化審査に落ちたときにチェックするポイント
  • YouTube収益化のため審査を最短で通る方法は?
  • 2020年最新!YouTube収益化の条件と収益化方法

カテゴリー

  • conohaWING (1)
  • JavaScript (3)
    • jQuery (3)
  • PHP (2)
  • SEO (18)
  • Webマーケティング (3)
  • WordPress (62)
    • Favicon (5)
    • インストール (2)
    • プラグイン (32)
    • 使い方 (1)
  • YouTube (10)
    • 副業 (1)
    • 収益化 (10)
      • 審査 (2)
      • 著作権 (1)
      • 設定 (3)
        • スマホ (1)
  • お名前ドットコム (1)
  • アクセスアップ (5)
  • アクセス解析 (5)
    • GoogleAnalytics (4)
  • アフェリエイト (10)
  • プライバシー・ポリシー (1)
  • マネタイズ (16)
    • GoogleAdsense (10)
  • 未分類 (3)

アーカイブ

  • 2021年1月 (4)
  • 2020年12月 (5)
  • 2020年8月 (20)
  • 2020年7月 (26)
  • 2020年6月 (6)
  • 2020年5月 (2)
  • 2020年4月 (10)
  • 2020年3月 (11)
  • 2020年2月 (10)
  • 2020年1月 (15)
  • 2019年12月 (1)
  • 2017年12月 (2)
  • 2017年11月 (1)

目次

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