皆さまごきげんよう！
暮れも押し迫ってまいりましたが、いかがお過ごしでしょうか？
大晦日までには不要なものを全部捨ててやろう！と張り切っている私ですが、まだ何も手を付けていません（^^;
ところで、最近ネットで魔夜峰央先生の 全埼玉県民が泣いた！伝説の埼玉Disマンガ『翔んで埼玉』が今頃になって話題になっているということで、大変気になっていたのですが、既に持ってた（笑）『やおい君の日常的でない生活』という本の中に収録されていました。昭和時代に買ったもんですっかり忘れてましたが、よく今まで取っておいたもんだ。こんなんで「不要なものを全部捨ててやろう！」なんて本当に出来るのでしょうか？！(^^;A
ま、それはさておき（笑）今日は、前回のjQueryで雪を降らせてみようのファイルを元に、ワードプレスの背景に雪を降らせてみようと思います。
1.cssをワードプレス用に書き換える
さて、ワードプレスにどうやって雪を降らせるか？考えたのは、画面の一番上に雪の降るレイヤーを乗っける、という方法です。
前回はdivを一粒の雪片としましたが、ワードプレスの中にはたくさんのdivが存在していますので、区別するためにまずidを付けたいと思います。
今回はsnoowというidを作り、設定を以下のようにしてみました。
#snoow{
position: fixed;
top:0;
left:0;
overflow: hidden;
z-index: 99;
width: 100%;
height: 100vh;
pointer-events: none;
}z-index: 99;で画面の一番上の層にくるようにします。(Photoshopのレイヤー構造のイメージです)
また、pointer-events: none;にすることで、リンクへのタップ、クリックが可能になります。これを書き加えないと、画面に一枚のガラス板が張られたかのごとく、リンク先をクリック、タップしても動作しませんのでご注意！
あとは前回とほぼ一緒ですが、divに#snoowを付けたところと、スマホでの見え方も考慮してanimationの雪の落下速度をゆっくり目にして単位をemからvwなどに変更しています。以下cssの全文です。
#snoow{
position: fixed;
top:0;
left:0;
overflow: hidden;
z-index: 99;
width: 100%;
height: 100vh;
pointer-events: none;
}
#snoow div {
background-color: #eee;
height: 0.3vw;
width: 0.3vw;
border-radius:0.3vw;
position: absolute;
pointer-events:none;
box-shadow: 0 -100vh #eee;
animation:anime1 25s -10s linear infinite;
filter: blur(0.2em);
}
#snoow div:nth-of-type(2n){
height: 0.7vw;
width: 0.7vw;
border-radius:0.7vw;
animation-duration: 20s;
filter: blur(0.2em);
}
#snoow div:nth-of-type(3n){
height: 1vw;
width: 1vw;
border-radius:1vw;
animation-duration: 15s;
filter: blur(0.1em);
}
@keyframes anime1{
0% {
transform:translateY(0vh);
}
100% {
transform:translateY(100vh);
}
}
2.ワードプレス用にjsファイルを作る
ワードプレスではコンフリクト（衝突）を避けるため、jQueryで使われる＄が使えません（プラグインなどで既に$を関数に使われていたりするため）。なので前回作ったjsファイルの中で、＄と書いた箇所はすべてjQueryに書き換えます。
今回は単一記事の投稿ページ（single.php）にのみ、雪を降らせようと思っています。
まず、単一記事の投稿ページに付けられているワードプレスのクラス名をfirebugなどのディベロッパツールで調べてみましょう。すると、単一記事の投稿ページのbodyには必ずクラス.single-postが付いています。
そこで、前回はjQueryの関数appendを使って、bodyにコンテンツ(ここではdivs)を追加していたところを → クラス.single-postのついたbodyに、コンテンツ(divs)をappend（追加）するように書き換えます。こうすることで、トップページや個別ページでは適用されず、単一記事のページでのみ適用されるようになります。
あるカテゴリーの記事にだけ使いたい、とか、ある特定の記事にのみに使いたい、という時はその記事のbodyに付いている特定のクラスを探しだして試してみて下さいね。
前回との違いは4つです。
- var divsにidがsnoowであるdivを代入した
- forのところでi<=35として雪の降る量を調整した
- 最後から2番目の行、forが終わったあとで、<div id=”snoow”>を</div>で閉じている
- 最後の行で、.single-postの付いたbodyにdivsを足すように変えた
jQuery(function(){
var w = jQuery(window).width();//windowの幅を取得する。
var h = jQuery(window).height();//windowの高さを取得する。
var divs = '<div id="snoow">';//divsは、idをsnoowにしたdiv。
for (var i=1 ; i<=35 ; i++) {//i<=35←この数字で雪の量を加減する。
var sx = Math.floor(Math.random()*w);
var sy = Math.floor(Math.random()*h);
divs += "<div style='left:"+ sx +"px; top:"+ sy +"px;'></div>";
//+=で"<div style='left:"～ を、forが終わるまでひとつづつ増やす。
}
divs += "</div>"; //上記の'<div id="snoow">'をここで閉じる。+=は連結の意味。
jQuery("body.single-post").append(divs);
//.single-postの付いたbodyにdivsを足す。
//.single-postはワードプレスの個別記事のクラス名
});
3.ワードプレスに外部ファイルを読み込ませる
では、cssとjsのファイルをお使いのftpにアップロードしましょう。
次にheader.phpにワードプレスで外部ファイルを読み込ませる記述を書いていきます。
ワードプレスで外部ファイルを読み込ませるのには、ワードプレスのphp関数である、wp_enqueue_scriptとwp_enqueue_styleを使います。
wp_enqueue_scriptは外部スクリプトファイルの読み込みに、wp_enqueue_styleは外部スタイルシートの読み込みに使います。
（wp_enqueue_scriptについての以前の記事はこちら）
ついでに、ワードプレスでよく使われる関数をもう一つ。
ワードプレスには get_template_directory_uri() と get_stylesheet_directory_uri() という関数があります。ざっくり言うと、
get_template_directory_uri() は、親テーマ
get_stylesheet_directory_uri() は、子テーマ
の、URLを取得する関数です。
私の場合は子テーマを使っておりますので、get_stylesheet_directory_uri() の方を使います。
ちなみにURLを取得する、のパスはどこまでか？と言いますと、
…wp-content/themes/お使いの親テーマor子テーマ
ここまでのURLになります。
なので、子テーマフォルダの中にjsフォルダがあり、その中のファイルを指定する場合、私の例でいうと
get_stylesheet_directory_uri().”/js/yuki-02.js”
このように書きます。
この二つの関数を使って、header.phpの中の<?php wp_head(); ?>という記述の手前に下記のように書き加えます。
<?php
wp_enqueue_style( 'snow-02', get_stylesheet_directory_uri()."/snow-02.css");
wp_enqueue_script( 'yuki-02',get_stylesheet_directory_uri()."/js/yuki-02.js", array( 'jquery' ));
?>
<?php wp_head(); ?>まとめ
ちょうどクリスマス時期にLINEでもタイムライン上に雪が降っていました。あまりやり過ぎるとウザいですが（笑）季節や記事によって画面上に何かが現れる、というのも遊び心があって面白い演出になるのではないでしょうか？皆さんのサイトにもぜひ応用してみてくださいね！
次回もjavascriptで何かやってみようと思います。
それでは皆さま、よいお年を！(^^)/~~~