【WordPress】ヘッダーの背景画像を日替わりにする

WordPressのテーマに無料のCocoonを使用していますが、分かりやすくできているので初めての人でもすぐに馴染めます。子テーマへは、自分なりのカスタマイズも行えるようになっており中級者にも満足いけるものと思います。

ページのデザインには、たくさんの着替えが選べるようになっています。

ブログで一番目立つ場所は、やはりヘッダーだろうと思います。このヘッダーには、ロゴやキャッチフレーズが自由に差し替えられます。ヘッダーの背景画像も差し替えが出来ます。

そこで思ったのは、このヘッダーの背景画像が自動的に差し替えが出来たらいい、というか、手元の、Macやパソコンの画像ファイルを書き換えたら、そのままWordPressの更新がされたらラク、そう考えました。

imakat_header_imageフォルダに各曜日の画像.pngを保存する。

3つの更新方法

１　＜単純に、外部WordPressサーバーへFTP更新する＞XserverにあるWordPressサーバーへ、FTPで更新する。Hazelでimakat_header_imageフォルダを監視して、更新されたら、Transmit5アプリでFTPを起動させて、Xserverへ更新することも可能。ブログ表示のURLは、XserverにあるWordPressサーバーに登録したhead-insert.phpの中に書き込む。
画像のURL：https://imakat.com/……/imakat_header_image/monday_image.png

２　＜自宅WordPressサーバーのフォルダを更新する＞自宅のSynologyNASにあるWordPressサーバーのimakat_header_imageフォルダをCloudSyncでDropbox同期する。Macのimakat_header_imageフォルダをDropbox同期する。Mac上で曜日別画像.pngの更新を行うと自宅WordPressサーバーも更新される。ブログ表示のURLは、XserverにあるWordPressサーバーに登録したhead-insert.phpの中に書き込む。
画像のURL：https://imakat.synology.me/……./imakat_header_image/monday_image.png

３　＜Dropboxの画像ファイルを更新する＞フォルダの中に作ったimakat_header_imageフォルダの中の曜日別画像.pngのDropboxリンクを取得する。ブログ表示のURLは、XserverにあるWordpressサーバーに登録したhead-insert.phpの中に書き込む。
画像のURL：https://www.dropbox.com/scl/fi/xxxxx…xxxxxx/monday_image.png?rlkey=yyyy…..yyyyy&raw=1

以上ですが、１はオーソドックスな方法で、間違いは少ないです。２は、自宅サーバーがある場合は、Macのフォルダに画像ファイルを更新するだけで、Web配信まで連動していくのでシンプルです。３はMacのDropboxフォルダにある画像ファイルを更新するだけで、Web配信まで連動していくので、一見、シンプルです。しかし画像のURLは複雑なトークンリンクになっています。

３のデメリット

３のデメリットを言います。１と２は、URLからフォルダ階層が明示されるので迷子にならないですが、３はURLは暗号化された文字列でありフォルダ階層も分かりません。従って、URLと合わせてファイルパスもどこかに記録しておかないと迷子になります。上書きは結構、頻繁に行うことになると思います。もし、上書きに失敗して新規にリンク取得となると、また、head-insert.phpを書き換える必要が生じます。これは起こり得ることだと思います。

当面は、２を利用

３を別の言い方をすると「壊れやすい華奢」。１と２は「少々乱暴でも壊れない」。

私としては、ブログは、読みこみ許可、書き込み禁止で公開するのを基本と考えていまして、ファイルの所在位置まで明示されることは容認できます。それゆえ２を選択することにします。

具体的な設定

URLで共有できるメディアサーバーがあれば、その中にxxxxx_header_imageフォルダを設定します。パーミッションを、管理者以外は読み込みのみ、URLを知っている人全員可、に設定します。

日本時間での曜日の変更になります。

画像は、pngでもjpgでも問題ありません。画像のサイズは、ヘッダーのデザインによりますが、0.5MB程度に調整するのがいいと思います。

header-insert.phpへの記述

Cocoonの場合は、テーマCocoon child→tmp-user→head-insert.phpになります。

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 曜日ごとの画像URLリスト
    const backgroundImages = [
        'https://あなたのパス/xxxxx_header_image/sunday_image.png',     // 日曜日
        'https://あなたのパス/xxxxx_header_image/monday_image.png',     // 月曜日
        'https://あなたのパス/xxxxx_header_image/tuesday_image.png',    // 火曜日
        'https://あなたのパス/xxxxx_header_image/wednesday_image.png',  // 水曜日
        'https://あなたのパス/xxxxx_header_image/thursday_image.png',   // 木曜日
        'https://あなたのパス/xxxxx_header_image/friday_image.png',     // 金曜日
        'https://あなたのパス/xxxxx_header_image/saturday_image.png'    // 土曜日
    ];

    // JSTに調整した曜日取得
    const now = new Date();
    const JSTOffset = 9 * 60; // UTCからJSTへの時差（分）
    const JSTDate = new Date(now.getTime() + JSTOffset * 60 * 1000);
    const dayOfWeek = JSTDate.getUTCDay();

    // キャッシュバスターとしてタイムスタンプを生成
    const timestamp = now.getTime();

    // .headerクラスに背景画像を設定
    const header = document.querySelector('.header');
    if (header) {
        header.style.backgroundImage = `url(${backgroundImages[dayOfWeek]}?v=${timestamp})`;
        header.style.backgroundSize = 'cover';
        header.style.backgroundPosition = 'center';
    }
});
</script>

以上です。