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

今回の小改善ですが、おそらく、プラグインの中に出来るものがあるとは思いますが、割と簡単なので、ChatGPTに依頼しながらphpで作成することにします。

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

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

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

そこで思ったのは、このヘッダーの背景画像が自動的に差し替えが出来たらいい、というか、手元の、Macやパソコンの画像ファイルを書き換えたら、そのままWordPressの更新がされたらラク、そう考えました。ちなみに、キャッチフレーズも日替わりはどうかと考えてみましたが、SEOに悪影響がありそうなのと、そもそもあまり面白味がないので、やめました。

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

3つの更新方法

No１　＜単純に、外部WordPressサーバーへFTP更新する＞XserverにあるWordPressサーバーへ、FTPで更新する。Hazelでimakat_header_imageフォルダ(フォルダ名は任意)を監視して、更新されたら、Transmit5アプリでFTPを起動させて、Xserverへ更新することも可能。phpの構造は３方法とも同じで、URLが異なるのみ。URLは、XserverにあるWordPressサーバーに登録したhead-insert.phpの中に書き込む。
画像のURL：https://imakat.com/……/imakat_header_image/monday_image.png

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

No３　＜Dropboxの画像ファイルを更新する＞フォルダの中に作ったimakat_header_imageフォルダの中の曜日別画像.pngのDropboxリンクを取得する。phpの構造は３方法とも同じで、URLが異なるのみ。但しこのDropboxのURLは共有トークンリンクURLで非常に長いランダムな文字列になっている。URLは、XserverにあるWordPressサーバーに登録したhead-insert.phpの中に書き込む。
画像のURL：https://www.dropbox.com/scl/fi/xxxxx…xxxxxx/monday_image.png?rlkey=yyyy…..yyyyy&raw=1

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

No３のデメリット

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

当面は、No２を利用

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

私としては、ブログは、読みこみ許可、書き込み禁止で公開するのを基本と考えていまして、ファイルの所在位置が分かってしまうことは問題ではありません。それゆえ２を選択することにします。

具体的な設定

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>

以上です。