はじめに
「投稿に「価格」「URL」「評価」などの独自データを追加したい」「カスタムフィールドをGUIで管理したい」——Advanced Custom Fields（ACF）はWordPressで最も広く使われているカスタムフィールドプラグインで、GUIでフィールドを管理し、テンプレートから簡単に呼び出せます。
症状・原因
WordPressの標準カスタムフィールドは汎用的すぎてUI が使いにくく、フィールドタイプの管理も困難です。ACFを使うとテキスト・数値・画像・リピーター・関係など多様なフィールドタイプをGUIで管理できます。
解決手順
ステップ1：ACFをインストールしてフィールドグループを作成する
【ACFのインストール】
プラグイン → 新規追加 → "Advanced Custom Fields" → インストール・有効化
【フィールドグループの作成】
ACF → フィールドグループ → 新規追加
フィールドグループ名: 製品情報
フィールドを追加:
1. フィールドラベル: 価格
フィールド名: price
フィールドタイプ: 数値
単位: 円
最小値: 0
2. フィールドラベル: 製品URL
フィールド名: product_url
フィールドタイプ: URL
3. フィールドラベル: 特徴
フィールド名: features
フィールドタイプ: テキストエリア
4. フィールドラベル: アイキャッチ（サブ）
フィールド名: sub_image
フィールドタイプ: 画像
戻り値の形式: 配列
表示条件:
投稿タイプ = product（カスタム投稿タイプ「製品」に表示）ステップ2：テンプレートでフィールドを表示する
<?php
// single-product.php: ACFフィールドを表示
get_header();
?>
<main>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h1><?php the_title(); ?></h1>
<?php
// テキスト・数値・URLフィールド
$price = get_field( 'price' ); // 数値
$product_url = get_field( 'product_url' ); // URL
$features = get_field( 'features' ); // テキストエリア
?>
<?php if ( $price ) : ?>
<p class="price">¥<?php echo esc_html( number_format( $price ) ); ?></p>
<?php endif; ?>
<?php if ( $product_url ) : ?>
<a href="<?php echo esc_url( $product_url ); ?>" target="_blank" rel="noopener">
製品ページを見る
</a>
<?php endif; ?>
<?php if ( $features ) : ?>
<div class="features">
<?php echo wp_kses_post( $features ); ?>
</div>
<?php endif; ?>
<?php
// 画像フィールド（戻り値=配列の場合）
$sub_image = get_field( 'sub_image' );
if ( $sub_image ) : ?>
<figure>
<img src="<?php echo esc_url( $sub_image['url'] ); ?>"
alt="<?php echo esc_attr( $sub_image['alt'] ); ?>"
width="<?php echo esc_attr( $sub_image['width'] ); ?>"
height="<?php echo esc_attr( $sub_image['height'] ); ?>">
</figure>
<?php endif; ?>
<?php the_content(); ?>
</article>
<?php endwhile; ?>
</main>
<?php get_footer(); ?>ステップ3：リピーターフィールドを使う（ACF Pro）
// リピーターフィールドで繰り返しデータを管理
// フィールドグループ: 「FAQ」→ リピーター: faqs
// サブフィールド:
// question (テキスト): 質問
// answer (テキストエリア): 回答// テンプレートでリピーターを表示
<?php if ( have_rows( 'faqs' ) ) : ?>
<dl class="faq-list">
<?php while ( have_rows( 'faqs' ) ) : the_row(); ?>
<dt><?php the_sub_field( 'question' ); ?></dt>
<dd><?php echo wp_kses_post( get_sub_field( 'answer' ) ); ?></dd>
<?php endwhile; ?>
</dl>
<?php endif; ?>// 柔軟コンテンツ（Flexible Content）の表示
<?php if ( have_rows( 'page_sections' ) ) : ?>
<?php while ( have_rows( 'page_sections' ) ) : the_row(); ?>
<?php if ( is_row_layout( 'hero_section' ) ) : ?>
<section class="hero">
<h2><?php the_sub_field( 'headline' ); ?></h2>
<p><?php the_sub_field( 'subtext' ); ?></p>
</section>
<?php elseif ( is_row_layout( 'cta_section' ) ) : ?>
<section class="cta">
<a href="<?php the_sub_field( 'cta_url' ); ?>">
<?php the_sub_field( 'cta_label' ); ?>
</a>
</section>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>ステップ4：ACF JSONでフィールド設定をバージョン管理する
// functions.php: ACF JSONの保存先をテーマ内に指定
// （デフォルトはテーマルートの /acf-json/ フォルダ）
add_filter( 'acf/settings/save_json', function( $path ) {
return get_stylesheet_directory() . '/acf-json';
} );
add_filter( 'acf/settings/load_json', function( $paths ) {
$paths[] = get_stylesheet_directory() . '/acf-json';
return $paths;
} );【ACF JSONの使い方】
1. テーマフォルダに /acf-json/ ディレクトリを作成
2. ACFのフィールドグループを保存すると自動で .json ファイルが生成される
3. .json ファイルをgitでバージョン管理できる
4. 別環境でテーマをデプロイするとフィールド設定が自動で同期される
【メリット】
- 開発環境→本番環境へのフィールド設定の移行が簡単
- フィールド変更履歴をgitで追える
- チーム開発で設定を共有できるステップ5：コードでACFフィールドを登録する（ACF JSON不使用）
// functions.php: コードでACFフィールドグループを登録
add_action( 'acf/include_fields', function() {
if ( ! function_exists( 'acf_add_local_field_group' ) ) return;
acf_add_local_field_group( [
'key' => 'group_product_info',
'title' => '製品情報',
'fields' => [
[
'key' => 'field_price',
'label' => '価格',
'name' => 'price',
'type' => 'number',
'required' => 0,
'min' => 0,
'append' => '円',
],
[
'key' => 'field_product_url',
'label' => '製品URL',
'name' => 'product_url',
'type' => 'url',
],
[
'key' => 'field_sub_image',
'label' => 'サブ画像',
'name' => 'sub_image',
'type' => 'image',
'return_format' => 'array',
'preview_size' => 'medium',
],
],
'location' => [
[
[
'param' => 'post_type',
'operator' => '==',
'value' => 'product',
],
],
],
'position' => 'normal',
'style' => 'default',
] );
} );注意事項
- ACF無料版にはリピーターフィールド・柔軟コンテンツ・オプションページなどの高度な機能がありません。これらが必要な場合はACF Proが必要です。
- フィールド名（
name）は一度決めたら変更しないでください。変更すると保存済みデータが参照できなくなります。フィールド名は英数字とアンダースコアのみ使用してください。 get_field()は現在の投稿のフィールドを取得します。ループ外や特定の投稿IDから取得する場合は第2引数に投稿IDを指定してください：get_field('price', 123)。
まとめ
ACFの活用は「プラグインインストール→フィールドグループをGUIで作成→get_field()/the_field()でテンプレートに表示→acf-jsonフォルダでバージョン管理→コードによる登録でプラグイン化」の流れで整備します。関連記事：WordPressでカスタム投稿タイプを作成する方法、WordPressでカスタムタクソノミーを作成する方法。