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

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つの目の画像がくっ付いているので6つに分割して使います。

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

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

sicecater

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

caterdeuceace

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

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

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

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


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

お読みくださりありがとうございます。この記事が何かの参考になりましたら、ブログランキングサイトのバナークリックをよろしくお願いします。

ブログランキング・にほんブログ村へ 人気ブログランキング FC2 ブログランキング