jQueryでワードプレスの背景画像を時間で切り替えてみる

皆さまごきげんよう。
本日は前回の続きになります。jQueryでワードプレスの背景画像を時間で切り替えを実装してみますよ〜。
今回は当サイトで使用中のワードプレス公式テーマ、twenty seventeenをベースにやってみますが、調べ方や導入の仕方は大体同じなのでぜひ参考にしてみて下さい。

メディアに切り替え用の画像を数枚いれておく

メディアに新規追加で、切り替えたい画像を必要な枚数入れておきましょう。

ワードプレスのテーマフォルダの中にjsファイルを作る

今回はヘッダーの画像を変えたいので、ヘッダー画像の辺りを右クリックして要素を調査します。
すると、このテーマのヘッダー画像はdiv#wp-custom-headerの中のimgタグの中にありましたので、このimgタグのsrcをjsで書き換えてあげれば良いんだな、と見当がつきました。

次にお使いのFTPを開き、テーマフォルダの中にjsフォルダを作ります。
そのフォルダの中へ、下記のコードを「◯◯.js」というファイルにしてjsフォルダの中に入れます。


jQuery(function(){
       var now = new Date().getSeconds();//現在の秒を取得する
       if(0 <= now && now <= 14){//今が0秒〜14秒の時
        jQuery('#wp-custom-header img').attr('src','https://***.com/wp-content/uploads/sea.jpg');
      }else if(15 <= now && now <= 29){//今が15秒〜29秒の時
        jQuery('#wp-custom-header img').attr('src','https://***.com/wp-content/uploads/sky.jpg');
      }else if(30 <= now && now <= 44){//今が30秒〜44秒の時
        jQuery('#wp-custom-header img').attr('src','https://***.com/wp-content/uploads/chur.jpg');
      }else{//今が45秒〜59秒の時
        jQuery('#wp-custom-header img').attr('src','https://***.com/wp-content/uploads/dusk.jpg');
      }
     });

まず、ワードプレスの場合は$をjQueryに書き換えるのをお忘れなく!
このテーマのヘッダー画像は#wp-custom-headerの中のimgタグの中にありましたので、


jQuery('#wp-custom-header img').attr('src','メディアに入れた画像のパス');

この様に記述しています。「メディアを編集」画面で、右側にあるファイルのURLが、画像のパスです。
画像のパスはご自分のものに変えて下さいね。

今の所、切り替わりが確認しやすい様ににgetSeconds()を使って短いサイクルにしていますよ。

header.phpに外部ファイルの読み込みコードを書く

先ほどのjsファイルを読み込ませる記述をheader.phpの中に書きます。

外部ファイルを読み込ませるには、このブログでももう何度も書いてきたwp_enqueue_scriptですね!
下記のように、<?php wp_head(); ?>の上に書き加えます。簡単です。
jsファイル名とファイルのパスはご自分のものに変えて下さいね。


<?php
 wp_enqueue_script( 'js-changBgIf',get_stylesheet_directory_uri()."/js/js-changBgIf.js", array( 'jquery' ));
?>
	
<?php wp_head(); ?>
</head>

jsが動かない時

まずディベロッパツールを使ってコンソールにエラーが出ていないか確認してみましょう。プログラムの記述に間違いが見つかるかもしれません。

プログラムに問題が無ければ、画面右クリックでページのソースを表示して、先ほど作ったjsファイルが読み込まれてているか確認してみましょう。
もし読み込めていなかったら、header.phpに書いた外部ファイルの読み込みコードに間違いがあるかもしれません。

srcとsrcsetについて

ワードプレスでは、デバイスの大きさによって表示させる画像の大きさを変えるために、同じ画像をいくつかのサイズで自動で用意してくれます。それがsrcsetというもので、とても便利なものです。

今回、このトップ画像をjQueryで書き換える際に、初めはsrcを指定してみたものの、全く切り替わらなかったのです。
どうしてかな?と思ってimgタグの中をよくよく見てみれば、src以外にsrcsestという記述もあったではないですか。そこで指定をsrcsestと変更してみたところ、無事切り替わるようになりました。

画像関連のカスタムをする際、srcを指定して切り替わらない場合、他にsrcsetがないか?あればsrcsetの方を指定してみて下さい。

最終的にはこの様になりました。
.getHours()を使って、6時間ごとに画像が切り替わる様になっています。


  jQuery(function(){
      var now = new Date().getHours();//現在の時間を取得する
    if(0 <= now && now <= 6){//今が0時過ぎかつ6時台の時
       jQuery('#wp-custom-header img').attr('srcset', 'https://***.com/wp-content/uploads/pm02.jpg')
     }else if(7 <= now && now <= 12){//今が7時過ぎかつ12時台の時
       jQuery('#wp-custom-header img').attr('srcset', 'https://***.com/wp-content/uploads/am01.jpg')
     }else if(13 <= now && now <= 17){//今が13時過ぎかつ17時台の時
       jQuery('#wp-custom-header img').attr('srcset', 'https://***.com/wp-content/uploads/am02.jpg')
     }else if(18 <= now && now <= 23){//今が18時過ぎかつ23時台の時
       jQuery('#wp-custom-header img').attr('srcset', 'https://***.com/wp-content/uploads/pm01.jpg')
     }

    });

まとめ

いかがでしたでしょうか?
今までにやってきた、外部ファイルの読み込み方が分かっていれば、今回の画像の切り替えもスムーズに出来ると思います。

外部ファイルの読み込み方についてはワードプレスの背景に雪を降らせてみようもご参考にどうぞ

自動切り替えプログラムは、画像に限らず色々と応用が出来ると思うので、ぜひお試し下さい!
面白いアイディアがあったら教えてくださいね(^^)

ではまた次回♪

コメントを残す