My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

WordPressに追加したjQueryが効かない、その対処法は?

f:id:sntkk3:20180417225503p:plain

先日作成したパラメータ引き継ぎスクリプトWordPressにも流用しようとしたところ、まったく機能しない。
デバッグしてみるも、スルー。
コードは合っているはずなのに、なぜだろう?

ということで、原因と解決策を調べてみました。

ちなみに、先日のパラメータ引き継ぎスクリプトとは、こちらです。
times-diary.hatenablog.com


原因と解決策

原因

HTML/CSSサイトで使用しているjQueryWordPress内でそのまま利用しようとすると、このようなエラーが発生するようです。

そして、それは、なぜかと言うと、
WordPressでは、jQueryが通常使用する「$」という文字による関数名を未定義にしているため 」とのこと。
その理由は、他のjavascriptライブラリとのコンフリクトを避けるための配慮からのよう。

解決策

WordPressjQueryを記述した時、
jQueryがコンフリクトして動かなくなる、
そんな場合の対処法は、以下の通り、

jQueryで使用する「$」部分をjQueryですべて置換する」

というものです。
これにより「jQuery」で始まる関数名が正しく認識され、
コードが実行されるようになるみたいです。

というこで、早速、先日のパラメータ引き継ぎスクリプトWordPress用に書き換えました。
以下がそのコードになります。

jQuery(function(){
	jQuery('.url').click(function() {

	//aタグリンク先を取得
	var target_url = jQuery(this).attr("href");
	
	//パラメータを取得
	var str = retrieveGETqs();
	
	prm = decodeURIComponent(str);
	
	if (prm) {
    //target_urlに'?'を含む場合
      if (target_url.indexOf('?') != -1) {
    //追加パラメータの先頭文字列を'&'に置換
      jQuery('a.url').attr('href', target_url + '&' + prm);
        } else {
          jQuery('a.url').attr('href', target_url + '?' + prm);
                }
            }	
  })	
})


実際、上記のような書き換えにより、ちゃんと動くようになりました。

以上、ご参考まで。


【参考記事】
WordpressjQueryのコードが動かない」場合の対処方法 – 時にはWEBの話っ! : https://blog.aroundit.net/wordpress-jquery/