2026年5月21日

WordPressの投稿一覧にサムネイル（アイキャッチ画像）を表示する方法

テーマ・デザイン

管理画面の投稿一覧にアイキャッチ画像のサムネイル列を出すには、manage_{投稿タイプ}_posts_columns フィルターで列を追加し、manage_{投稿タイプ}_posts_custom_column アクションで get_the_post_thumbnail() を出力します。この記事では、そのコードと列幅を整えるCSSの読み込み方を解説し、あわせてサイト側（フロント）の記事一覧にサムネイルを出す方法も、クラシックテーマとブロックテーマの両方で紹介します。

前提：アイキャッチ画像が有効になっているか

サムネイルを表示する前に、投稿タイプがアイキャッチ画像に対応しているかを確認します。投稿の編集画面のサイドバーに「アイキャッチ画像」の欄があれば有効です。

欄が無い場合、クラシックテーマでは子テーマの functions.php に次の1行を追加します。最近のテーマの多くは最初から有効です。

<?php
add_action( 'after_setup_theme', function () {
	add_theme_support( 'post-thumbnails' );
} );

カスタム投稿タイプの場合は、register_post_type() の supports に thumbnail が含まれている必要があります。ここが抜けていると、テーマ側で有効にしても画像を設定できません。

管理画面の投稿一覧にサムネイル列を追加する

次のコードは、投稿一覧のチェックボックス列の直後に「画像」列を追加し、60×60ピクセルに収めたサムネイルを表示します。画像をクリックするとその投稿の編集画面が開くようにしています。子テーマの functions.php か、テーマに依存させたくなければ小さなプラグインに書きます。

<?php
/**
 * 投稿一覧に「画像」列を追加する（見出し）
 */
function mysite_add_thumbnail_column( $columns ) {
	$new_columns = array();
	foreach ( $columns as $key => $label ) {
		$new_columns[ $key ] = $label;
		if ( 'cb' === $key ) {
			$new_columns['mysite_thumb'] = __( '画像', 'mysite' );
		}
	}
	return $new_columns;
}
add_filter( 'manage_post_posts_columns', 'mysite_add_thumbnail_column' );

/**
 * 「画像」列の中身を出力する
 */
function mysite_render_thumbnail_column( $column_name, $post_id ) {
	if ( 'mysite_thumb' !== $column_name ) {
		return;
	}
	if ( ! has_post_thumbnail( $post_id ) ) {
		echo '<span aria-hidden="true">&#8212;</span>';
		return;
	}
	$thumb     = get_the_post_thumbnail( $post_id, array( 60, 60 ) );
	$edit_link = get_edit_post_link( $post_id );
	if ( $edit_link ) {
		printf( '<a href="%s">%s</a>', esc_url( $edit_link ), $thumb );
	} else {
		echo $thumb;
	}
}
add_action( 'manage_post_posts_custom_column', 'mysite_render_thumbnail_column', 10, 2 );

コードの意図を補足します。

列のキーを thumbnail のような一般的な名前にすると、プラグインが同じキーを使っていた場合に衝突します。mysite_thumb のように接頭辞を付けておくと安全です。
get_the_post_thumbnail() はコアが属性をエスケープした <img> タグを返すため、そのまま出力できます。URLは esc_url() を通します。
get_edit_post_link() は、閲覧中のユーザーにその投稿の編集権限が無いと空を返します。空のときはリンクを付けずに画像だけ出すようにしています。
画像が無い投稿にはダッシュを出し、列が空欄で崩れて見えないようにしています。

固定ページにも出したい場合は、見出し側を manage_pages_columns、中身側を manage_page_posts_custom_column に変えて同じ関数を登録します。カスタム投稿タイプ book なら manage_book_posts_columns と manage_book_posts_custom_column です。

サイズ指定 array( 60, 60 ) の意味

サイズに配列を渡すと、WordPressは登録済みの画像サイズの中から近いもの（通常は「サムネイル」サイズ）を選び、width と height 属性を60ピクセル以内に縮めて出力します。新しい画像ファイルが作られるわけではありません。

高解像度ディスプレイでぼやけるのが気になる場合や、正方形に切り抜いた画像を使いたい場合は、専用サイズを登録する方法もあります。

<?php
add_action( 'after_setup_theme', function () {
	add_image_size( 'mysite-admin-thumb', 120, 120, true ); // 120×120で切り抜き
} );

登録後は get_the_post_thumbnail( $post_id, 'mysite-admin-thumb' ) のように名前で指定し、列幅はCSSで60ピクセルに収めます。追加したサイズは、それ以降にアップロードした画像にだけ作られます。既存の画像に適用するには、サムネイルの再生成が必要です。

列幅をCSSで整える

列を追加しただけだと、ブラウザが自動で幅を決めるため、タイトル列が狭くなったり画像列が広がったりします。CSSは admin_enqueue_scripts で、投稿一覧画面（edit.php）のときだけ読み込みます。

<?php
function mysite_thumbnail_column_css( $hook_suffix ) {
	if ( 'edit.php' !== $hook_suffix ) {
		return;
	}
	$css = '
		.wp-list-table .column-mysite_thumb { width: 72px; }
		.wp-list-table .column-mysite_thumb img {
			width: 60px;
			height: 60px;
			object-fit: cover;
			border-radius: 4px;
		}
	';
	wp_register_style( 'mysite-admin-list', false, array(), '1.0.0' );
	wp_enqueue_style( 'mysite-admin-list' );
	wp_add_inline_style( 'mysite-admin-list', $css );
}
add_action( 'admin_enqueue_scripts', 'mysite_thumbnail_column_css' );

列の見出しと各セルには column-{列のキー} というクラスが付くため、.column-mysite_thumb で幅を指定できます。admin_head で <style> を直接出力する方法でも動きますが、読み込む画面を $hook_suffix で絞れる admin_enqueue_scripts の方が、他の管理画面に影響を出しにくくなります。

保存後に「投稿」→「投稿一覧」を開き、画像列が表示されること、画像の無い投稿でダッシュが出ること、画像クリックで編集画面に移ることを確認してください。列が出ないときは、画面右上の「表示オプション」で列のチェックが外れていないかも見ます。画面幅の狭いスマートフォンでは、主要な列以外が折りたたまれる仕様です。

サイト側の記事一覧にサムネイルを出す場合

「投稿一覧にサムネイル」を、ブログのトップやカテゴリーページの記事一覧の話として探している方もいるはずです。こちらはテーマの種類で方法が変わります。

クラシックテーマ

index.php や archive.php などのループの中で the_post_thumbnail() を呼びます。子テーマにテンプレートをコピーして編集してください。

<?php if ( has_post_thumbnail() ) : ?>
	<a href="<?php the_permalink(); ?>" class="entry-thumb">
		<?php the_post_thumbnail( 'medium' ); ?>
	</a>
<?php endif; ?>

the_permalink() はURLをエスケープして出力するため、そのまま href に使えます。サイズは thumbnail、medium、large などの登録済みサイズ名で指定できます。

ブロックテーマ

ブロックテーマでは、記事一覧は「クエリーループ」ブロックとその中の「投稿テンプレート」で作られています。「外観」→「エディター」でホームやアーカイブのテンプレートを開き、投稿テンプレートの中に「アイキャッチ画像」ブロックを追加すると、各記事のサムネイルが表示されます。ブロックの設定でリンクの有無や縦横比、サイズを調整できます（2026年10月現在）。

固定ページの本文に記事一覧を置いている場合は、同じくクエリーループブロックを使うか、「最新の投稿」ブロックの設定でアイキャッチ画像の表示を有効にします。

うまく表示されないときの確認ポイント

管理画面の列にダッシュしか出ない：その投稿にアイキャッチ画像が設定されているか、投稿タイプが thumbnail に対応しているかを確認します。
列自体が出ない：フック名の投稿タイプ部分が合っているか（投稿は post、固定ページは pages 系）、add_action() の引数の数が 2 になっているかを見直します。
画像が大きく崩れる：CSSが読み込まれているか、ブラウザの開発者ツールでセルのクラス名を確認します。
サイト側だけ表示されない：キャッシュ系プラグインやサーバーキャッシュを削除してから確認します。

functions.php の編集で構文エラーが出ると、画面が真っ白になることがあります。編集前に元のファイルを保存し、FTPやファイルマネージャーで戻せるようにしておいてください。

まとめ

管理画面のサムネイル列は、manage_{投稿タイプ}_posts_columns で列を追加し、manage_{投稿タイプ}_posts_custom_column で get_the_post_thumbnail() を出力して作ります。
列のキーには接頭辞を付け、URLは esc_url() でエスケープし、編集リンクは権限が無い場合に備えて空チェックをします。
array( 60, 60 ) は既存サイズを縮めて表示する指定です。鮮明さが必要なら add_image_size() で専用サイズを登録し、既存画像は再生成します。
列幅のCSSは admin_enqueue_scripts で edit.php のときだけ読み込みます。
サイト側の記事一覧は、クラシックテーマならループ内の the_post_thumbnail()、ブロックテーマならクエリーループ内の「アイキャッチ画像」ブロックで表示します。