freyjajQueryで背景画像を時間で切り替える皆さまごきげんよう。本日は前回の続きになります。jQueryでワードプレスの背景画像を時間で切り替えを実装してみますよ〜。seventeenをベースにやってみますが、調べ方や導入の仕方は大体同じなのでぜひ参考にしてみて下さい。メディアに切り替え用の画像を数枚いれておくメディアに新規追加で、切り替えたい画像を必要な枚数入れておきましょう。ワードプレスのテーマフォルダの中にjsファイルを作る今回はヘッダーの画像を変えたいので、ヘッダー画像の辺りを右クリックして要素を調査します。すると、このテーマのヘッダー画像はdiv#wp-custom-headerの中のimgタグの中にありましたので、このimgタグのsrcをjsで書き換えてあげれば良いんだな、と見当がつきました。次にお使いのFTPを開き、テーマフォルダの中にjsフォルダを作ります。そのフォルダの中へ、下記のコードを「◯◯.js」というファイルにしてjsフォルダの中に入れます。img').attr('src','メディアに入れた画像のパス');この様に記述しています。「メディアを編集」画面で、右側にあるファイルのURLが、画像のパスです。画像のパスはご自分のものに変えて下さいね。今の所、切り替わりが確認しやすい様ににgetSeconds()を使って短いサイクルにしていますよ。header.phpに外部ファイルの読み込みコードを書く先ほどのjsファイルを読み込ませる記述をheader.phpの中に書きます。?>の上に書き加えます。jsファイル名とファイルのパスはご自分のものに変えて下さいね。?></head>jsが動かない時まずディベロッパツールを使ってコンソールにエラーが出ていないか確認してみましょう。プログラムの記述に間違いが見つかるかもしれません。プログラムに問題が無ければ、画面右クリックでページのソースを表示して、先ほど作ったjsファイルが読み込まれてているか確認してみましょう。読み込めていなかったら、header.phpに書いた外部ファイルの読み込みコードに間違いがあるかもしれません。srcとsrcsetについてワードプレスでは、デバイスの大きさによって表示させる画像の大きさを変えるために、同じ画像をいくつかのサイズで自動で用意してくれます。それがsrcsetというもので、とても便利なものです。今回、このトップ画像をjQueryで書き換える際に、初めはsrcを指定してみたものの、全く切り替わらなかったのです。してかな?と思ってimgタグの中をよくよく見てみれば、src以外にsrcsestという記述もあったではないですか。そこで指定をsrcsestと変更してみたところ、無事切り替わるようになりました。画像関連のカスタムをする際、srcを指定して切り替わらない場合、他にsrcsetがないか?あればsrcsetの方を指定してみて下さい。最終的にはこの様になりました。.getHours()を使って、6時間ごとに画像が切り替わる様になっています。});まとめいかがでしたでしょうか?今までにやってきた、外部ファイルの読み込み方が分かっていれば、今回の画像の切り替えもスムーズに出来ると思います。キャンセル投稿を送信できませんでした。メールアドレスを確認してください。メール送信チェックに失敗しました。このブログではメールでの投稿共有はできません。%d人のブロガーが「いいね」をつけました。