ランダム画像表示（おみくじ）をWordPressで実装した際のメモ

お正月企画ということでサイトのWEB拍手にて、「アマテラス様おみくじ」を実装しました。

単純に特定ページに行った（リロードした）際に、ランダムで画像が表示されるだけというシンプルな内容ですが、昔別ブログでこんな記事を書いたこともありまして。

当時は調べてたものの実装自体はしていなくて、今になってやっとこ実行したこともあり、メモとして残しておきたいと思います。
もしかしたら今後ランダム画像を表示させたいって方がいるかもしれませんからね！

ソースコードはパクりました。
ソースコードの変更＋追加
見た目の調整など
実装自体は簡単なので今後も何かに使うかも

ソースコードはパクりました。

結論ですが、ソースコードはこちらのサイトを参考…パクりました。

【超簡単】JavaScriptで画像をランダムに表示する方法 | 株式会社マイティーエース- MightyAce Inc.

上記サイトにて紹介されている以下のコードを使用しています。

<script>
num = 5; //画像の枚数
r = Math.floor(Math.random()*num);
document.write('<img src="images/'+r+'.jpg" />');
</script>

ランダム画像を表示させたい箇所に上記コードを挿入し、
「images」フォルダにランダム表示させたい画像をぶっこむだけというシンプルなやり方です。

ソースコードの変更＋追加

私の場合、上記ソースでは上手く動作しなかったので、以下の変更を行いました。

<script>
num = 5; //画像の枚数
r = Math.floor(Math.random()*num);
document.write('<img src="絶対パス/images/'+r+'.png" />');
</script>

画像の場所が相対パスではダメだったんですよね。
なので絶対パスにしました。
imagesフォルダの場所が「https://hogehoge.com/images/」だったら、青字部分を付け足すイメージです。

あと私はpng画像で制作したので、jpgをpngに変更しています。
意外と拡張子のミスで延々と表示されないという悲しみを得ることがあるので、気をつけたいところ！

見た目の調整など

上記のソースを使用すれば、問題なくランダムで画像が表示されます。
表示されない場合、何かが間違っている（多分一番可能性が高いと思われるのは画像フォルダのパス）かと思います。

あとはブラウザ側でJavaを切っているか（そういう方も今はそんないないと思うんですけど…）かなぁ。

さて、無事に画像が表示されても、この状態だと左寄せ（左側）に表示されてしまいます。
私は中央に表示させたかったので、HTMLでブロック要素を追加します。

<div style="text-align: center">
<script>
num = 5; //画像の枚数
r = Math.floor(Math.random()*num);
document.write('<img src="絶対パス/images/'+r+'.png" />');
</script>
</div>

私の中の便利くん要素「div」を使用して、中央寄せを行います。
ついつい中央寄せ…というか、左寄せ・右寄せもですが「align」を無意識に使ってしまうものの、すでにHTML5では廃止しているという悲しみを背負っているので（こちらでも確認したところきちんと中央寄せされてましたが）、きちんとCSS要素をプラスしてあげます。

あとはWordpress上で「カスタムHTML」ブロックを使用して上記コードを入力すれば、きちんと表示されます！言い切った！