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

f:id:sntkk3:20180417225503p:plain

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

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

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

原因と解決策

原因

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

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

解決策

WordPressにjQueryを記述した時、
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);
                }
            }	
  })	
})

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

以上、ご参考まで。

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