WordPress管理画面の投稿一覧カラムをカスタマイズする方法｜追加・削除・並べ替え・ソート

WordPress の管理画面の「投稿」一覧には、タイトル・作成者・カテゴリー・タグ・コメント・日付の列（カラム）が並びます。アイキャッチ画像やカスタムフィールドの値を一覧で見たい、使わない列を消したい、というときは、テーマの functions.php（または独自プラグイン）にコードを書いてカラムを変更します。

この記事では、次の4つを順に説明します。

• 列を追加・削除・並べ替える
• 追加した列に値を表示する
• 列見出しをクリックしてソートできるようにする
• クイック編集でカスタムフィールドを変更できるようにする

コードを書き換える前に、テーマのバックアップを取ってください。親テーマを直接編集すると更新で消えるため、子テーマかコード管理用のプラグインに書くのが安全です。

使うフック

{post_type} には投稿タイプ名が入ります。通常の投稿なら post なので、フック名は manage_post_posts_columns（post が2回続く）です。固定ページは page で manage_page_posts_columns になります。ソート用のフィルターは画面ID（edit-post など）を使うため、manage_edit-post_sortable_columns という形になります。

ユーザー一覧の列は別のフック（manage_users_columns）で変更します。詳しくは「WordPressのユーザー一覧に独自のカラムを追加する方法」を参照してください。

手順1: 列を追加・削除・並べ替える

投稿一覧から「タグ」と「コメント」の列を消し、タイトルの前にサムネイル列を追加する例です。

<?php
// functions.php: 投稿一覧の列を変更する
add_filter( 'manage_post_posts_columns', function ( $columns ) {
	// 不要な列を削除する
	unset( $columns['tags'], $columns['comments'] );

	// タイトル列の直前にサムネイル列を差し込む
	$new_columns = array();
	foreach ( $columns as $key => $label ) {
		if ( 'title' === $key ) {
			$new_columns['thumbnail'] = 'サムネイル';
		}
		$new_columns[ $key ] = $label;
	}
	return $new_columns;
} );

フィルターが受け取る $columns は「列のキー => 見出し」の配列で、この配列の順番がそのまま列の並び順になります。標準の列のキーは次のとおりです。

標準の列は、キーを変えずに残す必要があります。たとえば categories を category という別のキーに付け替えると、WordPress はその列の中身を出力しないため、空の列になります。並べ替えるときは、上の例のようにキーと見出しをそのまま移し替えてください。

手順2: 追加した列に値を表示する

追加した列のセルは空のままなので、manage_{post_type}_posts_custom_column アクションで中身を出力します。このアクションは列のキーと投稿IDの2つを渡すため、add_action() の第4引数に 2 を指定します。

<?php
// functions.php: サムネイル列の中身を出力する
add_action( 'manage_post_posts_custom_column', function ( $column, $post_id ) {
	if ( 'thumbnail' !== $column ) {
		return;
	}
	$thumbnail = get_the_post_thumbnail( $post_id, array( 60, 60 ) );
	if ( $thumbnail ) {
		printf(
			'<a href="%s">%s</a>',
			esc_url( get_edit_post_link( $post_id ) ),
			$thumbnail
		);
	} else {
		echo '—';
	}
}, 10, 2 );

get_the_post_thumbnail() が返す HTML は WordPress がエスケープ済みのものです。投稿の編集画面へのリンクURLは esc_url() でエスケープします。

手順3: カスタム投稿タイプにカスタムフィールドの列を追加する

ここからは、カスタム投稿タイプ book に price（価格）というカスタムフィールドがある場合を例にします。投稿タイプ名とフィールド名は自分のサイトのものに置き換えてください。

<?php
// functions.php: book の一覧に「価格」列を追加する
add_filter( 'manage_book_posts_columns', function ( $columns ) {
	$columns['price'] = '価格';
	return $columns;
} );

// 「価格」列の中身を出力する
add_action( 'manage_book_posts_custom_column', function ( $column, $post_id ) {
	if ( 'price' !== $column ) {
		return;
	}
	$price = get_post_meta( $post_id, 'price', true );
	if ( '' === $price ) {
		echo '—';
		return;
	}
	// data-price はクイック編集（手順5）で値を読み取るために付ける
	printf(
		'<span class="book-price" data-price="%1$s">%2$s円</span>',
		esc_attr( $price ),
		esc_html( number_format( (int) $price ) )
	);
}, 10, 2 );

カスタムフィールドの値は利用者が入力したものなので、出力するときは esc_html() や esc_attr() でエスケープします。カスタムフィールドの登録方法は「WordPressのカスタムフィールドをプラグインなしで実装する方法」で説明しています。

手順4: 列見出しをクリックしてソートできるようにする

列をソート可能として登録すると、見出しがリンクになり、クリックすると URL に orderby=price が付きます。ただし WordPress は price をどう並べればよいか知らないため、pre_get_posts でカスタムフィールドの値で並べるよう指定します。

<?php
// functions.php: 「価格」列をソート可能にする
add_filter( 'manage_edit-book_sortable_columns', function ( $columns ) {
	$columns['price'] = 'price';
	return $columns;
} );

// orderby=price のときにカスタムフィールドの数値で並べる
add_action( 'pre_get_posts', function ( $query ) {
	if ( ! is_admin() || ! $query->is_main_query() ) {
		return;
	}
	if ( 'book' !== $query->get( 'post_type' ) ) {
		return;
	}
	if ( 'price' === $query->get( 'orderby' ) ) {
		$query->set( 'meta_key', 'price' );
		$query->set( 'orderby', 'meta_value_num' );
	}
} );

meta_value_num は値を数値として並べる指定です。文字列として並べたい場合は meta_value にします。

meta_key を指定すると、そのカスタムフィールドを持たない投稿はソート中の一覧に表示されなくなります。全件を並べたい場合は、価格が未入力の投稿にも値（たとえば 0）を入れておくと分かりやすくなります。

手順5: クイック編集でカスタムフィールドを変更できるようにする

一覧の「クイック編集」に価格の入力欄を追加します。必要なものは、入力欄の出力、保存処理、入力欄に現在の値を入れる JavaScript の3つです。

入力欄の出力と保存

<?php
// functions.php: クイック編集に「価格」の入力欄を追加する
add_action( 'quick_edit_custom_box', function ( $column_name, $post_type ) {
	if ( 'book' !== $post_type || 'price' !== $column_name ) {
		return;
	}
	wp_nonce_field( 'book_quick_edit', 'book_quick_edit_nonce' );
	?>
	<fieldset class="inline-edit-col-right">
		<div class="inline-edit-col">
			<label>
				<span class="title">価格</span>
				<span class="input-text-wrap"><input type="number" name="book_price" min="0" value=""></span>
			</label>
		</div>
	</fieldset>
	<?php
}, 10, 2 );

// クイック編集の保存時に価格を更新する
add_action( 'save_post_book', function ( $post_id ) {
	if ( ! isset( $_POST['book_quick_edit_nonce'] ) ) {
		return;
	}
	$nonce = sanitize_text_field( wp_unslash( $_POST['book_quick_edit_nonce'] ) );
	if ( ! wp_verify_nonce( $nonce, 'book_quick_edit' ) ) {
		return;
	}
	if ( ! current_user_can( 'edit_post', $post_id ) ) {
		return;
	}
	if ( isset( $_POST['book_price'] ) && '' !== $_POST['book_price'] ) {
		update_post_meta( $post_id, 'price', absint( $_POST['book_price'] ) );
	}
} );

// 一覧画面（edit.php）で book のときだけ JavaScript を読み込む
add_action( 'admin_enqueue_scripts', function ( $hook_suffix ) {
	if ( 'edit.php' !== $hook_suffix ) {
		return;
	}
	$screen = get_current_screen();
	if ( ! $screen || 'book' !== $screen->post_type ) {
		return;
	}
	wp_enqueue_script(
		'book-quick-edit',
		get_stylesheet_directory_uri() . '/js/book-quick-edit.js',
		array( 'jquery', 'inline-edit-post' ),
		'1.0.0',
		true
	);
} );

quick_edit_custom_box は列名と投稿タイプ名を渡すので、ここでも第4引数に 2 を指定します（指定しないと引数が足りずにエラーになります）。この入力欄は、手順3で追加した独自の列があるときに表示されます。

入力欄に現在の値を入れる JavaScript

クイック編集を開いたとき、入力欄は空のままです。一覧のセルに出力した data-price の値を読み取り、入力欄に入れます。子テーマに js/book-quick-edit.js として保存します。

jQuery( function ( $ ) {
	// WordPress 標準のクイック編集を開く処理を残したまま、処理を追加する
	var wpInlineEdit = inlineEditPost.edit;

	inlineEditPost.edit = function ( id ) {
		wpInlineEdit.apply( this, arguments );

		var postId = 0;
		if ( typeof id === 'object' ) {
			postId = parseInt( this.getId( id ), 10 );
		}
		if ( postId > 0 ) {
			var price = $( '#post-' + postId ).find( '.book-price' ).data( 'price' );
			$( '#edit-' + postId )
				.find( 'input[name="book_price"]' )
				.val( price !== undefined ? price : '' );
		}
	};
} );

保存後に一覧の価格が新しい値で表示されれば完了です。

手順6: 列の幅を整える

サムネイル列は幅が決まっていないため、画像が大きく表示されたり、他の列が狭くなったりします。列には column-（キー） というクラスが付くので、一覧画面だけに CSS を追加します。

<?php
// functions.php: 投稿一覧画面（edit.php）にだけ CSS を出力する
add_action( 'admin_head-edit.php', function () {
	echo '<style>
		.column-thumbnail { width: 70px; }
		.column-thumbnail img { width: 60px; height: 60px; object-fit: cover; }
		.column-price { width: 100px; }
	</style>';
} );

admin_head-edit.php は、投稿一覧画面の head 内でだけ実行されるアクションです。

うまく表示されないとき

• 列が増えない: フック名の投稿タイプ名を確認します。通常の投稿は manage_post_posts_columns、カスタム投稿タイプ book は manage_book_posts_columns です。
• 列はあるが中身が空: manage_{post_type}_posts_custom_column の add_action() に 10, 2 を付けているか、$column の比較に使うキーが手順1で付けたキーと同じかを確認します。
• 列が表示されない: 一覧画面右上の「表示オプション」で、その列のチェックが外れていないか確認します。
• ソートしても並びが変わらない: pre_get_posts の条件（投稿タイプ名・orderby の値）が手順4のソート登録と一致しているか確認します。

まとめ

• 列の追加・削除・並べ替えは manage_{post_type}_posts_columns、中身の出力は manage_{post_type}_posts_custom_column で行います。
• 標準の列はキーを変えずに残します。キーを変えると中身が出力されません。
• ソートは manage_edit-{post_type}_sortable_columns で登録し、pre_get_posts で並べ方を指定します。
• クイック編集は quick_edit_custom_box・保存処理・現在の値を入れる JavaScript の3つで対応します。
• 投稿一覧への列追加の別の例は「WordPressの投稿一覧に独自のカラムを追加する方法」も参照してください。