【WordPress】時間によって表示させる画像を変える方法

こんにちは！Web制作エンジニアのモリヤス（@_moriyas）です。

WordPressでサイト制作時に、「時間によって表示させる画像を変えたいです！」という仕様がありました。

本日は、そんな仕様の実装方法をご紹介します。

1 コードの紹介
2 簡単に解説
3 background-imageで使いたい
4 終わりに

コードの紹介

<div class="img-wrapper">
    <?php
        // 日本時間(GMT)に設定
        date_default_timezone_set('Asia/Tokyo');
        // 24時間単位で指定
        $time = intval(date('H'));

        if ( 7 <= $time && $time < 19 ) {
            // 7時から19時まで表示
            echo '<img src="'.esc_url(get_template_directory_uri()).'/img/noon_img.jpg" alt="昼の画像ですよ">';
        } else {
            // 19時から7時まで表示
            echo '<img src="'.esc_url(get_template_directory_uri()).'/img/night_img.jpg" alt="夜の画像ですよ">';
        }
    ?>
</div>

簡単に解説

上記コードを簡単に解説させていただきます。

4行目「date_default_timezone_set(‘Asia/Tokyo’);」

こちらのコードで、「日本時間」での指定にしています。

こちらがないと、意図した時間で表示が切り替わらない可能性があります。

6行目「date(‘H’)」

こちらのコードで、「24時間単位で切り替える」ように指定しています。

date関数の引数を変えれば、時間単位だけでなく分単位や秒単位などにも対応可能ですね！

date関数の使い方についてはよければ下記をご覧ください。

公式

こちらもわかりやすかったです→ PHPで日付関数を使いこなす（date, strtotime）

8行目「7 <= $time && $time < 19」

こちらで「7時~19時の間」という指定をしております。

ここは皆さんが設定したいように数字を変えていただければOKです！

background-imageで使いたい

main-visualとかで使いたい画像を変えたいとなったときにCSSのbackground-imageで指定する場合もあるかと思います。

そんな時も、もちろん対応可能で下記のようコードにしてあげればOKです！

<?php
    //下記を追加で日本時間(GMT)に設定
    date_default_timezone_set('Asia/Tokyo');
    $time = intval(date('H'));
    $url = (7 <= $time && $time < 19) ? 
        get_template_directory_uri().'/img/noon_img.jpg' : get_template_directory_uri().'/img/night_img.jpg';
?>
<div class="mv" style="background-image: url( '<?php echo $url; ?>' );"></div>

※「mv」クラスには別途お好きなようにbackgroundの設定（background-size、background-positionなどなど）をCSSでしてあげてください。