【ワードプレス】ランダムな画像を表示する

2022年4月2日2022年12月1日

ワードプレスの記事に「サイコロを振って出た目」の画像を表示したくて、実現方法を調べて、テーマのfunctions.phpに関数を書いてみました。

追加した関数

functions.phpには下記のような関数を追加しました。画像フォルダって記述しているところは環境によって変わります。dice_1.png～dice_6.pngはサイコロの目の画像です。

function throw_dice_func($atts) {
  $dice_images[0] = '<img src="画像フォルダ/dice_1.png" alt="1" />';
  $dice_images[1] = '<img src="画像フォルダ/dice_2.png" alt="2" />';
  $dice_images[2] = '<img src="画像フォルダ/dice_3.png" alt="3" />';
  $dice_images[3] = '<img src="画像フォルダ/dice_4.png" alt="4" />';
  $dice_images[4] = '<img src="画像フォルダ/dice_5.png" alt="5" />';
  $dice_images[5] = '<img src="画像フォルダ/dice_6.png" alt="6" />';
  
  $html = '';
  
  for ($i = 1; $i <= $atts['times']; $i++) {
    $number = mt_rand(0, count($dice_images) - 1);
    
    $html .= $dice_images[$number];
  }
  
  return $html;
}
add_shortcode('throw_dice', 'throw_dice_func');

サイコロの画像を用意

サイコロの画像はフリー素材を使わせてもらいました。シンプルなモノクロのものを探しました。

• 黒いサイコロの目イラストのフリー素材｜イラストイメージ

サイトにあったものは6つの目の画像がくっ付いているので６つに分割して使います。

ショートコードを実行する

[throw_dice times=2]のように記述します。timesの値は振るサイコロの数です。

この上にサイコロの画像が2つ並んで出ていたら成功です。ランダム表示されるので記事を開くたびに出る目が変わるはずです。

サイコロが3つ場合も正しく表示されるかな。

キャッシュ系のプラグインに注意

ショートコードの動作実験をしているときにWordPressの投稿ページをキャッシュするプラグインを使っていたために、ページを開きなおしても同じサイコロの目が表示されてしまった。

キャッシュ系のプラグインは表示速度を上昇させるためには有効ですが、今回のようなランダムに表示させたいときには向かない。オフにするか、特定のページだけ除外する

---

Willi HeidelbachによるPixabayからの画像を使用しています。