Ripples』というのがあります。ブログやウェブサイトに波紋のような効果を加えるもので、マウスカーソルに合わせて水面に波紋が広がるようなエフェクトは見てて気持ちいい!僕も熱帯魚のブログを書いてるので、そっちに使ってみたいなーと思い、早速実装してみました。Ripplesを実装する方法を、なるべく分かりやすく説明したいと思います!「WordpressでjQuery追加するときって、どこにどうやって書くの!?」と言う人のお役に立てれば幸いです。Ripples』とは?jQueryを使って画面上に波紋のようなエフェクトを追加するプラグインです。ここでいうプラグインとはWordpressのプラグインとは違います。jQueryに機能を追加するためのプラグインですね。実装したブログはこんな感じになります。別タブで開くのでご確認ください。ビバアクア!熱帯魚を飼ってみようビバリウム(アクアリウム、テラリウム)について飼育環境、繁殖などの情報を公開中vivarium79.infoスマホには対応していません。?こんな感じのエフェクトを追加することができます。Ripplesの実装方法を説明していきます。今回のサンプルではWorpdress4.6.1テーマ:Simplicity2.3.9(子テーマあり)を使っています。テーマは何を使っても問題ないですが、テーマの編集をするのでバックアップを取るか子テーマを使ってください。Ripplesのダウンロードをしましょう。Githubのページからダウンロードします。ダウンロードできます。ダウンロードした圧縮ファイルを解凍するといくつかファイルが出来ますが、使うのはjquery.ripples.jsのみです。jquery.ripples.jsをアップロードする解凍して出来たjquery.ripples.jsをFTPを使ってアップロードします。アップロードする場所ですが、使っている親テーマ内のjsフォルダにしました。/wp-content/themes/simplicity2/js本当は子テーマにアップするべきなのかな・・・テーマを編集するjQueryプラグインはjQuery本体とセットで使うものです。WordPressにはすでにjQueryが読み込まれているので、jQueryプラグインのみを読み込ませます。WordPress管理画面の外観>テーマの編集から、</body>の直前に記述ができるテンプレートを選択します。一般的にはfooter.phpだと思われますが、simplicityであれば「footer-insert.php」という便利なテンプレートがあるので、これを編集します。不安な人はバックアップを忘れずに!編集→保存後まっ白になった場合はバックアップしたファイルで元に戻しましょう。コードを記述する以下のように記述します。0.04,});});</script>WordPressで使う場合は、配布されているコードをjQuery(function($){~~~});で囲むようにしましょう。ここでチェックするポイントは以下の2行です。Ripplesを読み込む記述です。今回親テーマのjsフォルダにスクリプトファイルをアップしたのでget_template_directory_uri()を使っています。子テーマにアップしたjsファイルを読み込む場合はget_stylesheet_directory_uri()を使いましょう。2つ目は波紋エフェクトを加えたい場所を指定する記述です。サンプルではヘッダー部分に適用しているので#headerを指定しています。$(‘body’)と記述すればブログ全体にエフェクトがかかります。負荷がかかりすぎるのかな?Adsenseなど広告を配置している場合は、広告にそんなエフェクトをかけたら規約違反になると思うので、気をつけましょう。エフェクトの設定エフェクトの設定を数値で指定することが出来ます。0.04,の数値を変更します。resolution波紋の広がる速度です。数値が大きいほど遅くなります。dropRadius波紋の大きさです。波の高さといったほうがわかりやすいかも。perturbance波紋の波の数?でしょうか。やりすぎると気持ち悪いです。0.00~1.00までの範囲で指定(多分)あとがきこんな感じで、アッと言う間に波紋エフェクトを追加することが出来ました。FEBRUARY29.。