More than 3 years have passed since last update.

WordpressでjQueryを使って[波の動き]を導入する

Posted at 2020-11-12

まず準備する段階で上の2つ目のURLの「ソースコードを設置する」の手前まで参考にしました
jQueryのサイトからjQueryをダウンロードする
https://jquery.com/download/

この記事の作成段階ではjQuery_3.5.1のバージョンでした

https://jqueryui.com/
jQueryUIは同じバージョンでした

http://daniellaharel.com/raindrops/
上の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>の前に以下を記入しました

私はこれで表示されました
透過させるときはカスタマイズのcssで上のclassに対してopacityを書いてください

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up