WordPressの管理画面カラムをカスタマイズする方法

はじめに

「投稿一覧にサムネイルやカスタムフィールドの値を表示したい」「不要なカラム（作成者・タグなど）を削除してすっきりさせたい」「カスタムフィールドの値でソートできるようにしたい」——管理画面カラムのカスタマイズは編集作業の効率を大幅に改善します。

症状・原因

WordPressの投稿一覧にはタイトル・作成者・カテゴリー・タグ・コメント・日付のカラムが表示されます。カスタム投稿タイプや独自のカスタムフィールドを使う場合、デフォルトカラムは情報量が不足します。manage_{post_type}_posts_columnsフィルターで追加・削除できます。

解決手順

ステップ1：投稿一覧にカスタムカラムを追加する

// functions.php: 投稿一覧にサムネイルと価格カラムを追加
// manage_{post_type}_posts_columns フィルター（post_type=post の場合は posts）
add_filter( 'manage_post_posts_columns', function( array $columns ): array {
    // 不要なカラムを削除
    unset( $columns['author'] );
    unset( $columns['tags'] );
    unset( $columns['comments'] );

    // カラムを再構成（順序を制御）
    $new_columns = [];
    $new_columns['cb']        = $columns['cb'];
    $new_columns['thumbnail'] = 'サムネイル';       // カスタム追加
    $new_columns['title']     = $columns['title'];
    $new_columns['category']  = $columns['categories'];
    $new_columns['date']      = $columns['date'];

    return $new_columns;
} );

// カスタム投稿タイプ（product）の場合
add_filter( 'manage_product_posts_columns', function( array $columns ): array {
    unset( $columns['date'] );

    $columns['thumbnail']  = 'サムネイル';
    $columns['price']      = '価格';
    $columns['stock']      = '在庫';
    $columns['post_date']  = '登録日';

    return $columns;
} );

ステップ2：カスタムカラムの内容を出力する

// functions.php: カスタムカラムのコンテンツを表示
add_action( 'manage_post_posts_custom_column', function( string $column, int $post_id ): void {
    switch ( $column ) {
        case 'thumbnail':
            $thumbnail = get_the_post_thumbnail( $post_id, [ 60, 60 ] );
            if ( $thumbnail ) {
                echo '<a href="' . esc_url( get_edit_post_link( $post_id ) ) . '">' . $thumbnail . '</a>';
            } else {
                echo '<span style="color:#aaa;">—</span>';
            }
            break;
    }
}, 10, 2 );

// カスタム投稿タイプ（product）のカラム内容
add_action( 'manage_product_posts_custom_column', function( string $column, int $post_id ): void {
    switch ( $column ) {
        case 'thumbnail':
            $thumb = get_the_post_thumbnail( $post_id, [ 60, 60 ] );
            echo $thumb ?: '<span style="color:#aaa;">—</span>';
            break;

        case 'price':
            $price = get_post_meta( $post_id, '_price', true );
            echo $price ? '¥' . number_format( (int) $price ) : '<span style="color:#aaa;">未設定</span>';
            break;

        case 'stock':
            $stock = get_post_meta( $post_id, '_stock', true );
            $color = ( (int) $stock > 0 ) ? '#00a32a' : '#d63638';
            printf( '<span style="color:%s;font-weight:600;">%s</span>',
                esc_attr( $color ),
                $stock !== '' ? absint( $stock ) . '個' : '未設定'
            );
            break;
    }
}, 10, 2 );

ステップ3：カスタムカラムをソート可能にする

// functions.php: カラムをソート可能にする
add_filter( 'manage_edit-product_sortable_columns', function( array $columns ): array {
    $columns['price'] = 'price'; // クエリキー
    $columns['stock'] = 'stock';
    return $columns;
} );

// ソート時のWP_Queryを調整
add_action( 'pre_get_posts', function( WP_Query $query ): void {
    if ( ! is_admin() || ! $query->is_main_query() ) {
        return;
    }

    $orderby = $query->get( 'orderby' );

    if ( 'price' === $orderby ) {
        $query->set( 'meta_key', '_price' );
        $query->set( 'orderby', 'meta_value_num' );
    }

    if ( 'stock' === $orderby ) {
        $query->set( 'meta_key', '_stock' );
        $query->set( 'orderby', 'meta_value_num' );
    }
} );

ステップ4：サムネイルカラムのCSSを調整する

// functions.php: 管理画面専用CSSを追加
add_action( 'admin_head', function() {
    $screen = get_current_screen();
    if ( ! $screen || 'edit' !== $screen->base ) {
        return;
    }
    ?>
    <style>
        /* サムネイルカラムの幅を固定 */
        .column-thumbnail {
            width: 70px !important;
        }
        .column-thumbnail img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 3px;
        }

        /* 価格カラム */
        .column-price {
            width: 100px;
        }

        /* 在庫カラム */
        .column-stock {
            width: 80px;
            text-align: center;
        }
    </style>
    <?php
} );

ステップ5：クイック編集にカスタムフィールドを追加する

// functions.php: クイック編集にカスタムフィールドを追加
add_action( 'quick_edit_custom_box', function( string $column_name, string $post_type ): void {
    if ( 'product' !== $post_type || 'price' !== $column_name ) {
        return;
    }
    wp_nonce_field( 'quick_edit_product', 'quick_edit_product_nonce' );
    ?>
    <fieldset class="inline-edit-col-right">
        <div class="inline-edit-col">
            <label>
                <span class="title">価格（円）</span>
                <input type="number" name="_price" class="ptitle" min="0">
            </label>
        </div>
    </fieldset>
    <?php
} );

// クイック編集の保存処理
add_action( 'save_post_product', function( int $post_id ): void {
    if ( ! isset( $_POST['quick_edit_product_nonce'] )
        || ! wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['quick_edit_product_nonce'] ) ), 'quick_edit_product' ) ) {
        return;
    }
    if ( isset( $_POST['_price'] ) ) {
        update_post_meta( $post_id, '_price', absint( $_POST['_price'] ) );
    }
} );

注意事項

• manage_{post_type}_posts_columnsフィルターのフック名は投稿の場合manage_post_posts_columns（postが2つ）、カスタム投稿タイプproductの場合はmanage_product_posts_columnsです。
• サムネイル画像の出力（get_the_post_thumbnail()）はエスケープ不要ですが、get_edit_post_link()のURLはesc_url()でエスケープしてください。
• クイック編集のJavaScript（カラムの値をフォームにプレフィル）は別途jQueryで実装が必要です。admin_enqueue_scriptsでスクリプトを読み込んでください。

まとめ

管理画面カラムのカスタマイズは「manage_{type}_posts_columnsでカラム追加・削除→manage_{type}_posts_custom_columnアクションで内容を出力→manage_edit-{type}_sortable_columnsでソート可能化→pre_get_postsでソートクエリを調整→admin_headでCSS幅調整→quick_edit_custom_boxでクイック編集に対応」の流れで整備します。関連記事：WordPressのカスタムフィールドをプラグインなしで実装する方法、WordPressのダッシュボードウィジェットをカスタマイズする方法。