【画像付き】Advanced Custom Fieldsのインストールと基本的な設定方法

 2017.12.21  2017.12.21

WordPressでのサイト制作でもはや無くてはならないプラグイン「Advanced Custom Fields」(以下ACF)。この記事では、ACFのインストールと基本的な設定方法を画像を交えながら説明します。※画像をクリックするとポップアップで拡大画像が表示されます。

Advanced Custom Fieldsのインストール方法

WordPress管理画面の左メニューにある「プラグイン > 新規追加」をクリックします。

Advanced Custom Fieldsのインストールと基本的な設定方法

「プラグインを追加」ページの右側にある検索窓(下図①)に「Advanced Custom Fields」と入力して検索すると、該当プラグインが一番最初に出てくるはずなので、「今すぐインストール」ボタン(下図②)をクリックしてインストールします。下の画像では既にプラグインがインストールされている状態なので、ボタンが「有効」と表示されています。

Advanced Custom Fieldsのインストールと基本的な設定方法

WordPressのプラグインページから直接ダウンロードして、FTPでプラグインディレクトリにアップロードしてももちろんOKです。

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

インストールが完了後、管理画面の左メニューに「カスタムフィールド」というメニューが追加されますので、クリックしてフィールドグループを作成するページに移動します。「新規追加」ボタンをクリックして、カスタムフィールドのグループを作成しましょう。今回の例では「店舗情報」というフィールドグループを作成しました。

Advanced Custom Fieldsのインストールと基本的な設定方法

フィールドグループ「店舗情報」では、店舗名、店舗画像、そして店舗情報を入力するカスタムフィールドを作成します。「フィールドを追加」ボタンをクリックすると、カスタムフィールドを追加・編集ができます。

Advanced Custom Fieldsのインストールと基本的な設定方法

カスタムフィールドを作成するテーブルの下には、「位置」と「オプション」を設定するテーブルがあります。「位置」では、どの編集画面でカスタムフィールドを表示するかのルールを指定します。例えば、ある特定の固定ページやカテゴリー、またはブログの投稿記事のみ、といった様々なルールを作成することができます。

「オプション」では、フィールドグループの表示順序や編集画面で表示させたくない項目を設定します。「Style」では編集画面でのカスタムフィールドの表示デザインを指定できます。(後述)

Advanced Custom Fieldsのインストールと基本的な設定方法
「位置」のルール例

カスタムフィールドを一通り設定した後は、ページ右側にある「公開」ボタンをクリックして内容を保存します。続けて作成したい場合はテーブル下部の「フィールドを追加」ボタンをクリックすればいくつでも追加可能です。

Advanced Custom Fieldsのインストールと基本的な設定方法

ACFの肝といってもよい部分がこの「フィールドタイプ」ですが、様々な種類のカスタムフィールドを作成することが可能です。ACFの上位有料プラグイン「ACF Pro」ではフィールドタイプの種類が更に増えて痒い所に手が届く素敵な仕様となっていますので、ぜひ下記のページをチェックしてみてください!

Advanced Custom Fieldsのインストールと基本的な設定方法
ACFのフィールドタイプの種類

作成したカスタムフィールドを編集画面で確認する

カスタムフィールド作成画面の「位置」で作成したルールに従って、カスタムフィールドが編集画面(投稿画面)に表示されます。今回の例では「固定ページ」に表示するルールを作成しました。「オプション」で「コンテンツエディタ」を非表示にしたので、画面がいくらかすっきりとしています。

Advanced Custom Fieldsのインストールと基本的な設定方法
固定ページの編集画面でカスタムフィールドを表示

カスタムフィールド作成画面の「オプション」で指定できる「Style」ですが、「Standard (WP metabox)」を選ぶと、下の画像のようにセルが繋がったテーブルデザインになります。デフォルトは「Seamless (no metabox)」です。

Advanced Custom Fieldsのインストールと基本的な設定方法

ACFによるカスタムフィールドの出力

カスタムフィールドの出力方法はフィールドタイプにより異なりますので、公式ページや以下の記事などを参考にしてください。

このブログでもACFについての記事をいくつか書いていますので、以下のカテゴリー(タグ)をチェックしてみてくださいね!