Advanced Custom Fields(無料版)をマスターする!【2023】ACFの詳しい使い方 | KoMariCote

Advanced Custom Fields(無料版)をマスターする!【2023】ACFの詳しい使い方

更新2024/02/09

投稿にカスタムフィールドを取り入れたいときに使用する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」となっています。

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

動作確認環境

  • WordPressバージョン : 6.4.2
  • プラグインバージョン : 6.2.4
  • 動作確認日 : 2023/12/27

インストール&有効化

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

プラグイン追加画面

【プラグインページ】
Advanced Custom Fields – WordPress プラグイン | WordPress.org 日本語

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

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

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

フィールドグループ一覧画面
カスタムフィールド設定画面

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

フィールドグループ名

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

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

基本の設定項目【General】

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

フィールドタイプさまざまなフィールドタイプから当てはまるものを選択。有料版でしか使えないものはグレーアウトになっています。
フィールドラベル編集画面に表示される名称。わかりやすい名前を設定します。
フィールド名PHPで表示するときなどにこちらの名前を使います。(日本語も可)ラベルを追加すると同時にこちらにも同じテキストが入りますが変更可能なので使用しやすい名称にします。
初期値フィールドにあらかじめ入力される値。
決まっている内容であったり、一部を変更するだけでいいような場合、
いちいち入力しなくても済むように設定しておくと楽です。
基本のフィールド設定一覧

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

バリデーション【Validation】

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

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

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

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

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

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

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

条件判定

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

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

フィールドを追加

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

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

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

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

選択

関連

  • リンク
  • 投稿オブジェクト
  • ページリンク
  • 関係
  • タクソノミー
  • ユーザー

jQuery

  • Google マップ
  • 日付選択ツール
  • 日付選択ツール
  • 時間選択ツール
  • カラーピッカー

レイアウト

  • メッセージ
  • アコーディオン
  • タブ
  • グループ
  • リピーター(プロ版のみ)
  • Flexible Content(プロ版のみ)
  • 複製(プロ版のみ)

テキスト

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

テキストエリア

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

【行】設定

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

行数入力時のテキストエリアの高さを指定。
内容が多くなる場合は、初期値より数字を大きくするとリサイズする手間が省けます。
改行改行がある場合、どのように出力させるかを指定。
【選択項目】
・自動的に段落追加する
・自動的に<br>を追加
・書式設定なし

【改行】設定

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

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

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

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

投稿画面
投稿内容を出力したサイト画面

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

番号

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

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

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

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

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

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

範囲

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

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

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

メール

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

「mail@exam.com」と入力すると「'mail@exam.com' は有効なメールアドレスではありません」と表示される
この場合はアットマークを全角にしているためエラー

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

URL

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

「komaricote.com」と入力すると「値は有効な URL である必要があります」と表示される
https:// がないためエラー

パスワード

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

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

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

画像

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

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

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

ファイル

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

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

リッチエディター(WYSIWYG)

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

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

【タブ】

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

【ツールバー】

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

「Basic」で設定した時の表示

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

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

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

【初期化を遅延させる】

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

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

真 / 偽

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

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

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

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

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

表示条件を複数設定する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

TOPへ