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

更新2022/01/05

投稿にカスタムフィールドを取り入れたいときに使用するAdvanced Costom Fields(ACF)。
とても有名なプラグインで、プラグインの更新もしっかりされています。

機能が豊富で使いやすいので、カスタムフィールド作成のプラグインをどれにしようか悩むならこれをまず使ってみるのをおすすめします。

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

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

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

WordPress.org の人気プラグイン検索でも常に上位の方にあります。カスタムフィールドプラグインの中ではトップです。

人気のプラグインリスト WordPress.org

無料版と有料版あり

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

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

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

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

ACF | Pro #pricing-table

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

私は無料版しか使用したことがないので、無料版の設定をご紹介します(_ _)有料版もそのうち使ってご紹介していきたいと思います。

インストール&有効化

まずはプラグイン追加画面から検索しインストール。インストールしたら有効化。

こちらからzip形式でダウンロード、プラグイン概要の確認もできます。
Advanced Custom Fields – WordPress プラグイン | WordPress.org 日本語

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

カスタムフィールドを作成する

メニューをクリックするとフィールドグループの一覧画面になります。上にある「新規追加」をクリックしてカスタムフィールドを登録していきます。

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

フィールド設定の前に「位置」について説明していきます。
フィールド設定だけ確認したい方はこちらへ飛んでください→#フィールドを追加

カスタムフィールドを表示させる画面を決める【位置】

【位置】は作成したフィールドグループをどの編集画面に表示させるかを設定するところです。

左のセレクトボックスには投稿タイプやページタイプなど、条件を設定するための大まかな分類を設定できます。

真ん中のボックスは「等しい」か「等しくない」を設定します。
設定する条件に当てはまるものを表示させるか、当てはまらないものに表示させるか、条件によって使い分けましょう。
「等しい」にしていくつもの条件を追加しなければならないようなとき、「等しくない」を選択した方が、条件設定を少なくすることができる場合もあります。

右のボックスには左のボックスで指定した内容に当てはまる条件が選択できるようになっています。

「and」で条件をつなげる

「〇〇でもあり〇〇でもある」という風に条件にしたい場合は「and」をクリックすると設定ボックスが追加されます。

条件を削除したい場合は「and」のところにカーソルを合わせると「ー」ボタンが表示されるので、それをクリックして削除できます。

「または」で条件を追加する

一つ一つ条件を分けて設定するときは「または」と表示されている下の「ルールを追加」をクリックして、そちらに条件を設定していきます。

条件設定を間違えると表示されない

注意したいことは「and」で追加したものは「その全てが条件に当てはまる場合に表示される」ということです。

「and」でつなげたものは「〇〇でもあり〇〇でもある編集画面」という条件になります。

例えば投稿と固定ページに表示させたいとき。

このように「and」でつなげて条件設定すると、投稿編集画面にも固定ページ編集画面にもカスタムフィールドは表示されません。

投稿と固定ページは別の編集画面になるので、「投稿でもあり固定ページでもある」という条件に当てはまらないからです。

こういったときは「ルールの追加」にして条件を分けましょう。

フィールドを追加

「フィールドを追加」のところからカスタムフィールドの設定ができます。クリックすると編集項目が開かれます。

この項目に沿ってカスタムフィールドを設定していきます。「フィールドラベル」「フィールド名」「フィールドタイプ」は最低限設定しましょう。

設定が完了したら「公開」ボタンを押してカスタムフィールドが表示されるか確認しましょう。

設定内容がちゃんと反映できたらカスタムフィールド作成完了です!

カスタムフィールドは設定しただけではページに反映されません。表示させるために出力コードを書きます。
出力方法はこちらの記事をご覧ください。
Advanced Custom Fields フィールド項目の取得・出力まとめ

フィールドタイプ別設定方法

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

基本の設定項目

フィールドラベル編集画面に表示される名称。わかりやすい名前を設定します。
フィールド名PHPで表示するときなどにこちらの名前を使います。
フィールドタイプさまざまなフィールドタイプから当てはまるものを選択。有料版でしか使えないものはグレーアウトになっています。
説明どういった投稿項目なのか、説明をつけることができます。
クライアントワークや複数人で投稿をする場合によく使います。
必須か?空欄で投稿してほしくない場合は「はい」にします。ここが「いいえ」の場合は、出力の際に条件分岐をかけるようにしましょう。
デフォルト値初めから入力される内容を設定。
決まっている内容であったり、一部を変更するだけでいいような場合、
いちいち入力しなくても済むように設定しておくと楽です。
プレースホルダーのテキストフォームのプレースホルダーと同じ役割。
先頭に追加入力テキストの「先頭」に任意の文字を自動で挿入することができます。
末尾に追加入力テキストの「末尾」に任意の文字を自動で挿入することができます。
制限文字数「何文字まで」という決まりを作りたい場合、文字数を制限できます。
条件判定他のフィールドに入力される値によって、表示するかしないかを設定することができます。
ラッパーの属性編集画面での見せ方を変更したい場合に設定。classやidを設定してスタイルを当てることができます。
基本のフィールド設定一覧

フィールドタイプ【テキスト】

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

このフィールドタイプは【基本の設定項目】のみです。

フィールドタイプ【テキストエリア】

テキストエリアには基本の設定項目にプラス、下記の設定項目が追加されます。

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

改行設定

この設定によって「改行」表示のされ方が変わるので、表示させたい形を設定します。

出力方法は3パターンです。

  • 自動的に段落に変換
  • 自動的に<br>に変換
  • なにもしない

初期値は「なにもしない」になっているので、段落や改行で表示させたい場合はこの項目を変更します。
「何でテキストエリアなのに改行されないの?」と思ったらこの設定を見直してみてください。

段落や<br>に設定した場合、「詳細ページでは改行させたいけど一覧で表示させる時には改行をなくしたい」ということもあるかと思います。

そんな時は出力する際にフォーマット設定を変更することで「なし」にできます。

$field = get_field('field_name', false, false);

【関連記事】#出力フォーマットを変える Advanced Custom Fields フィールド項目の取得・出力まとめ

カテゴリー : WordPress

TOPへ