ショートコードで画像をランダムに表示させる方法

この記事では、WordPress の投稿ページ・固定ページで使えるショートコード形式の「ランダム画像表示」を実装する方法を紹介します。
ショートコードを使えば、記事中の任意の位置にランダム画像を差し込めます。

1 実装のポイント

• ショートコード [random_image] を使って画像をランダム表示
• 投稿・固定ページどちらにも対応
• 画像の数を自由に設定可能
• お知らせ・アーカイブ・カテゴリーには影響なし

2 functions.php にコードを追加

//------------------------------------------------
// ランダム画像ボックス
//------------------------------------------------
function show_random_image_shortcode() {

    // ランダム表示する画像パスを設定
    $images = [
        'https://sample.com/wp-content/uploads/20××/××/sample1.jpg',
        'https://sample.com/wp-content/uploads/20××/××/sample2.jpg',
        'https://sample.com/wp-content/uploads/20××/××/sample3.jpg',
    ];

    // 配列からランダムに1枚取得
    $random_image = $images[array_rand($images)];

    // HTMLを出力
    ob_start();
    ?>
    <div class="random-image-box">
        <img src="<?php echo esc_url($random_image); ?>" alt="ランダム画像">
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('random_image', 'show_random_image_shortcode');
    

ウィジェット、記事内で表示する場合：

[random_image]
  

3 汎用CSS

/* ------------------
 * ランダム画像ボックス
 * -----------------*/

.random-image-box {
  text-align: center; /** 画像を中央寄せ **/
  margin: 20px 0; /** 上下に余白を追加 **/
}

/* 画像デザイン */
.random-image-box img {
  max-width: 100%; /** レスポンシブ対応 **/
  height: auto; /** 縦横比を保持 **/
  border-radius: 10px; /** 角を丸くする **/
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); /** 影を付ける **/
  transition: transform 0.3s ease; /** ホバーアニメーション **/
}

/* ホバー時の拡大 */
.random-image-box img:hover {
  transform: scale(1.03); /** わずかに拡大 **/
}
    

4 完成イメージ

5 代用プラグイン

プラグインを使う場合は「Random Image Widget」などもありますが、
functions.php に直接コードを追加すれば、軽量で高速に動作します。

6 まとめ

• ショートコード [random_image] でランダム画像を簡単挿入
• 投稿・固定ページ両方に対応
• 軽量・高速・PHPのみで完結
• CSSで自由にデザイン調整可能

記事の途中や文末など、好きな位置にランダム画像を配置できる柔軟な方法です。
サイトを動的に見せたい方におすすめです。