WordPress｜カスタムフィールドをAdvanced Custom Fields で作る方法｜プラグイン

この記事ではWordPressのプラグインAdvanced Custom Fields (ACF)の使い方を解説します。

カスタムフィールドを使うメリット

カスタムフィールドを使うメリットは下記のとおりです。

下にWordPressの投稿画面のスクショを載せておきますが、カスタムフィールドを使うと下記のように項目毎に専用の入力欄を作ることができます。

プラグインAdvanced Custom Fields (ACF)について

カスタムフィールドはプラグインを使わなくてもWordPressで利用可能です。しかし、Advanced Custom Fieldsを使うことでWordPress標準カスタムフィールドの機能を大幅にアップすることが可能なんです。そのような理由から多くの人がこのプラグインを愛用していますし、この記事でもAdvanced Custom Fieldsに限定して解説していきます。

Advanced Custom Fieldsは下記のように200万以上のインストール数を誇る超有名プラグインで、更新頻度も高いため安心してオススメできるプラグインです。

利用者が多いということは、それだけでメリットです。困った時にはインターネット上に多くの情報を見つけることができるからです。

Advanced Custom Fieldsの使い方。

管理画面上の設定

STEP

Advanced Custom Fieldsをインストール・有効化

WordPress管理画面＞プラグインからAdvanced Custom Fieldsをインストール・有効化して下さい。

STEP

管理画面＞ACF＞フィールドグループ＋新規追加

ACFの設定画面を開き、新規追加ボタンをクリックして下さい。

STEP

フィールドグループ名・タイプを入力

フィールドグループ名を記入後、フィールドタイプをプルダウンメニューから選択。こまめに保存することをオススメします。

STEP

フィールドラベル・フィールド名を記入

フィールドラベルを日本語（意味の分かる項目名）で、フィールド名を半角英数字で記入する。フィールド名は、このカスタムフィールドをテンプレートファイルで読み込む時に使います。こまめに保存しましょう。

STEP

検証タブをクリック＞必要に応じて設定

検証タブの中の設定を必要に応じて行う。例えば、必須記入項目にしたい場合はRequitedをONにする。文字数制限も可能。

STEP

必要に応じて、Presentationや条件判定タブも設定する

たとえば、Presentationタブではプレースホルダーやラッパーのクラス属性・IDの属性も設定できる。通常はこれらのタブの設定は無視しても支障はない。

STEP

追加で入力項目を追加したい場合は「＋フィールドを追加」ボタンをクリック

さらに入力項目を追加したい場合には、「＋フィールドを追加」ボタンをクリックし、上記と同様に設定を繰り返す。

例えば、展示会の開催日の入力項目を増やしたい時は、下記のように記入する。

STEP

最後にカスタムフィールドを表示するページの設定を行います。

最後にカスタムフィールドを表示するページの条件を設定します。たとえば、投稿の種類や投稿タイプ、カスタム投稿タイプ名、固定ページなどを選ぶことができます。この状態で設定を保存します。

テンプレートファイルにカスタムフィールドを呼び出す時の記述例

下記のようにテンプレートファイルにthe_field();関数を使ってフィールド名を引数して書けば、設定したページの投稿画面にカスタムフィールドの入力欄が現れます。

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

たとえば、フィールド名が exhibition-name なら、下記のようになります。

<?php the_field('exhibition-name'); ?>

たとえば、下記のようなイメージです。

<h2 class="sexhibition-h2"><?php the_field('exhibition-name'); ?></h2>