ランダムサムネイル画像ギャラリーの作成コード

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

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

自分で作成したギャラリーの表示設定
特定のギャラリーの画像IDだけを一度に抽出するコード
- ギャラリーブロックで一度だテストのギャラリーを作成する（不要なら削除）
最後に

自分で作成したギャラリーの表示設定

このギャラリーはプラグインでなく、自前のコードを作成して作る独自のギャラリー表示になる。
そのコードに対してCSSでコーティングしている。

ギャラリーを作るPHPコードの追加

WordPressのテーマ内にある functions.php に、以下のPHPコードを貼り付ける。
このコードは一切何も変更する必要は無い。

function my_custom_gallery_shortcode( $atts ) {
    // ショートコードの引数を設定 (idsに画像IDをカンマ区切りで指定)
    $atts = shortcode_atts( array(
        'ids' => '',
    ), $atts );

    if ( empty( $atts['ids'] ) ) {
        return '<p>画像IDが指定されていません。</p>';
    }

    // カンマ区切りの文字列を配列に変換
    $image_ids = array_map( 'intval', explode( ',', $atts['ids'] ) );
    
    $output = '<div class="custom-gallery-container">';

    foreach ( $image_ids as $id ) {
        if ( ! $id ) continue;

        // 各情報の取得
        $img_url   = wp_get_attachment_image_url( $id, 'medium' ); // 読み込み軽量化のためmedium（中）サイズを指定
        $title     = get_the_title( $id ); // タイトルの取得
        $file_path = get_attached_file( $id ); 
        $filename  = $file_path ? basename( $file_path ) : '不明'; // ファイル名の取得

        if ( ! $img_url ) continue;

        // HTML出力の組み立て
        $output .= '<div class="gallery-item">';
        $output .= '  <div class="gallery-img-wrapper"><img src="' . esc_url( $img_url ) . '" alt="' . esc_attr( $title ) . '" loading="lazy"></div>'; // 遅延読み込み対応
        $output .= '  <div class="gallery-meta-info">';
        $output .= '    <p class="meta-title"><strong>タイトル:</strong> ' . esc_html( $title ) . '</p>';
        $output .= '    <p class="meta-filename"><strong>ファイル名:</strong> ' . esc_html( $filename ) . '</p>';
        $output .= '    <p class="meta-id"><strong>画像ID:</strong> ' . intval( $id ) . '</p>';
        $output .= '  </div>';
        $output .= '</div>';
    }

    $output .= '</div>';

    return $output;
}
add_shortcode( 'my_gallery', 'my_custom_gallery_shortcode' );

ギャラリーレイアウトのCSSコードの追加

100枚の画像をすっきり並べるため、格子状（グリッド）に並ぶCSSを追加。

/* ギャラリー全体のレイアウト（レスポンシブ対応） */
.custom-gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

/* 各画像ブロックの枠線や余白 */
.gallery-item {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 画像のサイズ制限 */
.gallery-img-wrapper img {
    width: 100%;
    height: 160px;
    object-fit: cover; /* 画像の比率を保ったまま綺麗にトリミング */
    display: block;
}

/* 文字情報の装飾 */
.gallery-meta-info {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #444;
}
.gallery-meta-info p {
    margin: 4px 0 !important;
    word-break: break-all; /* 長いファイル名がはみ出さないように対策 */
}

このコードをショートコードを使って投稿ページに表示する。

投稿ページに『ショートコード』ブロックを設置

次に投稿ページに『ショートコード』ブロックを入れる。
その中に以下のような画像のIDを入れる。画像のIDの数値は、以下のところで確認することができる。

  
      タイトル: 投稿記事_ID = 95
    ファイル名: post-id-95-28.png
    画像ID: 102
  
  
      タイトル: 投稿記事_ID = 95
    ファイル名: post-id-95-27.png
    画像ID: 103
  
  
      タイトル: 投稿記事_ID = 95
    ファイル名: post-id-95-26.png
    画像ID: 105

このPHPとCSSの2つのコード作成で、自作ギャラリーの下準備が出来たことになる。

この画像のIDを一つずつ、手作業で入れていくのが最も確実ではあるが、沢山ある場合は大変なので、以下の方法でコードを一度に取得することができる。

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

投稿画面で1つずつIDを調べるのは大変。
まずは、以下の方法で大量の画像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>';
});