Advanced Custom Fields（無料版）をマスターする！ACFの詳しい使い方

投稿にカスタムフィールドを取り入れたいときに使用するAdvanced Costom Fields（ACF®）。機能が豊富で使いやすいので、カスタムフィールド作成のプラグインをどれにしようか悩むならこれをまず使ってみるのをおすすめです。

機能が豊富ゆえに使い方が分からなくなってしまったり、どのように設定すればいいのか迷ってしまったりすることもしばしばあります。
そんな時、このページを見て思い出せるようまとめています。

カスタムフィールド作成に迷ったらAdvanced Custom Fields

Advanced Custom Fieldsは、WordPress.org の人気プラグインで。カスタムフィールドプラグインの中ではトップです。
多くの人が利用しているためプラグインの更新もしっかりされていて、情報量が豊富なのが初心者にもうれしいところ。うまくいないときに検索すると解決方法が見つかりやすいです。

無料版と有料版あり

ACFは無料でも使えますが、一部機能は有料版を購入しなければ使えません。
有料版でしか使えないものの一部として、以下のようなものがあります。

• 繰り返しフィールド (The Repeater Field)
• 柔軟コンテンツ (The Flexible Content Field)
• オプションページ (Options Pages)

これらの機能を使いたいときは有料版を検討しましょう。

有料版はサブスク方式になっていて1年ライセンスを購入する形になります。
ACF | Pro #pricing-table

タイプ別になっていますが、使えるサイト数の違いのようです。一番安価な「Personal」は「$49/year」となっています。

私は無料版しか使用したことがないので、無料版の設定をご紹介します。

インストール＆有効化

まずはプラグイン追加画面から検索しインストール。（「ACF」と入力すれば検索結果の上部に表示されると思います。）

Advanced Custom Fields ｜WordPress.org 日本語

ACFカスタムフィールドの設定項目

メニューをクリックするとフィールドグループの一覧画面になります。フィールドグループを作成していない場合は以下のような画面表示になるので、「新規追加」もしくは「Add Field Group」をクリックしてカスタムフィールドを作成していきます。

ACFはフィールドタイプごとに設定する内容が多少変わります。
それぞれの設定項目を理解しておくと、より柔軟にカスタムフォールドを作ることができます。

ここではサンプルとして「スタッフ紹介」というフィールドグループを作って、設定していきます。

フィールドグループ名

ACFでは「フィールドグループ」という単位でカスタムフィールドを編集します。カスタムフィールドを内容ごとに分けて管理することができます。

このフィールドグループ名は必須項目なので設定しましょう。

基本の設定項目【General】

検証【Validation】

プレゼンテーション【Presentation】

プレゼンテーションタブでは入力の際に表示されるテキストやスタイルなどを指定することができます。

先頭や末尾に任意のテキストをあらかじめ入れておくことも可能です。例えば金額を入力する項目に「¥」という文字も必須で入れたい場合、文字だけこの画面で設定しておけば付け忘れ防止にもなりますし、編集画面で入力する手間を省けます。

手順	どういった入力をすればいいのか、説明をつけることができます。 クライアントワークや複数人で投稿をする場合によく使います。
プレースホルダーテキスト	フォームのプレースホルダーと同じ役割。入力欄に仮のテキストを入れられます。
先頭に追加	入力テキストの「先頭」に任意の文字を自動で挿入することができます。 （投稿画面では編集不可）
末尾に追加	入力テキストの「末尾」に任意の文字を自動で挿入することができます。 （投稿画面では編集不可）
ラッパー属性	編集画面での見せ方を変更したい場合に設定。横幅の設定、classまたはidを設定してスタイルを当てることができます。

「検証」と同様、フィールドタイプによって設定できる項目が変わることがあります。

条件判定

条件判定は初期ではOFFになっていますが、ONにすると条件を選択する項目が表示されます。

これは他のフィールドに入力された値によって、そのフィールド自体の表示・非表示を切り替えられます。グループの中にフィールドが一つしかない場合は設定できません。

例えば「スタッフ紹介」フィールドグループなら、「サイトに公開する」（真/偽フィールド）にチェックが入っているときだけ「資料・職務経歴書」フィールドを表示する、といった使い方ができます。

フィールドを追加

複数のカスタムフィールドを作成する場合は、「フィールドを追加」ボタンでカスタムフィールドを追加していきます。

設定が完了したら、画面右上の「変更内容を保存」ボタンをクリックして保存。投稿編集画面に、設定したカスタムフィールドが表示されるか確認しましょう。内容が反映できたらカスタムフィールド作成完了です！

ACFのフィールドタイプ別　詳細設定

ACFにはさまざまなフィールドタイプが用意されています。ここから各フィールドタイプごとの説明と設定項目について紹介します。

各フィールドタイプ出力方法は以下の記事にまとめていますので、出力と併せて確認したい場合はご覧下さい。
Advanced Custom Fields フィールド項目の取得・出力まとめ

テキスト

テキストフィールドは１行で表示しても問題ない単語や短い文章の場合に設定します。長い文章や改行表示をしたい場合はテキストエリアにしましょう。

テキストエリア

テキストエリアでは「プレゼンテーション」タブにて、入力欄の高さ（行）と改行の表示方法が設定できます。

行数の設定

入力時のテキストエリアの高さを指定します。初期値は「8」になっていますが、内容が多くなる可能性の高いものは数字を大きく、逆にそこまで行数がいかなければ数値を小さくすると、リサイズの手間が省けより見やすくなります。

行数	入力時のテキストエリアの高さを指定。 初期値は「8」。内容が多くなりそうなら数字を大きく、少なければ小さくすると、リサイズの手間が省けて見やすくなります。
改行	改行がある場合の出力方法を指定。出力方法は3パターンです。 ・自動的に段落追加する ・自動的に<br>を追加 ・書式設定なし

改行設定の使い分け

初期値は「書式設定なし」になっていて、HTMLで出力時に <p> タグや <br> タグが付かないため改行されません。この設定の場合、出力設定しているファイルにHTMLタグの記述が必要です。

段落や改行を付けて表示させたい場合はこの項目を変更します。
「自動的に段落追加する」の場合は、その文章にpタグが付き、テキストエリアで改行した箇所には brタグが追加されます。
「自動的に＜br＞を追加」の場合は、pタグは付かず、改行した箇所には brタグが追加されます。

「入力時に改行したはずなのに改行されない…」と思ったらこの設定を見直してみてください。出力の際に段落や改行を外したり、改行をつけることもできます。

テキストエリアの出力方法の詳細についてはこちら

番号

範囲

数値をスライダーでも設定することができる入力フィールドです。スライダー横に表示されるフォームには番号フィールドと同様に数字入力が可能で、スピンボタンでの数値もできます。

番号フィールドと同様に、「検証」タブから最小値・最大値、「プレゼンテーション」タブからステップサイズが設定できます。
初期値は最小値が0、最大値が100、ステップサイズは1です。

メール

メールアドレスを入力させるためのフィールドです。このフィールドを設定した場合、メールアドレス以外の形式で登録しようとするとエラーが表示されます。

メールの形式での入力バリデーションがほしい場合にはこのフィールドを使用します。

URL

URLを入力させるためのフィールドで、URLの形式から外れるとエラーになります。
「http://」 や 「https://」 の入力が必須です。

パスワード

ファイル

ファイルにも「返り値」と「ライブラリ」の設定項目があります。

返り値は「ファイル配列」「ファイルの URL」「ファイル ID」の3種類から選べます。画像同様出力させたい内容や出力方法によって選択してください。

ライブラリの制限方法も画像フィールドと同じで、投稿にアップロードされた画像のみに制限するか、メディアにある全ての画像を使用できるようにするかです。

リッチエディター（WYSIWYG）

oEmbed

カスタムフィールドを編集画面に表示させる条件の設定

【設定 ＞ Location Rules】で作成したフィールドグループをどの編集画面に表示させるかを設定できます。初期値は「投稿編集画面」になっています。
投稿以外のカスタム投稿タイプや特定のカテゴリー、固定ページなどに表示させたい場合は、ここを変更する必要があります。

左端	投稿タイプやページタイプなど、条件を設定するための分類タイプが表示されるので選択します。
中央	「等しい」か「等しくない」を設定します。 設定する条件に当てはまるものを表示させるか、当てはまらないものに表示させるか、条件によって使い分けましょう。 「等しい」にしていくつもの条件を追加しなければならないようなとき、「等しくない」を選択した方が、条件設定を少なくすることができる場合もあります。
右端	左のボックスで指定した内容に当てはまる条件が選択できるようになっています。

表示条件を複数設定する

「〇〇でもあり〇〇でもある」という風に条件にしたい場合は「と」ボタンをクリックすると設定ボックスが追加されます。
条件を削除したい場合は「と」のところにカーソルを合わせると「ー」ボタンが表示されるので、それをクリックして削除できます。

追加する際の注意点！条件設定によって表示されないことがある

表示条件を設定する上で注意したいことは、「と」ボタンで追加したものは「その全てが条件に当てはまる場合に表示される」ということです。

このようにつなげたものは「〇〇でもあり〇〇でもある編集画面」という条件になります。
上記のように設定すると、「投稿でもあり固定ページでもある」という条件になってしまいます。投稿と固定ページは別の編集画面になるので、条件に当てはまらず、どちらの編集画面にもカスタムフィールドは表示されません。

もし複数の投稿タイプで表示させたい場合はその下の「ルールを追加」から条件を設定します。

「または」で条件を指定することで、「どちらかに当てはまれば表示する」ということになります。これなら投稿編集画面でも固定ページ編集画面でも表示させることができます。

条件を設定したのにACFのカスタムフィールドが表示されない場合は見直してみてください。

カスタムフィールドに入力した内容を記事に反映させる

カスタムフィールドは設定しただけではページに反映されません。表示させるために出力コードを書きます。

ACFで作成したカスタムフィールドの基本の出力コードは the_field('フィールド名') です。

コードの設定も完了したら、カスタムフィールドに入力されたものが表示されるか確認しましょう。

設定したフィールドタイプによってはこのコードだけではうまく表示されないものもあります。各フィールドタイプ出力方法は以下の記事にまとめていますので、出力と併せて確認したい場合はご覧下さい。
Advanced Custom Fields フィールド項目の取得・出力まとめ

ACFカスタムフィールドのエクスポートとインポート

ACFには作成したカスタムフィールドをエクスポート・インポートするツールも備わっています。
別のサイトに同じカスタムフィールドを使いたい時や何らかの理由でコピーしたい場合など、すぐにコピーできるようになっています。

JSONでエクスポート＆インポート

エクスポートをする場合は、左側にエクスポートできるフィールドグループが表示されるので、取り出したいグループにチェックを入れます。
「Export As JSON」をクリックすると、チェックを入れたカスタムフィールドグループのファイルがダウンロードされます。

インポートするときにはこのダウンロードしたファイルをアップロードしてインポートします。

これだけでわざわざ一から設定しなくても作成してあったカスタムフィールドを取り込むことができます。

PHPを生成してファイルに貼り付け

エクスポート側に「PHPを生成」というボタンもあります。こちらはACFで作成したカスタムフィールドグループをPHPコードにしてくれるもので、このコードをコピーして functions.php などのファイルにペーストするとカスタムフィールドが表示されます。

こちらの方法を選択してカスタムフィールドグループを別のサイトにコピーした場合、管理画面の「フィールドグループ」の一覧には表示されず、ここからは編集できなくなります。
簡単なのはJSONファイルでエクスポート＆インポートする方法なのですが、他の人が編集できないように管理画面の一覧には表示させないようにしたい、コードでもカスタムフィールドの編集をすることができる、といった場合はこちらの生成ツールが便利だと思います。

ボタンをクリックすると以下のようにカスタムフィールドを表示するためのPHPコードが表示されます。

選択したものと変更したい場合は「フィールドグループを選択」のところで生成したいグループにチェックを入れて「PHPを生成」ボタンをクリックすると、新しくPHPコードが生成されます。

「クリップボードにコピー」をクリックして、functions.php などのファイルにコードを貼り付けます。

ACFのフィールドグループ一覧には表示されませんが、カスタムフィールドグループで設定した表示条件に当てはまっている投稿編集画面にいくとカスタムフィールドが表示されるはずです。