jQueryで背景画像を時間で切り替える

2022.2.12 更新

皆さまごきげんよう。

本日は前回の続きになりますので、ぜひご覧ください。

jQueryで画像を書き換える

jQueryでワードプレスの背景画像を時間で切り替えを実装してみます。

今回は当サイトで使用中のワードプレス公式テーマ、twenty seventeenをベースにやってみますが、調べ方や導入の仕方は大体同じなのでぜひ参考にしてみて下さい。

1.ワードプレスのテーマフォルダの中に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()を使って短いサイクルにしていますよ。

2.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>

3.jsが動かない時の対処法

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

プログラムに問題が無ければ、画面右クリックでページのソースを表示して、先ほど作ったjsファイルが読み込まれてているか確認してみましょう。

もし読み込めていなかったら、header.phpに書いた外部ファイルの読み込みコードに間違いがあるかもしれません。

4.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')
     }

    });

まとめ

いかがでしたでしょうか？

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

外部ファイルの読み込み方についてはこちらの記事もどうぞ。

ワードプレスの背景に雪を降らせてみよう

ワードプレスに外部ファイルを読み込ませる方法

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

ではまた次回♪

jQueryで背景画像を時間で切り替える

目次

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

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

3.jsが動かない時の対処法

4.srcとsrcsetとは

まとめ

いいね: