jQuery初心者がWordPressテーマsimplicity2へ“jQuery Ripples”を設置してみた。

2017-09-05 2018-04-27

きろくがかり

jQueryの設置にお悩みの全国の皆さんこんにちは。40代現役期間工のきろくがかかりです。

先日からjQueryを利用したサイドからニョッっと出てくるドロワーメニューの設置に挑戦してるんです。しかしこれが上手くいかない。

なんで動かないんだろうと色々と考えた結果、何がおかしいのか良くわかっていない事が分かりましたｗ

それはダメだろ…って事で今回は勉強もかねてシンプルなプラグイン探してそれを動かすためのコードの書き方や場所だったりを調べつつ実際に設置してみたいと思います。

1 手軽に設置できるjQueryプラグインを探す
- 1.1 シンプルで設置が簡単(そう)なプラグインjQuery Ripplesを発見
2 ブログテーマsimplicity2へjQuery Ripplesを設置してみる
- 2.1 jQuery Ripplesをダウンロード
- 2.2 jquery.ripples.jsをサーバーにアップロード
3 jQueryを動かすためのコード
- 3.1 jQuery本体を読み込ませるコードの記述
4 jqueryプラグインを読み込ませる
- 4.1 </body>ってどこよ
5 動作を確認してみる
6 さいごに

手軽に設置できるjQueryプラグインを探す

jQueryについて勉強するには実際に設置してみるのが一番いいんですよね。習うより慣れよって言いますし。

とは言っても使用するファイルの数が多くて設置が難しそうなやつだと出来ないので、

出来るだけシンプル
設置が簡単
動作しているのが一目でわかる
設置方法を解説してるブログがある

こんなプラグインが理想です。

シンプルで設置が簡単(そう)なプラグインjQuery Ripplesを発見

そんな都合のいいプラグインあるかな？なんて思いながらネットで探していたところ…ありました！

マウスカーソルの動きやクリックに合わせてブログやサイトへ波紋が広がる装飾を施すjQuery Ripplesってプラグインです。

出来るだけシンプル
…使うファイルは一つだけ

設置が簡単
設置に関するソースコードを公開してくれているブログがあるのでコピペで設置可能。

動作しているのが一目でわかる
カーソルに合わせて波紋が広がるって事なのですぐわかるでしょ。

設置方法を解説してるブログがある
ソースコードを公開してくれてるブログの記事内に解説アリ。しかも自分の使ってるブログテーマ向けなのでとてもありがたい。

それでは実際に設置してみましょう

ブログテーマsimplicity2へjQuery Ripplesを設置してみる

参考にしたのは以下のブログ。丁寧に書いてくれてたので助かりましたー感謝です！

https://feb29.org/wordpress-jquery-ripples.html

大まかな設置の流れとしてはこんな感じでしょうか。

１．プラグインのダウンロード
２．ダウンロードしたプラグインをサーバーにアップ
３．jQuery本体を読み込ませるコードを記述
４．アップロードしたjQueryプラグインを読み込ませるコードを記述

まぁ順番にやっていきましょう。

jQuery Ripplesをダウンロード

手順としてはまず下記のサイトへ行きjQuery Ripplesをダウンロードします。

https://github.com/sirxemic/jquery.ripples/

サイトは英語で書かれているので“ウッ”って思うんですけどclone or downloadってボタンからdownload ZIPを選択するだけです。jquery.ripples-master.zipってファイルがダウンロードされます。

ダウンロードしたファイルを開くと上のように色々入ってます。でも今回使うのはdistってフォルダの中に入ってる

jquery.ripples.js

ってファイルのみです。シンプルでいいですね～

jquery.ripples.jsをサーバーにアップロード

次にダウンロードしたこいつをサーバーにアップロードします。アップロード場所はどこでも良いみたいなんですけど、今回は参考にしたブログと同様に親テーマにアップロードしてみます。

後で自分が分かる様に、テーマフォルダーsimplicity2の下にripplesって名前のフォルダを新規で作成しアップロード。

simplicity2/ripples/jquery.ripples.js

階層はこんな感じです。

jQueryを動かすためのコード

jQueryを動かす為にはjQuery本体とjQueryプラグインを読み込ませないといけないんですが、その為には本体とプラグインを読み込ませるコードを記述しなければいけません。

jQuery本体を読み込ませるコードの記述

色々調べると外部から読み込ませるのが良いらしいので以下の一文を記述します。

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

書く内容はわかったけど一体どこに書くのか？

コードの具体的な記述場所についてネットで調べてみると、上記一文は<head>と</head>の間。もっと言うと親テーマのheader.phpの中にある

<?php wp_head(); ?>

と

</head>

の間

<?php get_template_part('header-seo');//SEOの設定テンプレート?>
<?php //wp_enqueue_script('jquery');//jQueryの読み込み?>
<?php the_apple_touch_icon_tag();//Appleタッチアイコンの呼び出し ?>
<?php if ( is_facebook_ogp_enable() ) //Facebook OGPタグ挿入がオンのとき
  get_template_part('header-ogp');//Facebook OGP用のタグテンプレート?>
<?php if ( is_twitter_cards_enable() ) //Twitterカードタグ挿入がオンのとき
  get_template_part('header-twitter-card');//Twitterカード用のタグテンプレート?>
<?php get_template_part('header-insert');//ユーザーが子テーマからヘッダーに何か記述したい時に利用するテンプレート?>
<?php get_template_part('head-custom-field');//カスタムフィールドの挿入（カスタムフィールド名：head_custom）?>
<?php wp_head(); ?>

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

</head>

上記の位置です。

header.phpは子テーマに無いので親テーマを直接弄る事になるんですけど、親テーマ弄るのに抵抗ある人は親テーマのheader.phpを子テーマにコピーして編集してもOKです。自分はそうしました。

ちなみにsimplicity2の子テーマにはheader-insert.phpってファイルがあります。headerに追記がある時に利用する結構便利なファイルなんですけど、jquery本体を読み込むコードに関してはそこに記述すると正常に読み込まれませんので注意です。

jqueryプラグインを読み込ませる

次にjqueryプラグインを読み込ませるコードを書きます。

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.ripples.js"></script>
<script>
jQuery(function($){
$('#header').ripples({
resolution: 400,
dropRadius: 20,
perturbance: 0.04,
});
});
</script>

参考ブログ内のコードをコピペしただけでアレなんですけど、上記のコードを</body>手前に書きます。

</body>ってどこよ

詳しい人からすると“はぁ？”って思うかもしれませんが、自分のような超初心者</body>の記述がどこにあるかすらわからないんです。なのでまたネットで調べてみると</body>はfooter.phpにあるようです。

simplicity2の子テーマにはfooter-insert.phpってファイルがあります。先に書いたheader-insert.phpはheaderに追記がある場合に利用するファイルですが、footer-insert.phpはfooterに追記がある場合に利用するファイルです。

header-insert.phpにjQuery本体を読み込ませるコードを記述しても正常に動作しないんですが、jQueryプラグインを読み込ませるコードはfooter-insert.phpに記述しても大丈夫です。

動作を確認してみる

とりあえずここまででjQuery Ripplesの設置は完了です。あとは実際に動作するかどうか確認するだけです。

画像は動作確認の際に撮影したスクリーンショット。当ブログのheader右側に円を描くような白い光が写っているのが分かると思います。一応正常に動作してるっぽいですね。

headerが色よりも画像の方がきれいに見えるのかもしれませんが、このプラグインの設置は波紋が広がるような動きをブログ内で綺麗に表現させるのが目的じゃなくjQueryの設置方法について学ぶのが目的なので、とりあえず無事に動いたって事で良しとします。

さいごに

ながながと書いてきましたが重要な部分をまとめますと

・jQuery本体を読み込むコードはheader.phpの<?php wp_head(); ?>と</head>の間に記述する。

・jQuery本体を読み込むコードをheader-insert.phpに記述するとjqueryプラグインは正常に動作しない

・jqueryプラグインを読み込ませるコードはfooter.phpの</body>手前に記述。footer-insert.phpに記述してもプラグインは正常に動作する。

こんなところでしょうかね。

jqueryの設置に関するソースコードを公開してくれてるサイトやブログって結構あるんですけど、動作させるために必要なコードを記述するべき場所を同時に詳しく解説している記事ってあまりないんですよね。

なのでこの記事が自分と同じようにsimplicity2ユーザーでかつjQuery使ってみたいけど初心者過ぎてどうしたらいいかわからない…って人には少し参考になれば幸いです。

次回のjquery関連記事はスマホでサイドからにゅっと出てくるメニューの設置方法についてです。無事に設置できたら書きますｗ

果たしていつになるのか…