ACF(Advanced Custom Fields)って結局何なのか、初心者向けに整理した話

受託案件でWordPressを使うとき、ほぼ確実にACF(Advanced Custom Fields)というプラグインを触ることになります。定番中の定番です。
以前、実務での使い方をまとめた記事を書いたことがあるのですが、今回はその手前、「そもそもACFって何なのか」を初心者向けに整理してみようと思います。

WordPress標準だと、入力できる項目は意外と少ない

WordPressの投稿編集画面は、標準だとタイトル・本文・アイキャッチ画像・カテゴリーくらいしか入力欄がありません。
でも実際の案件では、「電話番号だけ」「価格だけ」「営業時間だけ」のような、決まった形式のデータを入れたい場面がよく出てきます。例えば店舗紹介ページを何十件も作るような案件だと、各店舗の電話番号・住所・営業時間・定休日といった項目を、担当者ごとにバラバラの書き方で本文に入力されてしまうと、後からデザインを統一するだけでも一苦労になってしまいます。

本文にベタ書きすることもできなくはないですが、それだと後から「電話番号の部分だけデザインを変えたい」となったときに、テンプレート側で本文から情報を取り出す処理が複雑になってしまいます。

実は、WordPressには元々「カスタムフィールド」という仕組みが標準で用意されています。
ただし標準のカスタムフィールドは、入力欄の名前も値も自由入力のテキスト欄1つだけ、というシンプルすぎる作りです。
入力する人からすると、何をどう入力すればいいのか分かりにくく、実務ではそのまま使うのは正直厳しいと感じています。

ACFは、投稿編集画面に「専用の入力欄」を追加できるプラグイン

ACFを使うと、投稿の編集画面に、テキスト・画像・チェックボックスといった専用の入力欄を、管理画面から自由に追加できるようになります。
電話番号用の欄、価格用の欄、というように項目を用意しておけば、投稿する側は該当の欄にただ入力するだけで済みます。

フィールドの種類(フィールドタイプ)も豊富です。
テキスト、テキストエリア、画像、チェックボックス、日付。定番どころは一通り揃っています。
さらに、「同じ項目を何セットも繰り返し入力できるリピーター」や、「他の投稿を選んで紐付けられるリレーション」のような、少し複雑な構造も扱えます。

使い方の基本は「作る」→「表示する」の2ステップ

ACFの基本的な使い方は、大きく分けて2ステップです。難しいことはありません。

1つ目は、管理画面の「ACF」メニューからフィールドグループを作るステップです。
どんな項目(フィールド)を、どの投稿タイプの編集画面に表示するか、コードを書かずに設定できます。

実際にこのブログで使っているフィールドグループの管理画面は、こんな感じです。

ACFのフィールドグループ編集画面のスクリーンショット。「カテゴリ紹介文(ハブページ用)」というフィールドグループに、名前hub_intro・タイプがテキストエリアのフィールドが1つ設定されている

2つ目は、テーマのテンプレートファイル側で、保存された値を取り出して表示するステップです。
これはget_field()という関数を使います。名前を渡すだけです。

$tel = get_field('tel');

if ( $tel ) {
    echo '

電話番号: ' . esc_html($tel) . '

'; }

管理画面で「tel」という名前のフィールドを作っておけば、このコードだけで値を取り出して表示できます。
入力欄を用意する作業と、表示する処理を書く作業が、はっきり分かれているのがACFの分かりやすいところだと感じています。

初めてACFを触ったときは、正直「フィールド」「フィールドグループ」という用語だけで少し身構えてしまいました。名前が硬いんです。
でも整理してみると、やっていることはシンプルです。管理画面で入力欄を作り、テンプレートで名前を指定して呼び出す。それだけです。

リレーションフィールドは、なぜ便利なのか

フィールドタイプの中でも、特によく使うのがリレーションフィールドです。
「他の投稿を選んで紐付けられる」フィールドで、例えばこのブログの「関連記事」欄も、投稿を書き終えたあとに管理画面で検索窓から関連しそうな記事のタイトルを2〜3件選ぶだけで済むように、このリレーションフィールドで作っています。

💡 Tips: リレーションフィールドとは

投稿・固定ページなど、他の投稿を選んで紐付けられるACFのフィールドタイプです。管理画面の検索窓から選ぶだけで、投稿同士を関連付けられます。プログラムでIDを直接指定する必要がないので、記事を書く人がコードを触らずに済みます。

もしリレーションフィールドを使っていなかったら、関連記事を表示するたびに、本文中へ手作業でリンクのHTMLを書くことになっていたはずです。
書く手間が減るだけでなく、記事のタイトルが変わっても紐付け自体は崩れません。地味に助かる仕組みです。

プラグインを入れるだけでは終わらない

ACFをインストールしただけでは、何も起きません。フィールドグループを1つも作っていない状態だと、投稿編集画面は標準のままです。
「プラグインを入れたのに何も変わらない」と最初は少し戸惑いましたが、これは仕様通りの動きでした。当然です。
自分でフィールドを設計して、初めて機能し始めます。素材だけを渡してくれるプラグイン、という方がしっくりきます。使う側の設計次第です。

もう少し実務寄りの話は、以前の記事にまとめてあります

今回は「ACFって何なのか」という入り口の話でしたが、実際の案件では、フィールドの戻り値の型が設定によって変わる問題や、任意項目をまとめてガードする書き方など、もう少し踏み込んだ工夫が必要になる場面が出てきます。
そのあたりは、以前まとめた記事に書いているので、興味のある方はそちらもどうぞ。

まとめ

ACFは、WordPress標準の入力欄だけでは足りない部分を、コードを書かずに補ってくれるプラグインです。
「フィールドグループを作る」「get_field()で取り出す」という2ステップさえ押さえておけば、まずは十分に使い始められます。

普段なんとなく使っているツールほど、改めて「そもそも何なのか」を整理してみると、次に応用が利きやすくなる気がしています。
今度似たような場面に出会ったら、今回の整理が役に立つはずです。きっと。

この記事を書いた人

Web制作歴10年近く。WordPressのテーマカスタマイズやコーディングを中心に、副業・本業ともにweb制作に携わっています。このブログでは、実際に手を動かして分かったことを書いています。

Cat's Handをフォローする

この記事が参考になったら、応援クリックをお願いします

タイトルとURLをコピーしました