WordPressでサイトを作成すると、「投稿にもっと自由な入力欄を追加したい」「固定ページにオリジナルの項目を持たせたい」と思う場面が出てきます。
そんなときに役立つのが、カスタムフィールドをノーコードで追加できるプラグイン「ACF(Advanced Custom Fields)」です。
この記事では、WordPress初心者の方に向けて、ACFの基本的な使い方をフィールドタイプ別のコード例とあわせて解説します。
1. ACFのインストールと初期設定
ACFは、以下の方法でインストールできます。
- WordPress管理画面を開く
- 「プラグイン」→「新規追加」を選択
- プラグイン検索窓にて「Advanced Custom Fields」もしくは「ACF」と検索
- 「Advanced Custom Fields」にて「今すぐインストール」を押し、インストールを実行
- 有効化を押す
有効化すると、管理画面のメニューに「ACF」という項目が追加されます。
ACFとACF PROの違い
ACFには「Advanced Custom Fields」と「Advanced Custom Fields Pro」があります。 テキストフィールドや画像フィールドは通常のACFでも利用できます。 しかし繰り返しフィールドや柔軟コンテンツフィールドなどの一部の高度な機能はACF PRO限定です。 詳しくは後半の「注意点」で解説します。
2. フィールドグループの作成方法
ACFでは、複数のフィールドをまとめた「フィールドグループ」という単位で管理します。
フィールドグループは、フィールドを整理し、編集画面に関連付けるために使用されます。
ACF | ACF入門
フィールドグループの新規追加
画面左上にある「新規追加」ボタン、もしくは画面中央の「フィールドグループを追加する」から追加します。
すると、下記のような画面が表示されます。
フィールドグループの設定
フィールドグループ名を記入します。 フィールドグループ名は分かりやすい名前に設定します。
フィールドを追加・設定する
以下の必須項目を設定します。
- フィールドタイプ
入力項目の形式（テキスト、画像、セレクトボックス、真偽値など）を選択します。 - フィールドラベル
実際のWordPress投稿画面で表示される名前を指定します。 - フィールド名
phpコード側で値を取得する際に使う半角英数字の識別子
※日本語でも動きますが、PHPが参照する値になるので英字がおすすめです。
アンダースコアとダッシュは使用可能ですが、スペースは使用不可です。
必要に応じて「プレゼンテーション」、「条件判定」などの詳細な設定を行い、右上の 「変更を保存」をクリックします。
表示させるページを指定
設定→「ロケーションルール」で設定します。
「このフィールドグループを表示する条件」では作ったフィールドグループをどの編集画面（投稿 or カスタム投稿 or 固定ページ）に表示するか指定します。
条件を設定したら画面右上にある「公開」または「変更内容を保存」をクリックして完了です。
ACFで設定した項目は前述の「ロケーションルール」で設定したページの投稿画面の下部に表示されます。
3. 主要フィールドタイプについて
ここでは代表的なフィールドタイプについて紹介します。
テキストフィールド
1行のテキストを入力するための最もシンプルなフィールドです。記事のサブタイトルやキャッチコピーなどに使います。
<?php echo get_field('subtitle'); ?>get_field() の引数にフィールド名(スラッグ)を指定するだけで、入力した値を取得できます。
テキストエリア
複数行にわたる文章を入力できるフィールドです。
<?php echo (get_field('description')); ?>テキストエリアはデフォルトでは改行が効きません。
改行を入れたい場合は、ACFから該当するフィールドを選択し、「プレゼンテーション」の改行項目で
「自動的に<br>を追加」を選択し、「変更内容を保存」を押します。
こうすることでページの表示時に任意の位置で入れた改行が反映されるようになります。
画像フィールド
ACFの画像フィールドは、管理画面からメディアライブラリ経由で画像をアップロード・選択できる機能です。出力形式（返り値）は画像配列、画像URL、画像IDの3種類から選択でき、用途に合わせて使い分けます。
画像配列（Object）
画像に関する全ての情報（URL、サイズ、代替テキストなど）を配列で取得します。
<?php
$image = get_field('image_field'); // フィールド名を指定
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>画像URL（URL）
画像のURL文字列だけを直接取得します。alt属性が不要で、背景画像（CSS）などにそのまま使いたい場合に便利です。
<?php
$image_url = get_field('image_field');
if( !empty( $image_url ) ): ?>
<img src="<?php echo esc_url($image_url); ?>" alt="画像" />
<?php endif; ?>画像ID（ID）
WordPressのメディアライブラリにおける添付ファイルIDを取得します。
WordPress固有の関数（wp_get_attachment_imageなど）と組み合わせて、自動でsrcset（レスポンシブ画像）を出力させたい場合に最適です。
<?php
$image_id = get_field('image_field');
if( !empty( $image_id ) ):
echo wp_get_attachment_image( $image_id, 'full' ); // 'full'は画像サイズ
endif; ?>URLフィールド
URL形式の文字列を入力するためのフィールドです。入力時に自動でURL形式かどうかのバリデーションが行われるため、外部リンクや参考サイトのURLを登録する用途に適しています。
<?php
$url = get_field('reference_url');
if ($url): ?>
<a href="<?php echo esc_url($url); ?>" target="_blank" rel="noopener">参考サイトを見る</a>
<?php endif; ?>出力時は esc_url() でエスケープしておくと安全です。
また、外部サイトへのリンクとして開く場合は target="_blank" とあわせて rel="noopener" を指定し、セキュリティ面にも配慮しましょう。
リッチエディター(WYSIWYG)フィールド
投稿本文と同様に、太字や箇条書き、リンク挿入などができるビジュアルエディタを任意の場所に追加できるフィールドです。
<?php
$content = get_field('rich_description');
if ($content): ?>
<div class="rich-content">
<?php echo $content; ?>
</div>
<?php endif; ?>真偽値(true/false)
チェックボックス1つでオン・オフを切り替えられるフィールドです。「おすすめ記事として表示するか」といったフラグ管理に便利です。
<?php if (get_field('is_featured')): ?>
<span class="badge">おすすめ</span>
<?php endif; ?>グループフィールド
グループフィールドは、複数の子フィールド（サブフィールド）を1つのグループとして構造化・整理できる機能です。
値を出力する際は、親となるグループの値を一度取得し、そこから各サブフィールドのキーを指定して取り出します。
グループ名が profile_group、サブフィールド名が profile_name と profile_img（返り値：画像配列）の場合の出力例です。
<?php
$profile = get_field('profile_group'); // 親グループを取得
if( !empty( $profile ) ): ?>
<div class="profile-card">
<!-- サブフィールド：テキストの出力 -->
<h3><?php echo esc_html( $profile['profile_name'] ); ?></h3>
<!-- サブフィールド：画像の出力 -->
<?php if( !empty( $profile['profile_img'] ) ): ?>
<img src="<?php echo esc_url( $profile['profile_img']['url'] ); ?>" alt="<?php echo esc_attr( $profile['profile_img']['alt'] ); ?>" />
<?php endif; ?>
</div>
<?php endif; ?>投稿オブジェクト
他の投稿やページを紐づけるためのフィールドです。「関連記事」を手動で指定したい場合などに使えます。
<?php
$related_post = get_field('related_article');
if ($related_post): ?>
<a href="<?php echo get_permalink($related_post->ID); ?>">
<?php echo get_the_title($related_post->ID); ?>
</a>
<?php endif; ?>取得できるのは投稿オブジェクトなので、get_permalink() や get_the_title() に投稿IDを渡して情報を取り出します。
繰り返しフィールド(ACF PROのみ対応)
同じ構成のリスト等を繰り返し追加できる機能です。
よくある質問(FAQ)のように「質問」と「回答」のペアを複数登録したい場合に使います。
<?php if (have_rows('faq_list')): ?>
<ul>
<?php while (have_rows('faq_list')): the_row(); ?>
<li>
<strong><?php the_sub_field('question'); ?></strong>
<p><?php the_sub_field('answer'); ?></p>
</li>
<?php endwhile; ?>
</ul>
<?php endif; ?>4. ACFを使う際の注意点
get_field() の第2引数に注意する
ACFの値を取得する get_field('フィールド名') は、記述するテンプレートファイルの場所によって書き方を変える必要があります。これを忘れると、意図した値が取得できずに空欄になってしまうことがあります。
記事の本文エリア（ループ内）で使う場合
single.php や page.php など、記事のタイトルや本文を出力する通常のエリア（メインループ内）では、フィールド名だけで値を取得できます。
<?php echo get_field('subtitle'); ?>サイドバーやフッター（ループ外）で使う場合
sidebar.php や footer.php など、メインの記事エリアの外で特定の記事のカスタムフィールドを表示したい場合は、第2引数に「どの記事のデータを呼ぶか」という投稿IDを明示する必要があります。
<?php echo get_field('subtitle', $post_id); ?>ACF PRO限定の機能について
ACFには年額制のライセンスで利用できるACF PROがあります。
前述の「繰り返しフィールド」に加えて、以下のフィールドタイプはPRO限定となっています。
- 繰り返し
同じ構成のフィールドセットを複数回繰り返して入力できる機能 - 柔軟なコンテンツ
あらかじめ定義した複数のレイアウトを投稿画面で自由な順番・回数で追加・並び替えできる機能 - 複製
すでに別の場所で作成した既存のフィールドやフィールドグループを、そのまま再利用できる機能
ACFのままでも基本的なフィールドは一通り使えますが、
「同じ入力項目を繰り返し追加したい」「レイアウトパターンを選ばせたい」といった要件が出てきた時点でACF PROへのアップグレードを検討するとよいでしょう。
料金プランは公式サイトで最新情報を確認することをおすすめします。
まとめ
ACFを使うことで、コーディングの知識が少なくても投稿や固定ページに自由な入力欄を追加し、テンプレート側で柔軟に出力できるようになります。まずは無料版でテキストフィールドや画像フィールドから試してみて、必要に応じて繰り返しフィールドなどのACF PROにある機能を検討していくのがおすすめです。
参考記事
