「投稿一覧に “価格” や “会社名” を出したいけど、どう書けばいいの？」
「ACF（Advanced Custom Fields）で入力した値って、一覧にも出せるの？」
そんな疑問をもつあなたにぴったりの回です！
投稿詳細ページではすでにカスタムフィールドを使って情報を出せるようになった方も、次のステップとして「アーカイブ（一覧）にも表示させたい」という場面に必ず直面します。
今回は、以下のような場面で使える実例をたっぷり紹介します👇
- 価格・会社名・年齢・肩書きなどを一覧カードに出したい
- 値がないときは非表示にしたい
- ACFの画像や繰り返し項目をスマートに扱いたい
では、さっそく始めましょう！
✅ 今回のゴール
- 投稿一覧にカスタムフィールド（価格・会社名など）を表示できる
- ACFの値を取得して、記事カードに組み込む方法がわかる
- ループ内での値の取り出し方・レイアウトの工夫ができるようになる
📝 ループ内でカスタムフィールドを出すには？
まずは WordPress 標準の get_post_meta() を使ったシンプルな出力方法から。
例：価格フィールドを表示
<?php if (have_posts()) : ?>
<ul class="post-list">
<?php while (have_posts()) : the_post(); ?>
<li>
<!-- 投稿のタイトルを表示 -->
<h2><?php the_title(); ?></h2>
<?php
// カスタムフィールド「price」の値を取得（投稿ごとに設定されている価格）
// 第3引数 true を指定することで「単一の値」として取得できる
$price = get_post_meta(get_the_ID(), 'price', true);
// 価格が設定されていれば表示（空のときは非表示）
if ($price) :
?>
<p>価格：<?php echo esc_html($price); ?>円</p>
<?php endif; ?>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>💡 true をつけることで、配列ではなく「単一の値」として取得できます。
※この後紹介する get_field() は、ACF（Advanced Custom Fields）プラグインが有効化されている必要があります。
get_post_meta() はWordPress標準、get_field() はACF専用関数です。ACFで登録した値を取得したい場合は get_field() を使いましょう。
🌟 ACFの値を一覧に表示したいとき
get_field() を使えば、ループ内でもACFフィールドが楽に取得できます。
例：会社名を表示（company_name）
<?php
// ACFフィールド「company_name」の値を取得（会社名など）
$company = get_field('company_name');
if ($company) :
?>
<p>会社名：<?php echo esc_html($company); ?></p>
<?php endif; ?>🧩 カスタム投稿タイプの一覧でもOK
たとえば archive-voice.php のようなテンプレートでも同じ構文で取得可能です。
<?php
$job = get_field('job_title');
$age = get_field('age');
?>
<p><?php echo esc_html($age); ?>歳・<?php echo esc_html($job); ?></p>🔁 繰り返しや画像も出せる
リピーターフィールドをループで出力
<!-- ACFのリピーターフィールド「features」に値があるかチェック -->
<?php if (have_rows('features')) : ?>
<ul>
<?php while (have_rows('features')) : the_row(); ?>
<?php
// サブフィールド「item」の値を取得
$item = get_sub_field('item');
?>
<?php if ($item) : ?>
<li><?php echo esc_html($item); ?></li>
<?php endif; ?>
<?php endwhile; ?>
</ul>
<?php endif; ?>💡画像に説明文をつけたい場合は、wp_get_attachment_image($image, 'medium', false, ['alt' => '代替テキスト']) のように alt を明示するのもおすすめです。
画像フィールドを表示
<?php
$image = get_field('company_logo');
if ($image) :
echo wp_get_attachment_image($image, 'medium');
endif;
?>🛠 よくある注意点
- ACFの「フィールド名」は、設定画面の「フィールド名」タブで確認
- 値がキャッシュされていて古い場合は、更新後に
Ctrl + Shift + Rで強制再読み込み - 値がない時は
if文で囲んで非表示にするのが基本 - 投稿タイプが異なると
get_field()は空になる → フィールドが「該当投稿タイプに紐づいているか」を確認 - 値がないのか、そもそも設定がされていないのかを切り分けるには
var_dump()などでデバッグも有効 - ACFを使わない場合でも、カスタムフィールドの値は
get_post_meta()で取得可能です。
💡 応用：構造化データに活用する
カスタムフィールドの内容を構造化データ（JSON-LD）として出力すれば、SEOにも貢献します。
<!-- 商品情報を JSON-LD 形式でマークアップ（SEO強化に有効） -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "<?php the_title(); ?>",
"offers": {
"@type": "Offer",
"price": "<?php echo esc_html($price); ?>",
"priceCurrency": "JPY"
}
}
</script>📝 このあたりは、今後の記事で実践形式で解説予定です！
📝 まとめ
- アーカイブでも
get_post_meta()やget_field()を使えばカスタム情報を出せる - 値がない場合は非表示にするのがスマート
- 画像・繰り返し・構造化データまで、ACFを活用すれば表現の幅が広がる！
🔮 次回予告
第15回では、
「一覧の並び順を自由に変えたい」「特定条件だけ抽出したい」
といった場面で役立つ、WP_Query を使ったカスタムクエリの組み方を紹介します！
💡補足：
ACFの設定方法（フィールド作成・配置・グループ化など）については、別記事で画像付きで詳しくご紹介予定です。実際の管理画面キャプチャを交えて、初心者でも迷わず導入できる構成にしますので、そちらもぜひお楽しみに！
