javascriptでワードプレスのウィジェットにランダムで画像を表示

ロリポップを利用している場合、ウィジェットでカスタムHTMLを利用する。その際、ロリポップの管理画面からWAF設定を無効にしておく。これをしないとワードプレスのウィジェット編集で<script>タグを保存することができなかった。

ウィジェットに書いたコード

<img src="画像のURL①" id="imageArea">
<script type="text/javascript">
const imageArea = document.getElementById('imageArea');
const images = [
    '画像のURL①',
    '画像のURL②',
    '画像のURL③'
    ];
const imageNo = Math.floor( Math.random() * images.length)
imageArea.src = images[imageNo];
</script>

画像のアップロード先はワードプレスのメディアから。画像URLもそこで取得できる。

最後にWAF設定を有効に戻しておく。

WAF（ウェブアプリケーションファイアウォール）
ウェブサイトに対するクロスサイトスクリプティングやSQLインジェクションなどの攻撃を自動的にブロック。これまでのファイアウォールやIDS（侵入検知）、IPS（侵入防止）で防御できなかったウェブサイトへの攻撃を検知して安全なサイト運営を実現。攻撃パターンの定義ファイルは自動でアップデート。最新の攻撃パターンもブロックできる。