jQuery Ripplesを反映させる方法

Question

https://black-shiva.com/css3_technique/animation/ripples/
上記のサイトを参考に水面に広がるアニメーションをbodyに反映させたいと考えています。
localのwordpressで制作しています。
現在の以下のようになっていますが反映されていません。
https://github.com/sirxemic/jquery.ripples/commit/e90bd54ee5d2b23d04a208ad1248456c42abb289
を見るとバージョンが0.6.3と書かれているので<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
上記の3.3.1を0.6.3に変えてみましたが反映されませんでした
どなたかわかる方いましたらご教示していただけると幸いです。

--footer.php---


	<!-- footer -->
	<footer id="footer">
		<div class="footer-inner">
			<div class="footer-pagetop">
				
					
  					
			</div>

		
			
			<div class="footer-bottom">
				<div class="footer-left">
					<p class="copyright">Copyright © kenta All Rights Reserved.</p>
				</div>
				<div class="footer-right">
					<a class="opacity"  href="http://caina-xsrv01.xsrv.jp/neby/columns" class="footer-under-area-column">	kenta'sコラム</a>
					<svg id="email-black-24dp" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
					  <path id="パス_7" data-name="パス 7" d="M0,0H24V24H0Z" fill="none"></path>
					  <path id="パス_8" data-name="パス 8" d="M20,4H4A2,2,0,0,0,2.01,6L2,18a2.006,2.006,0,0,0,2,2H20a2.006,2.006,0,0,0,2-2V6A2.006,2.006,0,0,0,20,4Zm0,4-8,5L4,8V6l8,5,8-5Z" fill="#fff"></path>
					</svg>
					<a class="opacity" href="http://caina-xsrv01.xsrv.jp/neby/contact" class="footer-under-area-contact">
						お問い合わせ
					</a>
					
					<ul class="footer-under-area-list">
						<li><a class="opacity"  href="http://caina-xsrv01.xsrv.jp/neby">このサイトについて</a></li>
						<li><a class="opacity"  href="http://caina-xsrv01.xsrv.jp/neby">プライバシーポリシー</a></li>
						<li><a class="opacity"  href="http://caina-xsrv01.xsrv.jp/neby">サイトマップ</a></li>
					</ul>
					
				</div>
			</div>
			

		</div><!-- /inner -->
	</footer><!-- /footer -->
	
	<!-- ここからが追記部分 -->
	


	
	

	<?php wp_footer(); ?>
	


	
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="./js/script.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
	
	
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/jquery.ripples-min.js"></script>
</body>

</html>

/* drawer */
jQuery('.drawer-icon').on('click', function () {
	jQuery('.drawer').toggleClass('m_checked');
});

jQuery(window).on('scroll', function ($) {
	if (100 < jQuery(this).scrollTop()) {
		jQuery('.floating').show();
	} else {
		jQuery('.floating').hide();
	}
});

/* SmoothScroll */
jQuery('a[href^="#"]').click(function () {
	var header = 0; // jQuery( '#header' ).height();
	var speed = 300;
	var id = jQuery(this).attr('href');
	var target = jQuery('#' == id ? 'html' : id);
	var position = jQuery(target).offset().top - header;
	if (0 > position) {
		position = 0;
	}
	jQuery('html, body').animate(
		{
			scrollTop: position
		},
		speed
	);
	return false;
});




  jQuery(function () {
    $('.fa-search').click(function () {
		$('.search').toggle();
		
    });
});

//jQuery(function () {
//    //$('.menu-btn').click(function () {
//	//	$('.hamburger').toggle();
//	//	$('.header-right-inner').toggle();
//	//	$('menu-btn-wrapper').toggle();
//	//	///$('body').addClass('fixed');
//	//});
//	//$('menu-btn').click(function() {
//	//	
//	//	$('body').removeClass('fixed');//背景固定を解除
//	//	
//	//	return false;//<a>を無効化
//	//  });
//});

	jQuery('.menu-btn').click(function(e) {
		e.preventDefault();
		//data-以下が「target」になってる属性の値（for-modal）を取得
		//let target = jQuery(this).data("target");
		$('.hamburger').toggle();
		$('.header-right-inner').toggle();
		$('menu-btn-wrapper').toggle();
		
		//jQuery('.' + target).show();
		
		
		
		//targetの値と同じクラス名を持った要素にis-showを追加
	
	
		return false;

		

	
	});

	jQuery(".close-btn").on("click",function(){
		$(".hamburger").hide();
		$('.header-right-inner').toggle();
		$('body').attr('style', '');

		$( '.wrapper' ).attr( { style: '' } );
		$( 'html, body' ).prop( { scrollTop:posi } );
	});

  

  

  jQuery('.footer-pagetop').click(function () {
	jQuery('body,html').animate({
	  scrollTop: 0
	}, 500);
	return false;
  });

  jQuery('.category-menu ul li').click(function() {
	jQuery('.category-menu ul li ').removeClass( 'click-grayline' );
	jQuery(this).addClass( 'click-grayline' );
	return false;
  });

  jQuery('.to-news-article').click(function() {
	jQuery('.category-all-content').hide();
	jQuery('.category-recruit-content').hide();
	jQuery(".category-news-content").show();
	return false;
  });

  jQuery('.to-content-article').click(function() {
	jQuery('.category-news-content').hide();
	jQuery('.category-recruit-content').hide();
	jQuery(".category-all-content").show();
	return false;
  });

  jQuery('.to-recruit-article').click(function() {
	jQuery('.category-news-content').hide();
	jQuery(".category-all-content").hide();
	jQuery('.category-recruit-content').show();
	return false;
  });



  

jQuery(window).on("scroll", function($) {
	if (jQuery(this).scrollTop() > 200){
	  jQuery('.scroll-down').show();
	} else {
	  jQuery('.scroll-down').hide();
	}
  });

  

  jQuery(window).on("scroll", function($) {
	if (jQuery(this).scrollTop() > 7000) {
	  jQuery('.scroll-down').hide();
	} 
  });



  jQuery(document).ready(function () {
    // swiperをイニシャライズ
    var mySwiper = new Swiper ('.swiper-container', {
      // オプションのパラメーターを指定
      direction: 'horizontal',
      effect: "flip",
      loop: true,
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      })
  	});
  


---該当場所---
	
	  jQuery(document).ready(function() {
		jQuery('body').ripples({ //波紋をつけたい要素の指定
		resolution: 700, //波紋の広がりの速度（値が大きいほど遅くなる。）
		dropRadius: 10, //波紋の大きさ（値が大きいほど大きくなる。）
		perturbance: 0.1 //波紋による屈折量（値が大きいほどブレる。）
		 });
		});
		
  
  






//hljs.initHighlightingOnLoad();//

Comments

[m.ts10806]

>上記の3.3.1を0.6.3に変えてみましたが反映されませんでした

0.6.3はRipplesのバージョンであってjQueryは関係ないですよ。

[m.ts10806]

というかjQueryを二重に読み込んでるのも問題では。

[kenta-wata]

<script src="js/jquery.ripples.js"></script>
<script src="./js/script.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

</body>
上記のように変更してみましたが反映されませんでした。

[m.ts10806]

やってること滅茶苦茶です。

[kenta-wata]

じゃあ解決コードコピペして送ってくれますか？
そんなこと言われてもこっちはわからないので

[m.ts10806]

どこに触れたのか分かりませんが、あなたの環境知らないので無理です。
他者ができるのは客観的なアドバイスだけ。作業依頼なら業者へどうぞ。
プログラムは書いたとおりにしか動かないので、雑に思ったことを手あたり次第試しても動きません。
「定義」→「定義したものを利用」の原則は守りましょう

という回答は既にしています。

[kenta-wata]

どこに触れたのか分かりませんが、あなたの環境知らないので無理です。
他者ができるのは客観的なアドバイスだけ。作業依頼なら業者へどうぞ。
→いまいちお互いの理解が一致していないようですね。

Answer 1

jQueryプラグイン利用の原則は

読み込み順：
0. jQuery本体js
0. jQueryプラグイン本体js
0. jQueryプラグイン利用の記述

です。

これは「定義されているものを利用している」ため。
なのでjQuery本体js読み込ませてないのにjQueryプラグイン本体js読み込ませても使えないし、
jQueryプラグイン本体js読み込ませてないのにjQueryプラグイン利用の記述をしても使えません。
それぞれ依存関係にあります。

エラー

a();
let a = function(){console.log("test")} 

動作する

let a = function(){console.log("test")} 
a();

もちろんHTMLも整合性がとれている必要があります（プラグインをあてたい要素を正しく指しているか、要素は確実に参照できる状態か）

WordPressならWordPressの諸々影響受ける可能性もあります。
確か、WordPressではjQuery本体は何かしない限りデフォルトで読み込まれるように組まれているはずなので、
自前で読み込ませる必要はなかったはずで。
複数バージョンを同時に入れると機能的な不整合が起きて不具合の要因に成りかねません。

ひとまず、WordPress度外視で、静的HTMLで最小構成で組んでプラグインが動作するか確認されてはどうでしょうか。

READMEと原本コード読んだ限り、jQueryバージョンの言及はないのでjQuery本体バージョンの依存性はないと考えます。

Comments

[kenta-wata]

jQueryプラグイン利用の原則は

読み込み順：

jQuery本体js
jQueryプラグイン本体js
jQueryプラグイン利用の記述
です。
→この流れを理解していなかったようです。申し訳ございません。

自前で読み込ませる必要はなかったはずで。
複数バージョンを同時に入れると機能的な不整合が起きて不具合の要因に成りかねません。

ひとまず、WordPress度外視で、静的HTMLで最小構成で組んでプラグインが動作するか確認されてはどうでしょうか。
→かしこまりました。そのような方法で一度試してみます。

[kenta-wata]

既存の静的ファイルで試してみたら反映されました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jquery.js/jquery.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
<!-- drawer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/js/drawer.min.js"></script>
<script src="jquery.js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script>
$(document).ready(function() {
$('.drawer').drawer();
});
</script>
<script src="jquery.js/jquery.ripples-min.js"></script>
<script>
$(document).ready(function() {
$('.contact').ripples({ //波紋をつけたい要素の指定
resolution: 700, //波紋の広がりの速度（値が大きいほど遅くなる。）
dropRadius: 10, //波紋の大きさ（値が大きいほど大きくなる。）
perturbance: 0.1 //波紋による屈折量（値が大きいほどブレる。）
});
});
</script>

上記が静的ファイルのコード

wordpressの方で以下のように記述すると<script src="./js/jquery.ripples-min.js"></script>の下の部分のかっこが所々赤色になって表示され（vscodeで編集しています。)反映されていないようなので
その部分をscript.jsに記入してみましたが反映されませんでした。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./js/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
<script src="./js/jquery.ripples-min.js"></script>
<script>
jquery(document).ready(function() {
jquery('.body').ripples({ //波紋をつけたい要素の指定
resolution: 700, //波紋の広がりの速度（値が大きいほど遅くなる。）
dropRadius: 10, //波紋の大きさ（値が大きいほど大きくなる。）
perturbance: 0.1 //波紋による屈折量（値が大きいほどブレる。）
});
});
</script>