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

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

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

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

Advanced Custom Fields はよく略して【ACF】とも呼ばれます。ここから先は【ACF】といってご紹介していきます。

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 プラグイン | WordPress.org 日本語

インストール後、有効化すると管理画面メニューの「設定」項目の下あたりに「カスタムフィールド」が表示されます。ここをクリックすると設定画面に移ります。

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

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

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

フィールドグループ名

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

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

基本の設定項目【General】

投稿画面にカスタムフィールドを表示させるためには「フィールドタイプ」「フィールドラベル」が設定されていればOK。「フィールド名」は出力の際に必要になるので、こちらも必ず設定していきましょう。基本的にはこの３つが必須項目です。

フィールドタイプによってはさらに設定項目が増えたり初期値の設定がないものもあります。またフィールドタイプによって実際に表示させるための出力方法はさまざまあります。各フィールドタイプごとの詳細は後述します。

バリデーション【Validation】

フィールドに対する条件を設定することができます。フィールドタイプによって異なりますので、適切なバリデーションを設定していきましょう。

どのフィールドタイプにも備わっているのが「Required」で、入力必須にすることができます。入力しないで投稿しようとするとバリデーションエラーが表示されます。

設定すると赤い「✴︎」がつくのが目印です。

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

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

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

条件判定

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

これは他のフィールドに入力される値によって、表示されるようにすることができます。グループの中にフィールドが一つしかない場合は設定できません。

フィールドを追加

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

設定が完了したら「Save Change」ボタンを押して保存。編集画面に設定したカスタムフィールドが表示されるか確認しましょう。内容が反映できたらカスタムフィールド作成完了です！

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

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

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

テキスト

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

テキストエリア

テキストエリアでは【Presetation】タブにて、テキストエリアの高さ（行）と改行の表示方法が設定できます。

【行】設定

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

【改行】設定

投稿入力時は関係ありませんが、サイトでの表示させたい改行の形を設定します。出力方法は3パターンです。

• 自動的に段落追加する
• 自動的に<br>を追加
• 書式設定なし

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

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

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

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

番号

数字を入力したい場合に使えるフィールドです。金額や面積といった数字を入力させたい時はこちらのフィールドタイプを設定します。

入力欄をホバーするとスピンボタンが表示されるので、こちらから数値を指定することもできます。

「検証」タブから最小値と最大値を設定できます。

「プレゼンテーション」タブからステップサイズが設定できます。
例えばステップサイズを「10」にすればスピンボタンをクリックすると10ずつ加減されます。

「.」ドット, 「+」プラス, 「-」マイナスは入力可能ですが、全角文字や英字、「,」コンマは入力できません。

大きい数字を設定する場合はこのフィールドタイプを使わない手もありますが、入力時にコンマがなくとも出力の際に表示させることはできます。

番号の出力方法の詳細についてはこちら

範囲

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

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

少ない数で設定したい場合や決められた数字がある場合などに便利です。

メール

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

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

URL

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

パスワード

パスワードを設定するためのフィールドです。サイト上でパスワードが必要な場合に使用できます。
英数字のみ入力可能で、日本語や全角文字で入力しても変換されてしまいます。

入力するとテキストは表示されず黒丸で隠されます。

ページの続きを見るにはパスワードを入力させたい、入力欄で新たな入力項目を表示させる場合にはパスワードを入力してもらう、といった時などに使えるかと思います。

画像

画像では「返り値」と「ライブラリ」の設定項目があります。

返り値は「画像配列」「画像 URL」「画像 ID」の3種類から選べます。この返り値によって出力方法が変わるので、出力したい内容やコーディング方法と併せて選んでいきましょう。

ライブラリでは、すでにメディアにアップロードされている画像を使用できようにするか否かを設定します。「すべて」にチェックが入っていればメディアにある画像すべて利用できます。
「投稿にアップロード」にチェックを入れた場合、この編集している投稿にアップロードされた画像のみが使用できるようになります。他の投稿でアップロードされたメディアライブラリの画像は使用できません。使用できる画像を制限したい場合はこちらにチェックを入れましょう。

ファイル

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

返り値は「ファイル配列」「ファイルの URL」「ファイル ID」の3種類から選べます。画像同様出力させたい内容や出力方法によって選択してください。
ライブラリも画像と同様で使用できる画像を制限したい場合は「投稿にアップロード」にチェックを入れます。

リッチエディター（WYSIWYG）

リッチエディターはコンテンツエディターを使用して投稿のように入力できるフィールドです。

「プレゼンテーション」タブでエディターの表示形式を変更できます。

【タブ】

ビジュアルエディターとテキストエディターどちらを使用するかを選べます。初期値はどちらも表示。ビジュアルのみ、テキストのみに変更ができます。

【ツールバー】

ビジュアルエディターの時に表示されるツールバーの設定です。選択項目は「Full」と「Basic」です。
初期値は「Full」ですが、あまり多くの項目を使用しない、させたくない場合には「Basic」に設定すると便利に使えます。

「タブ」を「テキストのみ」で選択している時はこの項目は非表示になります。

【メディアアップロードボタンを表示】

「メディアを追加」のボタンを表示させるかどうかを指定できます。初期値は表示されるようになっていますが、非表示にすることも可能です。

【初期化を遅延させる】

この設定をONにすると、エディターがページの読み込み時ではなくエディターをクリックしたときに初期化されます。編集ページのロード時間を短縮したい場合はこちらの設定が役立ちます。

こちらも「タブ」を「テキストのみ」で選択している時はこの項目は非表示になります。

真 ／ 偽

「真/偽」はこの項目のチェックの有無によって何かしらの動作や処理をさせたい時に使用します。

管理画面上でこの項目にチェックがあったら別の項目を表示させるといった場合や、出力時にここにチェックがあったら何かしらの処理をする、といった場合に利用できます。

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

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

表示条件を複数設定する

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

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

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

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

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

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

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

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

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

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

<?php the_field('フィールド名'); ?>

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

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

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

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

ACFのメニュに「ツール」という項目があるのでそちらをクリックします。

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

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

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

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

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

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

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

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

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

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

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