お問い合わせはコチラから

WordPressでjQueryの$でエラーが出た時の対処方法

サイト運営

多くの人がjavascriptをネットで公開しているのですが、jQueryを使ったJavascriptをWordpressでそのまま適用すると$がエラーになって動かないことが多いです。

そもそも、検証ツールのコンソールを使わないとJavascriptのエラーがあるのかどうかもわからないので、初心者は動かなくて悩むのではないか、とおもいます。

最近、jQuery離れが進んでおりますが、個人的にはjQueryで開発スピードが上がるのであれば、デメリットよりもメリットの方が大きいと思っています。jQueryだからダメとかダサいというのはちょっと違うのではと思っています。

この記事ではWordpressでjQueryのスクリプトを使う時に$のエラーを回避する時の方法をまとめておきたいと思います。

WordPressでは、$はjQueryのショートカットではない

WordPressには、Compatibility modeというのがあって、$をjQueryのショートカットとして使えないようになっています。

対処方法1:$をjQueryに置き換える

これは一番単純な方法ですが、ソースコードが汚くなってしまうので、出来れば避けたい方法です。そもそも、そうしたくないからjQueryを$に置き換えているわけですから。

/* Regular jQuery */
$('.hideable').on('click', function() {
  $(this).hide();
})

/* Compatibility Mode */
jQuery('.hideable').on('click', function() {
  jQuery(this).hide();
})

 対処方法2:jQuery Stealth Modeを使う

対策としては、こちらが本命になるとおもいます。

jQueryのスクリプト全体を囲むことで、$をそのまま使うことができるようになります。

どちらを使っても同じ効果が得られますが、無名関数の方が見た目はスッキリします。

 無名の即時関数で囲む

もともと、jQueryのスクリプトに、$(document).ready(function(){が無い場合、この方法がおススメです。

(function($) {
	
  $('.hideable').on('click', function() {
    $(this).hide();
  })
	
})( jQuery );

document-ready functionで囲む

もともと、jQueryのスクリプトに、$(document).ready(function(){がある場合、書き換えれば済むので、この方法がおススメです。

これは画像などを除いて、HTML=DOMの読み込みが終わったらfunction()の中の処理(=なにかしらの処理)を実行するという意味です。

jQuery(document).ready(function( $ ) {
	
  $('.hideable').on('click', function() {
    $(this).hide();
  })
	
});

対処方法3:“No Conflict” Modeを使う

$の代わりに使う記号を指定することで、jQueryと書かなくても$の様な記号を使うことができます。

自分でスクリプトを書く場合には、使える方法だと思います。

この方法で、既にあるスクリプトの$を置き換えてエラーを回避するというのはjQueryに置き換えても同じなので、あまりよい方法ではないかなと思います。

var $j = jQuery.noConflict();

対処方法4:$を使えるようにする

WordPressに同梱されているjQueryを使用しているための制限なので、CDNなど他のjQueryを読み込むことで、$を使えるようになります。

まとめ

Bootstrap5ではjQueryは使われなくなるようですが、ちょっとしたスクリプトを書くときや、jQueryのプラグインを使うのは、今後もしばらく無くならないと思いますので、WordpressでjQueryが動かない時には、上記の方法で対処できると思います。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました