プラグインを使ったランダムサムネイルの表示もあるが、今回は同じように表示できて、サムネイルと同じ画像をアイキャッチ側でも表示できる方法をAIに聞いてやってみた。
yStandardで「用意した複数の画像からランダムにアイキャッチを表示させる」場合、プラグインを使う方法と、フック（プログラムコード）を使う方法の2パターンがあります。
WP Random Post Thumbnails でもサムネイルのランダム表示はできたが、サムネイルをクリックしたとき同じ画像のアイキャッチを表示することができなかった。
15〜17行目のように、画像のURLを入れるだけである。
これでアイキャッチ画像を設定していないページに自動的にランダムに画像を配置るすことができるようになり、サムネイルをクリックすると、同じ画像のアイキャッチも表示されることになる。
実装手順
- ランダムに使いたい画像をアップロードする
WordPressの「メディア」＞「新しいメディアファイルを追加」から、ランダム表示させたい画像をすべてアップロードする。それぞれの画像の 「URLをクリップボードにコピー」 して、メモ帳などに控えておく。 - functions.php にコードを追加する
「外観」＞「テーマファイルエディター」を開き、yStandardの子テーマ（yStandard Child） のfunctions.phpを開き、以下のコードを一番下に貼り付ける。
画像のIDを使ったランダム表示
画像のIDを使ってランダムに画像を表示することができる。
現在使っているコード
// ==========================================
// yStandard：年中画像と季節画像を分けて管理し、
// サムネイルとアイキャッチを完全に一致させる（決定版）
// ==========================================
// 共通：記事IDに基づいて、合体させたメディアIDリストから「固定の1枚」を抽出する関数
function my_get_fixed_media_id( $post_id ) {
if ( ! $post_id ) {
return 0;
}
// 🌸 1. 年中（オールシーズン）使いたい画像のメディアID
$all_season_ids = array(
29028, 29027, 29026, 29025, 29024, 29023, 29022, 29021, 29019, 29018, 29016, 29015, 29014, 29013, 29012, 29011,
29010, 29009, 29008, 29007, 29006, 29005, 29004, 29003, 29002, 29001, 29000, 28999, 28998, 28996, 28995, 28994,
28993, 28992, 28990, 28989, 28988, 28987, 28986, 28985, 28983, 28982, 28981, 28980, 28979, 28978, 28977, 28975,
);
// 🍁 2. 季節ごとに入れ替えたい画像のメディアID
// 💡 季節が変わったら、この中の数字だけを書き換えればOKです！
$seasonal_ids = array(
28974, 28973, 28972, 28971, 28970, 28969, 28968, 28954,
);
// 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 );画像のURLを使ったランダム表示
以下のコードは完全に成功したものになる
// ==========================================
// yStandard：サムネイルとアイキャッチを同じ画像で固定ランダム化（安全版）
// ==========================================
add_action( 'wp', 'mystandard_setup_fixed_random_images' );
function mystandard_setup_fixed_random_images() {
// 1. 各種関数を安全に取得（記事IDをベースに特定の1枚を決める）
$post_id = get_the_ID();
if ( ! $post_id ) {
return;
}
// 💡 画像を追加・変更したい時は、この中身だけを編集すればOKです！
$images = array(
'https://example.com',
'https://example.com',
'https://example.com',
);
if ( empty( $images ) ) {
return;
}
// 記事IDを元に、このページで使う「固定の画像URL」を1つ決定する
$index = absint( $post_id ) % count( $images );
$chosen_image_url = $images[ $index ];
// 2. 一覧ページ（アーカイブ）のサムネイルを固定
add_filter( 'ys_get_archive_default_image', function( $html ) use ( $chosen_image_url ) {
if ( $chosen_image_url ) {
$html = '<img src="' . esc_url( $chosen_image_url ) . '" alt="" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" loading="lazy" />';
}
return $html;
} );
// 3. 個別記事ページでアイキャッチ未設定の場合でも「ある」と認識させる
add_filter( 'has_post_thumbnail', function( $has_thumbnail, $post, $thumbnail_id ) {
if ( is_single() && ! $has_thumbnail ) {
return true;
}
return $has_thumbnail;
}, 10, 3 );
// 4. 個別記事ページのアイキャッチ画像を、手順2と同じ画像に差し替える
add_filter( 'post_thumbnail_html', function( $html, $current_post_id, $post_thumbnail_id, $size, $attr ) use ( $chosen_image_url ) {
if ( is_single() && ! get_post_meta( $current_post_id, '_thumbnail_id', true ) ) {
if ( $chosen_image_url ) {
$html = '<img src="' . esc_url( $chosen_image_url ) . '" alt="" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" loading="lazy" />';
}
}
return $html;
}, 10, 5 );
}以下のコードでもいけるのではと思う。テキストを標準テキストで保存しなかったので重大ないエラーになった可能性がある。（修正してもらったのが最初のコードになる）
これも使えるし、コード自体が短いので、こちらが良いかも。
// ==========================================
// yStandard：未設定記事のサムネイルとアイキャッチを同じ画像で固定ランダム化
// ==========================================
function my_get_fixed_random_image_url( $post_id ) {
// 💡 画像を追加・変更したい時は、この中身だけを編集すればOKです！
$images = array(
'https://example.com',
'https://example.com',
'https://example.com',
);
if ( empty( $images ) ) {
return '';
}
$index = absint( $post_id ) % count( $images );
return $images[ $index ];
}
// 1. 一覧ページのサムネイル設定
add_filter( 'ys_get_archive_default_image', 'my_archive_random_image' );
function my_archive_random_image( $html ) {
$post_id = get_the_ID();
$url = my_get_fixed_random_image_url( $post_id );
if ( $url ) {
$html = '<img src="' . esc_url( $url ) . '" alt="" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" loading="lazy" />';
}
return $html;
}
// 2. 個別記事ページでのアイキャッチ判定設定
add_filter( 'has_post_thumbnail', 'my_has_post_thumbnail_random', 10, 3 );
function my_has_post_thumbnail_random( $has_thumbnail, $post, $thumbnail_id ) {
if ( is_single() && ! $has_thumbnail ) {
return true;
}
return $has_thumbnail;
}
// 3. 個別記事ページのアイキャッチ画像出力設定
add_filter( 'post_thumbnail_html', 'my_single_random_image', 10, 5 );
function my_single_random_image( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
if ( is_single() && ! get_post_meta( $post_id, '_thumbnail_id', true ) ) {
$url = my_get_fixed_random_image_url( $post_id );
if ( $url ) {
$html = '<img src="' . esc_url( $url ) . '" alt="" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" loading="lazy" />';
}
}
return $html;
}実際の画像のURLを使ってランダムに表示するコード（これも動作する）
// ==========================================
// yStandard：偏りをなくしてサムネイルとアイキャッチを一致させる（ハッシュ化版）
// ==========================================
add_action( 'wp', 'mystandard_setup_fixed_random_images' );
function mystandard_setup_fixed_random_images() {
$post_id = get_the_ID();
if ( ! $post_id ) {
return;
}
// 💡 画像を追加・変更したい時は、この中身だけを編集すればOKです！
$images = array(
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-64.png',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-63-1.png',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-62.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-61.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-60.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-59.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-58.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-57.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-55.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-54-1.png',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-52.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-51.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-50.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-49.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-48.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-47.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-45.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-44.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-43.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-42.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-41.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-39.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-38.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-37-1.png',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-36.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-35-1.png',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-34.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-33.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-32.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-30.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-29.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-28.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-27.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-26.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-25.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-24.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-23.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-22.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-21.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-20.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-19.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-17.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-16.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-15.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-14.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-13.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-12.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-11.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-10.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-9.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-8.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-7.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-6.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-5.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-4.jpg',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-3.png',
'https://polo-web.com/wp-content/uploads/2026/10/random-thumbnail-53.png',
);
if ( empty( $images ) ) {
return;
}
// 🛠️ 改良ポイント：記事IDをハッシュ化して、並びの偏りを完全にバラバラにする
$shuffled_number = crc32( (string)$post_id );
$index = $shuffled_number % count( $images );
$chosen_image_url = $images[ $index ];
// 1. 一覧ページのサムネイルを固定
add_filter( 'ys_get_archive_default_image', function( $html ) use ( $chosen_image_url ) {
if ( $chosen_image_url ) {
$html = '<img src="' . esc_url( $chosen_image_url ) . '" alt="" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" loading="lazy" />';
}
return $html;
} );
// 2. 個別記事ページで「アイキャッチあり」と認識させる
add_filter( 'has_post_thumbnail', function( $has_thumbnail, $post, $thumbnail_id ) {
if ( is_single() && ! $has_thumbnail ) {
return true;
}
return $has_thumbnail;
}, 10, 3 );
// 3. 個別記事ページのアイキャッチ画像をサムネイルと一致させる
add_filter( 'post_thumbnail_html', function( $html, $current_post_id, $post_thumbnail_id, $size, $attr ) use ( $chosen_image_url ) {
if ( is_single() && ! get_post_meta( $current_post_id, '_thumbnail_id', true ) ) {
if ( $chosen_image_url ) {
$html = '<img src="' . esc_url( $chosen_image_url ) . '" alt="" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" loading="lazy" />';
}
}
return $html;
}, 10, 5 );
}サムネイル画像をランダムに表示するだけのコード
専用のフックを使い、コードで安全に実装する（プラグイン不要）【推奨】
yStandardには、アイキャッチ画像が設定されていない場合の「デフォルト画像」を開発者向けに変更できる ys_get_archive_default_image という仕組み（フィルターフック）が最初から備わっている、これを使う。
子テーマの functions.php に以下のコードを貼り付けるだけで、プラグインを一切入れずに、用意した複数の画像からランダムに表示させることができる。プラグインの競合によるエラーの心配がないため、最も安全でおすすめの方法になる。
// yStandardの未設定アイキャッチをランダムにする設定
add_filter( 'ys_get_archive_default_image', 'mystandard_random_default_image' );
function mystandard_random_default_image( $default_image_html ) {
// 1. 用意した画像のURLをここに並べます（カンマ区切り、いくつでも増やせます）
$images = array(
'https://example.com',
'https://example.com',
'https://example.com',
);
// 2. 配列からランダムに1つの画像URLを抽出
$random_image_url = $images[ array_rand( $images ) ];
// 3. 表示するHTMLを生成（yStandardの標準仕様に合わせます）
if ( $random_image_url ) {
$default_image_html = '<img src="' . esc_url( $random_image_url ) . '" alt="" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" loading="lazy" />';
}
return $default_image_html;
}安全面やサイトの表示速度（パフォーマンス）を考慮すると、フックの活用の方法が非常におすすめ。