全埼玉県民が泣いた!伝説の埼玉Disマンガ『翔んで埼玉』が今頃になって話題になっているということで、大変気になっていたのですが、既に持ってた(笑)『やおい君の日常的でない生活』という本の中に収録されていました。昭和時代に買ったもんですっかり忘れてましたが、よく今まで取っておいたもんだ。こんなんで「不要なものを全部捨ててやろう!」なんて本当に出来るのでしょうか?!(^^;Aま、それはさておき(笑)今日は、前回のjQueryで雪を降らせてみようのファイルを元に、ワードプレスの背景に雪を降らせてみようと思います。1.cssをワードプレス用に書き換えるさて、ワードプレスにどうやって雪を降らせるか?考えたのは、画面の一番上に雪の降るレイヤーを乗っける、という方法です。前回はdivを一粒の雪片としましたが、ワードプレスの中にはたくさんのdivが存在していますので、区別するためにまずidを付けたいと思います。今回はsnoowというidを作り、設定を以下のようにしてみました。99;で画面の一番上の層にくるようにします。none;にすることで、リンクへのタップ、クリックが可能になります。これを書き加えないと、画面に一枚のガラス板が張られたかのごとく、リンク先をクリック、タップしても動作しませんのでご注意!あとは前回とほぼ一緒ですが、divに#snoowを付けたところと、スマホでの見え方も考慮してanimationの雪の落下速度をゆっくり目にして単位をemからvwなどに変更しています。以下cssの全文です。}2.ワードプレス用にjsファイルを作るワードプレスではコンフリクト(衝突)を避けるため、jQueryで使われる$が使えません(プラグインなどで既に$を関数に使われていたりするため)。前回作ったjsファイルの中で、$と書いた箇所はすべてjQueryに書き換えます。今回は単一記事の投稿ページ(single.php)にのみ、雪を降らせようと思っています。単一記事の投稿ページに付けられているワードプレスのクラス名をfirebugなどのディベロッパツールで調べてみましょう。すると、単一記事の投稿ページのbodyには必ずクラス.single-postが付いています。クラス.single-postのついたbodyに、コンテンツ(divs)をappend(追加)するように書き換えます。することで、トップページや個別ページでは適用されず、単一記事のページでのみ適用されるようになります。あるカテゴリーの記事にだけ使いたい、とか、ある特定の記事にのみに使いたい、という時はその記事のbodyに付いている特定のクラスを探しだして試してみて下さいね。前回との違いは4つです。jQuery(window).width();//windowの幅を取得する。jQuery(window).height();//windowの高さを取得する。id="snoow">';//divsは、idをsnoowにしたdiv。{//i<=35←この数字で雪の量を加減する。forが終わるまでひとつづつ増やす。id="snoow">'をここで閉じる。//.single-postの付いたbodyにdivsを足す。3.ワードプレスに外部ファイルを読み込ませるでは、cssとjsのファイルをお使いのftpにアップロードしましょう。次にheader.phpにワードプレスで外部ファイルを読み込ませる記述を書いていきます。ワードプレスで外部ファイルを読み込ませるのには、ワードプレスのphp関数である、wp_enqueue_scriptとwp_enqueue_styleを使います。wp_enqueue_scriptは外部スクリプトファイルの読み込みに、wp_enqueue_styleは外部スタイルシートの読み込みに使います。(wp_enqueue_scriptについての以前の記事はこちら)ついでに、ワードプレスでよく使われる関数をもう一つ。子テーマの、URLを取得する関数です。ちなみにURLを取得する、のパスはどこまでか?と言いますと、...wp-content/themes/お使いの親テーマor子テーマここまでのURLになります。子テーマフォルダの中にjsフォルダがあり、その中のファイルを指定する場合、私の例でいうとget_stylesheet_directory_uri().”/js/yuki-02.js”このように書きます。?>という記述の手前に下記のように書き加えます。?>まとめちょうどクリスマス時期にLINEでもタイムライン上に雪が降っていました。やり過ぎるとウザいですが(笑)季節や記事によって画面上に何かが現れる、というのも遊び心があって面白い演出になるのではないでしょうか?皆さんのサイトにもぜひ応用してみてくださいね!次回もjavascriptで何かやってみようと思います。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。%d人のブロガーが「いいね」をつけました。