WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： K.K.
カテゴリー： マークアップ >CMS

WordPressのカスタム投稿タイプを構築していると「管理画面の投稿一覧にカスタムフィールドの値を表示したい」というご要望をいただくことがあります。
今回は、WordPressのプラグイン「Advanced Custom Fields（ACF）」と「Custom Post Type UI（CPTUI）」を使って作成したカスタム投稿タイプ「食べ物（slug: food）」に対して、ACFで設定したカスタムフィールド（チェックボックスとテキスト）を投稿一覧画面に表示する方法を紹介します。

今回実装する内容

WordPressにて作成したカスタム投稿タイプ「食べ物」投稿一覧に、以下のACFカスタムフィールドをカラムとして表示します。

実装コード

functions.php に以下のコードを追加します。

// 投稿一覧にカスタムカラムを追加
add_filter('manage_food_posts_columns', 'add_food_custom_columns');
function add_food_custom_columns($columns) {
    $columns['food_fruit']  = 'フルーツ';
    $columns['food_origin'] = '産地';
    return $columns;
}

// 各カスタムカラムの値を出力
add_action('manage_food_posts_custom_column', 'show_food_custom_columns', 10, 2);
function show_food_custom_columns($column_name, $post_id) {
    $fields_to_display = ['food_fruit', 'food_origin'];

    if (in_array($column_name, $fields_to_display)) {
        $value = get_field($column_name, $post_id);

        if (is_array($value)) {
            echo esc_html(implode(', ', $value)); // 複数選択（チェックボックス）対応
        } elseif (!empty($value)) {
            echo esc_html($value); // 単一テキスト
        } else {
            echo '—'; // 未入力時の表示
        }
    }
}

カラムの並び順を変えたい場合

下記のように $columns をカスタマイズすることで、表示順の調整が可能です。

$columns = [
    'cb' => $columns['cb'], // チェックボックス（必須）
    'title' => 'タイトル',
    'food_origin' => '産地',
    'food_fruit' => 'フルーツ',
    'date' => $columns['date'],
];

表示されない場合の確認点

• フィールド名のスペルが正しいか
  get_field(‘food_fruit’, $post_id) の ‘food_fruit’ は ACF の「フィールド名（name）」です。ラベルではないので注意が必要。
• フィールドグループが正しく投稿タイプに紐づいているか
  ACFの「表示ルール」で「投稿タイプ」＝「食べ物（food）」を選択しているか確認。
• 投稿に値が入力されているか
  未入力だと何も表示されず、空白や — になります。

まとめ

ACFを活用することでWordPressの管理画面は柔軟にカスタマイズ可能です。ただし、「投稿一覧の表示オプション」から直接フィールドを切り替えることはできないため、プログラムで出力の制御をする必要があります。
一覧画面の見やすさは、編集作業の効率にも直結します。今回の方法を活用して、オリジナルの管理画面を使いやすくしてみてください。