Wordpress에서 jQuery를 사용하여 [웨이브 움직임] 도입

이번에 참고한 사이트
htps : // ㎃진 c. 이. jp/317994

우선 준비하는 단계에서 위의 두 번째 URL의 "소스 코드를 설치한다"의 앞까지 참고로했습니다
jQuery 사이트에서 jQuery 다운로드
htps : // j 쿠에 ry. 코 m / 도 w 응 아 d /

이 기사 작성 단계에서는 jQuery_3.5.1 버전이었습니다.

htps : // j 쿠에류. 코m/
jQueryUI는 같은 버전이었습니다.

ぁtp://다 에에아아레레l. 코 m/라이언 d로 ps/
위 URL에서 Github에 액세스하여 zip으로 다운로드

압축을 풀면 raindrops.js의 코드$.widget(...jQuery.widget(...로 다시 작성하십시오.

FTP 사용 지금 사용중인 상위 테마의 js 폴더에
· raindrops.js
· jquery-ui.js
· jquery-3.5.1.min.js
넣어

※ 나는 stingerplus2라는 테마를 사용하고 있기 때문에 테마 내의 js 폴더에 넣습니다.


완료되면
Wordpress에 로그인하고 테마 편집 "functions.php"의 ?> 이전에 다음을 입력하십시오.
// JavaScriptの読み込み
function my_enqueue_script() {
wp_enqueue_script('jquery-3.5.1.min', get_template_directory_uri().'/js/jquery-3.5.1.min.js', array(), '3.5.1', true);
wp_enqueue_script('jquery-ui', get_template_directory_uri().'/js/jquery-ui.js', array(), '1.12.1', true);
wp_enqueue_script('raindrops', get_template_directory_uri().'/js/raindrops.js', array(), '', true);
}
add_action('wp_enqueue_scripts','my_enqueue_script');
숫자 '3.5.1', ​​또는 '1.12.1'은 다운로드한 jQuery의 버전에 맞추어 주세요
파마 링크 업데이트도 잊지 않고

이번에는 화면 하단에 표시하고 싶었으므로 [footer.php]의 </body> 앞에 다음을 기입했습니다.
<div class="puyopuyo" style="height:100px;"></div>
<script>
<!--
;(function($) {
$(function(){
let $puyopuyo= $('.puyopuyo');
$puyopuyo.raindrops({
color: '#87CEEB', // 色
waveHeight: 80, // 沈み込む高さ？
     waveLength: 100,    // 横幅？
canvasHeight:100, // 表示領域の高さ
rippleSpeed: 0.02, // 縦方向の波が揺れる速度？
frequency: 2, // 波紋が生まれる頻度
density: 0 // 波の余韻みたいなものを設定する値
});
});
})(jQuery);
//-->
</script>
이걸로 봤어요
투명할 때는 사용자 정의 CSS에서 위의 클래스에 opacity를 작성하십시오.