2018.03.29 Thu

WordPressでアイキャッチ画像が未登録の場合、複数の画像をランダム表示させる

こんにちは。
ジーニアスウェブの米田です。

早いもので、入社して1年が経ちました。

1年たっても相変わらず勉強の毎日です。果たして成長したのか。。。
2年目もさらに頑張ってまいります。

そんなまだまだ勉強中の私の備忘録も兼ねて、アイキャッチ画像を登録していない時に自動で複数の画像をランダム表示させる方法をご紹介します。

未登録時に任意の画像を表示させる

今回は未登録用の画像をimg_noimg.jpgとします。

記述はとても簡単。
サムネイルを表示させたい場所に以下を記述します。

<?php
    if (has_post_thumbnail()) {
        the_post_thumbnail('thumbnails');
    } else {
        echo '<img src="' . get_template_directory_uri() . '/images/common/img_noimg.jpg' . '"alt="No image" />';
    }
; ?>

たったこれだけでアイキャッチ画像を登録していない投稿に、自動的にimg_noimg.jpgが表示されます。

複数の画像をランダム表示

記事数が多くなり、未登録画像も増えていくと同じ画像が続くことになります。
これでは、ブログを訪れたユーザーにとってもあまりいい印象を与えないでしょう。

そこで未登録用の画像を複数用意してランダムに表示させます。

今回は画像を10枚用意するとします。
img_noimg1.jpg〜img_noimg10.jpg

そして以下を記述します。

<?php
    if (has_post_thumbnail()) {
        the_post_thumbnail('thumbnails');
    } else {
        echo '<img src="' . get_template_directory_uri() . '/images/common/img_noimg' . (rand(1,10)) . '.jpg' . '"alt="No image" />';
    }
; ?>

先ほど紹介した記述に(rand(1,10))を加えるだけです。

これで、1〜10までの数字をランダムであてて呼び出すことができます。
つまりimg_noimg◯.jpgの◯部分がランダムで変わってくれるので、表示される画像も自動で変わってくれます。

枚数が変わっても数字を変えるだけなので簡単です。
5枚の場合は(rand(1,5))

最後に

もちろんサムネイルはあったほうがいいですが、投稿頻度が多い人からすればなかなか大変なもの。
こういった一工夫で作業の効率化につながるので、覚えておいて損はないでしょう。

それでは。

WRITERこの記事を書いた人

米田

米田

大阪オフィスで、フロントエンドを担当しています。

大阪オフィスで、フロントエンドを担当しています。

FREE DOWNLOAD

顧客獲得に成功した24社の成功事例を1冊にまとめました。
顧客獲得にお困りの方も、そうでない方も、一度お読みいただくことをお勧めします。

MORE VIEW