自作のコードでランダムサムネイル表示を実現する(プラグイン無し)

2026年10月16日

ここでの作業は何のためにしたのかというと、ランダムサムネイルをプラグイン無しで作成するために行なった作業になる。プラグインだとサムネイルとアイキャッチが別々の画像で表示されてしまうから。

この自作のコードはサムネイルとアイキャッチを同じ画像にすることができる。苦労した。
たったそれだけのために、以下の作業を時間をかけてやっている。
手作業でやった方が早かったのかもしれないと思うくらい時間がかかった。

この作業の一連の簡単な流れ

まず、最初に必要なのはランダムに入れる画像の作成。メディアライブラリにそれに使う画像だけをまとめておく。

ギャラリーブロックを作成(ダミーページ)

次に、実際は使わない投稿ページを作成して、そこにギャラリーブロックを作成して、その中に先に作成したランダムサムネイル用の画像を取り込む。
その出来上がったページの『投稿ページID』を所得しておく。

画像のIDを一括で取得する

IDを一つずつ取得するのは大変なので、一括で取得できるコードを作成する。

コードスニペットにランダムサムネイル画像のIDを一度に取得するためのPHPコードを作成する。
そのコードをオンにして。管理画面で再読み込みすると画面の一番上に取得したIDが表示されるのでコピーして下のコードに入れると簡単である。

ランダムサムネイルを実現するコード

外観 > テーマファイルエディッタ > functions.php に以下のコードを入れて、IDを追加する。

// ==========================================
// yStandard:年中画像と季節画像を分けて管理し、
// サムネイルとアイキャッチを完全に一致させる(決定版)
// ==========================================

// 共通:記事IDに基づいて、合体させたメディアIDリストから「固定の1枚」を抽出する関数
function my_get_fixed_media_id( $post_id ) {
    if ( ! $post_id ) {
        return 0;
    }

    // 🌸 1. 年中(オールシーズン)使いたい画像のメディアID
    $all_season_ids = array(
		29168,29163,29160,29158,29157,29155,29153,29150,29149,29148,
		29147,29146,29145,29144,29143,29141,29140,29139,29138,29137,
		29136,29135,29134,29133,29132,29131,29130,29129,29128,29127,
		29126,29124,29122,29120,29119,29033,29031,29027,29026,29025,
		29024,29022,29021,29019,29018,29016,29015,29014,29013,29012,
		29011,29010,29009,29008,29007,29006,29005,29004,29002,28995,
    );

    // 🍁 2. 季節ごとに入れ替えたい画像のメディアID
    // 💡 季節が変わったら、この中の数字だけを書き換えればOKです!
    $seasonal_ids = array(
        29134,29133,29132,29131,29130,29129,29128,29127,
    );

    // 3. 2つのリストを1つの大きなリストに自動で合体させます
    $media_ids = array_merge( $all_season_ids, $seasonal_ids );

    if ( empty( $media_ids ) ) {
        return 0;
    }

    // 記事IDを元に、その記事用の固定インデックスを計算してIDを1つ決定
    $index = absint( $post_id ) % count( $media_ids );
    return $media_ids[ $index ];
}

// ------------------------------------------
// 以下はテーマへの出力処理(触らなくて大丈夫です)
// ------------------------------------------

// 一覧ページ(アーカイブ)のサムネイルを記事ごとに固定連動
add_filter( 'ys_get_archive_default_image', function( $image, $class, $icon_class, $thumbnail_size ) {
    $post_id = get_the_ID();
    $chosen_id = my_get_fixed_media_id( $post_id );
    
    if ( $chosen_id ) {
        return wp_get_attachment_image( $chosen_id, $thumbnail_size, false, [
            'class' => $class,
            'alt'   => '',
        ] );
    }
    return $image;
}, 10, 4 );

// 個別記事ページでアイキャッチ未設定の場合でも「ある」と認識させる
add_filter( 'has_post_thumbnail', function( $has_thumbnail, $post, $thumbnail_id ) {
    if ( is_single() && ! $has_thumbnail ) {
        return true;
    }
    return $has_thumbnail;
}, 10, 3 );

// 個別記事ページのアイキャッチ画像を、サムネイルと同じメディアIDの画像に差し替える
add_filter( 'post_thumbnail_html', function( $html, $current_post_id, $post_thumbnail_id, $size, $attr ) {
    if ( is_single() && ! get_post_meta( $current_post_id, '_thumbnail_id', true ) ) {
        $chosen_id = my_get_fixed_media_id( $current_post_id );
        if ( $chosen_id ) {
            return wp_get_attachment_image( $chosen_id, 'post-thumbnail', false, [
                'class' => 'attachment-post-thumbnail size-post-thumbnail wp-post-image',
                'alt'   => '',
            ] );
        }
    }
    return $html;
}, 10, 5 );

簡単な流れは以上のようになる。

特定のギャラリーの画像IDだけを一度に抽出するコード

投稿画面で1つずつIDを調べるのは大変。
まずは、以下の方法で大量の画像IDをまとめてコピーすることから始める。

このコードは、画像のIDを一辺に取得するために、テスト用のページをダミーで作成して、その中にギャラリーブロックを入れて必要な画像をギャラリーを一度作成する必要がある。
これによって特定の画像のIDだけを取得することができるというわけである。

IDを取得するためにfunctions.phpに、以下のコードを追加して保存。(不要になったら削除すること)
これによって、複数のIDを簡単に取得できるようになる。

add_action('admin_notices', function() {
    // 【設定】IDを調べたい「固定ページ」または「投稿」のID(数字)をここに入力してください
    $target_page_id = 123; 

    // 指定したページのデータを取得
    $post = get_post($target_page_id);
    if ( ! $post ) return;

    // ページ内のブロックデータを解析
    $blocks = parse_blocks($post->post_content);
    $gallery_ids = array();

    foreach ($blocks as $block) {
        // 通常のギャラリーブロックを探す
        if ( 'core/gallery' === $block['blockName'] && isset($block['attrs']['ids']) ) {
            $gallery_ids = array_merge($gallery_ids, $block['attrs']['ids']);
        }
        
        // 入れ子(インナーブロック)になっている場合の対策
        if ( !empty($block['innerBlocks']) ) {
            foreach ($block['innerBlocks'] as $inner_block) {
                if ( 'core/image' === $inner_block['blockName'] && isset($inner_block['attrs']['id']) ) {
                    // 近年のWordPress仕様(1枚ずつ画像ブロックが入っている場合)のID回収
                    $gallery_ids[] = $inner_block['attrs']['id'];
                }
            }
        }
    }

    // 重複を削除して綺麗にする
    $gallery_ids = array_unique(array_map('intval', $gallery_ids));

    if ( empty($gallery_ids) ) {
        echo '<div class="notice notice-warning" style="margin-top:20px; padding:15px;"><p>⚠ 指定したページの中にギャラリーブロック、または画像ブロックが見つかりませんでした。</p></div>';
        return;
    }

    // カンマ区切り(例: 101,102,103...)に変換
    $comma_ids = implode(',', $gallery_ids);

    // 管理画面の一番上に、そのギャラリー専用のIDリストを表示
    echo '<div class="notice notice-success" style="margin-top: 20px; padding: 15px; border-left-color: #46b450;">';
    echo '  <h4 style="margin: 0 0 10px 0;">🎉 【ギャラリー限定】画像IDリスト(' . count($gallery_ids) . '枚分)</h4>';
    echo '  <p style="margin: 0 0 10px 0; font-size: 13px;">このページ(ID: ' . $target_page_id . ')のギャラリーで使われている画像だけのIDです。</p>';
    echo '  <input type="text" value="' . esc_attr($comma_ids) . '" style="width: 100%; padding: 8px; font-family: monospace; font-size: 14px;" readonly onclick="this.select();">';
    echo '  <p style="margin: 5px 0 0 0; color: #666; font-size: 12px;">※ クリックすると全選択されます。コピーしたらこのコードは消去してください。</p>';
    echo '</div>';
});

ギャラリーブロックで一度だテストのギャラリーを作成する(不要なら削除)

上のコードの3行目にある $target_page_id = 123; の 123 を、「今ギャラリー画像を置いてあるページ(投稿・固定ページ)のID」に書き換えて保存。

下の例では、上のコードで 28704 と置き換える。

ランダムサムネイル画像の一覧集の作成の仕方

WordPressの管理画面をどこでもいいのでリフレッシュ(再読み込み)すると、画面の最上部に「そのギャラリーに使われている画像だけのID」がカンマ区切りでずらっと表示されるようになる。
それをクリックしてコピーするだけで、一度にIDを取得できるようになる。

ランダムサムネイル画像の一覧集の作成の仕方

あとは、タイトルやファイル名を出したい本番の場所(ショートコードブロック)に、コピーした数字を貼り付けるだけ。

実際は以下のようになる。これはダミー画像。

自作のコードでランダムサムネイル表示を実現する(プラグイン無し)
自作のコードでランダムサムネイル表示を実現する(プラグイン無し)

これで、表示するための下準備は済んだことになる。
以下の設定で、このギャラリー表示を実際に表示するようにする。

最後に

ここで取得した画像のIDを別のPHPコードに入れてランダムサムネイル表示を実現することになる。