Advanced Custom Fieldsチュートリアル（詳細活用ガイド）

WordPressカスタムフィールドは、WordPressを「単なるブログプラットフォーム」ではなく、柔軟なコンテンツ管理システムたらしめる重要な要素です。

WordPressカスタムフィールドと言えば、無料のAdvanced Custom Fieldsプラグインが最も有名な選択肢の1つ。これにより、あらゆる面でカスタムフィールドを操作しやすくなり、今回の記事の大事なテーマでもあります。

具体的には、Advanced Custom Fieldsが非常に重要である理由を説明し、それをWordPressサイトで活用する方法を順を追ってご紹介します。

今回の記事の要点は以下の通りです。

盛りだくさんのお話です。それでは、まいりましょう。

WordPressカスタムフィールドとは？何ができるようになるの？

WordPressカスタムフィールドを使用すると、WordPressのコンテンツに関する情報を追加、保存、表示できます。より技術的なレベルでは、カスタムフィールドはメタデータの保存に効果を発揮します。

この用語に精通していない方もいらっしゃるはずです。しかし、カスタムフィールドは、すでにご利用中のプラグインやテーマの機能の多くを支えています。

たとえば、eコマースストアを構築する最も広く普及した選択肢であるWooCommerceでは、カスタムフィールドを使用して次のような製品に関する情報を保存します。

• 価格
• 重量
• 色

または、WordPressイベントカレンダープラグインをお持ちの場合、カスタムフィールドを使用して次のようなイベントに関する情報を保存することになります。

• 場所
• 開始/終了時刻
• 料金

どんな時にカスタムフィールドを使うべき？

そもそもなぜカスタムフィールドが必要なのか疑問に思うかもしれません。

たとえば、WordPressサイトにイベントを投稿したい場合、そのすべての情報をWordPressエディターで通常のテキストとして入力するのではダメなのでしょうか？

ええ、可能です。ただし、カスタムフィールドの使用は、あらゆる面から、便利なアプローチだと言えます。

• 入力が簡単 — ゼロから入力する代わりに、適切に配置されたカスタムフィールドグループを使用すれば、データを簡単に入力できます。たとえば、日付を入力する代わりに、日付ピッカーから日付を選択するだけでOKです。
• 一貫した記述方法 — カスタムフィールドに入力した情報は常に設定に応じて表示されます。つまり、サイト全体で一貫性が確保できます。
• アップデートと維持が簡単— どのように表示されるかについて何かを変更したい場合には、各投稿を個別に編集するのではなく、1つのものだけを更新すればOKです。

そもそもWordPressには標準搭載のカスタムフィールド機能がある

WordPressにはデフォルトで、カスタムフィールドを追加するための機能が搭載されています。クラシックTinyMCEエディタの「表示オプション」から有効にできます。新しいブロックエディタであれば、「オプション」から行います。

その後、キー/値のペアを使用してカスタムフィールドデータを入力します。

この標準搭載のカスタムフィールドはもちろん機能しますが、決して、最もユーザーフレンドリーな方法とは言えず、多くの人が代わりにAdvanced Custom Fieldsプラグインを使用しています。

Advanced Custom Fieldsを使うと、操作がかなり便利

結論から言えば、Advanced Custom Fieldsを使うと、WordPressでのカスタムフィールドを扱う操作が、あらゆる側面から、非常に楽になります。

WordPressダッシュボードでカスタムフィールドを追加および管理するためのインターフェースが簡素化され、サイトのフロントエンドでカスタムフィールドからの情報を表示するプロセスまでも単純化されます。実際「100万以上のウェブサイトで使われている」だけのことはあります。しかも、1,000件以上のレビューで4.9の星を獲得しています。

バックエンドでは、あらかじめ定義したフィールドタイプなど、使いやすいメタボックスを作成できます。そのため、上記のような一般的なキーと値のペアではなく、日付ピッカー、チェックボックスなどを次のように使用できるのです。

Advanced Custom Fields には、投稿、ユーザー、タクソノミー、メディア、コメント、カスタムオプションページなど、ダッシュボードの任意の領域に追加できる30種類以上のフィールドタイプが用意されています。

フィールドタイプの詳細はこちらをご確認ください。

また、 Advanced Custom Fieldsでは、文書として整理された関数、ショートコード、グーテンベルクのブロックなどを使用して、その情報を簡単に表示できます。

ドラッグ＆ドロップでデザインできるWordPressページビルダーといった他のツールとの連携も可能です。

Advanced Custom Fields無料版 vs 有料版、いったいどちらを選ぶべき？

Advanced Custom Fieldsには無料版と有料版（といってもお手頃）があります。

ほとんどの基本的な用途では、無料版で完全に問題ありません。無料版だけで、ほとんどすべてのフィールドタイプが使え、上記で説明したすべての時間節約およびユーザーフレンドリーな機能があなたのものに。

コンテンツに関する追加情報を保存するだけなら、無料バージョンで十分です。

そうは言っても、Proバージョンでは、Advanced Custom Fieldsをより便利なレベルまで引き上げる機能がいくつか追加されています。

• リピーターフィールド— これにより、特定のフィールド、フィールドのグループを投稿ごとに繰り返すことができます。たとえば、スピーカーに関する情報をイベントに追加する場合、リピーターフィールドを使用すると、複数のスピーカーがいる状況に対処できます（スピーカーのフィールドを必要な回数だけ「繰り返す」ことで、複数のスピーカーがいるケースでも問題なし）。
• ACFブロック — メタボックスの代わりに、グーテンベルクのブロックとしてフィールドを表示します。これは、クライアント用のサイトを構築していて、カスタムフィールドデータを簡単に入力および視覚化できるようにしたい場合に特に便利です。
• 柔軟コンテンツ— 他のフィールドからレイアウトを作成します。カスタムフィールド情報に基づいた軽量のページビルダーのようなものです。
• ギャラリーフィールド— 1つのフィールドに複数の画像をアップロードできます。

オプションページ、フィールドのクローン作成機能、関係フィールドの改善、その他の小さな調整など、他にもいくつかの違いがあります。

全てのACF PROの機能はこちらをご覧ください。

ACF PROの、1つのサイトで永久に使用できるライセンスが25ドルです。または、サイト無制限での永久使用ライセンスは100ドルとなります。

確信が持てない場合には、必要な機能を正確に把握するまで無料版から始めるのがいいでしょう。必要に応じて、後からいつでもアップグレードできます。

Advanced Custom Fieldsチュートリアル–フィールドの追加方法

次に、実際のAdvanced Custom Fieldsのチュートリアルとして、カスタムフィールドの作成から表示までの方法をご紹介します。

例として、ランニングについてのブログを運営しているとします。ランニングが大好きで、日々の運動の記録を読者と共有したい、そう思っています。具体的には、各記事で、ランニングの以下についての情報を公開する狙いです。

• 目的 — ランニングの種類は2つとしましょう—“スピードへの挑戦”と“コンディション管理”です。
• 距離 — ここでは走った距離を扱います。
• 開始時刻 — これは、走り始めの時間です。
• 終了時刻— こちらは、ランニングの終了した時間。
• 場所 — 走った場所も記録します。

このようなデータの入力のために、5つのフィールドを使います。

このAdvanced Custom Fieldsチュートリアルで学習する原則は、あらゆるユースケースに適用することができます。ここでは、理解のために具体的な例を取り上げているだけです。

ここでの説明を、2つの段階に分けてみましょう。

1. バックエンドでカスタムフィールドを追加、管理する方法
2. サイトのフロントエンドでカスタムフィールドに入力された情報を表示する方法

1. 新しいフィールドグループを追加

無料版Advanced Custom FieldsをWordPress.orgからインストールしたら、「カスタムフィールド」→「新規追加」へ移動し、最初の「フィールドグループ」を作成します。

その名の通り、「フィールドグループ」とは、WordPressダッシュボードに表示される、単体のカスタムフィールド、またはそのまとまりです。

例えば、5つのカスタムフィールドを格納する、1つのフィールドグループを作成することにしましょう。

フィールドグループに名前を付けて、その「位置」を選択します。この例では、通常のWordPressの投稿にこのカスタムフィールドを表示したいので、デフォルトのままにしておきます。

ただし、「カスタム投稿タイプ」と一緒に、またはタクソノミーを使用してなど、カスタムフィールドを他の場所に表示する場合は、これを変更する必要があります。複数のルールを設定して、フィールドを複数の位置に表示することもできます。

2. カスタムフィールドを追加

次に、「+ フィールドを追加」ボタンをクリックして、最初のカスタムフィールドを追加します。

これにより多くのオプションが開きますが、必ずしもすべてを記入する必要はありません。

最も重要な2つの選択肢は次のとおりです。

• フィールドラベル — これがエディターに表示されます。また、フィールド名の生成にも使用されます—そして、これを、コードで使用することになります。フィールド名を変更する必要はありません（必要に応じて、もちろん変更もできます）。
• フィールドタイプ— 収集する情報の種類です。たとえば、「数値」フィールドで番号情報を収集したり、「メール」フィールドでメールアドレスを収集したりすることができます。

この最初のフィールドでは、「ラジオボタン」フィールドタイプを選択します。

下へ進むと、「選択肢」のボックスからラジオボタンの選択オプションを入力できます。

また、フィールドが必須かどうか、デフォルト値など、他にも多くの選択が可能です。必要に応じて自由に設定してください。

別の例を見てみましょう–ランニングの距離を取得するカスタムフィールドです。今回は、「数値」フィールドタイプが必要です。

さらに距離の単位を「末尾に追加」して、入力をもっと容易にすることも、また、必要に応じて、「最小値」および「最大値」で検証することもできます。たとえば、1,000マイルのランニングなんて、きっとしないはずです（もしそうなら…フォレストガンプのレベル…）。

取得する他のすべてのカスタムフィールドについて、このプロセスを繰り返します。完了すると、次のようになります。

3. 設定を調整して公開

最後に、「Settings」ボックスまでスクロールします。ここでは、 WordPressエディターでのフィールドの表示方法を制御できます。

ほとんどの場合、デフォルトのままにしておいてOKです。ただし、必要に応じて自由に変更できます。たとえば、通常のWordPressエディターの上にカスタムフィールドを表示することも可能です。

調整が終わったら、「公開」を押して、フィールドグループを公開します。

4. WordPressエディターで情報を入力する

フィールドグループを公開すると、新しい投稿を作成するときにフィールドが表示されるようになります。

デフォルトでは、クラシックTinyMCEエディターと新しいブロックエディターの両方で、エディターの下に表示されます。

ここに入力した情報は、サイトの「 WordPressデータベース」に保存され、簡単に取得できます（これについては、Advanced Custom Fieldsチュートリアルの次の部分でご紹介します）。

条件判定を使いこなす

先に進む前に、ちょっとした寄り道をしましょう。

Advanced Custom Fieldsが非常に人気がある理由の1つは、そこにある興味深い実装によるものです。

強力なオプションの1つが、条件判定。前のフィールドの回答に基づいてフィールドを表示/非表示にできます。

これを使った簡単な例を見てみましょう…。

たとえば、 食べ物、 旅行といったランニング以外の何かについての記事を書きたいとします。ランニングではないトピックについて執筆するときにランニングに関する情報のカスタムフィールドを表示しても、意味がありませんよね？

そんな全てのカスタムフィールドを自動的に表示する代わりに、「この記事はランニングについてですか？」という質問をしてくれるカスタムフィールドが追加できたらどうでしょうか。

チェックボックスをオンにすると、ランニングに関する情報のフィールドが自動的に表示されます。オフだと、非表示のまま。

条件判定では、こんなことができるのです！

これを設定するには、フィールドグループを編集し、「これはランニングですか？」という真 / 偽フィールドを追加します。

次に、既存のフィールドを編集し、条件判定をオンにして、「これはランニングですか？」フィールドがチェックされている場合にのみ、各フィールドが表示されるようにします。

Advanced Custom Fieldsをフロントエンドで表示する方法

Advanced Custom Fieldsの旅も中盤に差し掛かりました。これで、カスタムフィールドに情報を追加し、関連する投稿タイプに関連付けて、データベースに保存できるようになりました。

ただし、まだ潜在的な問題が1つあります。カスタムフィールドの情報がフロントエンドのどこにも表示されないということです。

つまり、ブログ記事用のカスタムフィールドをエディターに追加したとしても、記事はフロントエンドの通常の記事と同じ見た目になります。

修正しましょう。

サイトのフロントエンドでAdvanced Custom Fieldsのデータを表示する方法はいくつかあります。実際に選択する方法は、ニーズと知識レベルによって異なります。こちらに3つの方法をご紹介します。

1. テーマのテンプレートファイル— これには多少の技術的な知識が必要ですが、テーマのテンプレートファイルを快適に操作できる場合は、ほとんどの場合、これが最良のアプローチです。
2. ショートコード— 個別のケースごとにカスタムフィールドデータを挿入したい場合であれば、これは非常にシンプルで使いやすいオプションです。ただし、すべての投稿にショートコードを追加する必要があるため、より多くの手作業が必要になります。
3. Elementor Pro— PHPを使用する必要がまったくないため、素晴らしい選択肢ですが、有料であり、またテンプレート作成にはElementor Proが必要になります。

上記をクリックして特定の方法まで直接移動することも、すべての方法を読むこともできます。

Advanced Custom Fieldsをテーマテンプレートファイルに追加する方法

カスタムフィールド情報を表示する最初の方法は、子テーマのテンプレートファイルにAdvanced Custom FieldsのPHP関数を直接追加すること。

テーマのテンプレートファイルの中に入り込み操作をする必要があるため、少し高度ですが、調整が終われば、カスタムフィールドが毎回同じ場所に自動的に表示されるようになります。

具体的には、対象となる投稿タイプの一つのテンプレートを編集する必要があります。

通常のブログ記事の場合、これはsingle.phpとなります。または、テーマによっては、他のテンプレートに分割されています。たとえば、TwentyNineteenテーマの場合、content-single.phpテンプレート部分を編集する必要があります。

このような説明でハテナが頭に浮かぶ場合は、別の方法を使用することをお勧めします。

投稿を司るテーマテンプレートファイルを見つけたら、Advanced Custom Fieldsのthe_field()関数を使用してフィールドの情報を表示できます。 例えば、こちら。

<?php the_field('FIELD_NAME'); ?>

詳細はこちらからご確認ください。

例えば「目的」フィールドを表示するには、このようなコードを使います。

<?php the_field('purpose'); ?>

フィールドグループの編集画面から、フィールド名を確認できます。

そして、簡単なHTMLマークアップとPHPを組み合わせると、次のようになり、すべてのフィールドが表示されます。

<div class="run-information">
<ul>
<li><strong>Purpose:</strong> <?php the_field('purpose'); ?></li>
<li><strong>Distance:</strong> <?php the_field('distance'); ?></li>
<li><strong>Start Time:</strong> <?php the_field('start_time'); ?></li>
<li><strong>End Time:</strong> <?php the_field('finish_time'); ?></li>
<li><strong>Location:</strong> <?php the_field('location'); ?></li>
</ul>
</div>

これを通常の投稿コンテンツの上に表示するには、テーマテンプレートファイルの中、the_content()の上に追加します。

そしてブログ記事を更新すると、通常のWordPressコンテンツの上にカスタムフィールドデータが表示されます。

詳しくは、Advanced Custom Fieldsの詳細な説明をご確認ください。

Display Advanced Custom Fieldsのデータをショートコードで表示する方法

カスタムフィールドのデータをより簡単に表示するために、ショートコードを使用することもできます。ただし、ここでの欠点は、カスタムフィールドを表示するたびにショートコードを追加する必要があることです。このタスクを自動化する簡単な方法はありません。

ショートコードはこちら。

[acf field="FIELD_NAME"]

例えば、これをWordPressエディターに貼り付けると、以下のようになります。

すると、サイトのフロントエンドは、先にご紹介したテーマテンプレートを扱う方法とまったく同じになります。

Advanced Custom FieldsをElementor Proで表示する方法

Elementorは、最も人気のあるWordPressページビルダーの1つ。視覚的なドラッグ＆ドロップエディターを使用してデザインを構築できます。補足ですが、ElementorはKinstaの公式パートナーです。

有料のアドオンであるElementor Proを使用すると、テーマのテンプレートファイルを作成することができ、これには、 Advanced Custom Fieldsから動的なカスタムフィールドデータを挿入するオプションが含まれます。

これは、テンプレートにカスタムフィールドデータを自動的に含める柔軟性が必要なものの、テーマのテンプレートファイルで直接コードを編集するのが困難、という場合には便利なオプションです。

これを行うには、「テンプレート」>「テーマビルダー」と進み、「Single」投稿用の新しいElementorテンプレートを作成します。

「Post title」と「Post content」に通常のElementorウィジェットを追加できます。次に、カスタムフィールドデータを表示するには、通常の「テキストエディター」ウィジェットを追加します。ここでの唯一の違いは、テキストを編集する代わりに、「動的」オプションを選択することです。

その後、ACFフィールドをドロップダウンから選択します。

ここから、Advanced Custom Fieldsで追加した特定のフィールドが選択できます。

また、「詳細」アコーディオンタブを使用して、情報を先頭または末尾に加え、ラベルや単位を追加することもできます。

簡単ですね。 他のカスタムフィールドについても繰り返しましょう！

まとめ

Advanced Custom Fieldsを使用すると、簡単に多くのデータと情報でページや投稿を充実させることができます。サイトのコンテンツに関する追加の情報を取得し、訪問者のフロントエンドに表示できるのが強みです。

これを行うには、3つのオプションがあります。

• お使いのテーマのテンプレートファイル
• ショートコード
• Elementor Pro

今回の記事でご紹介した知識を使えば、WordPressの潜在能力を解き放ち、WordPressの基本をはるかに超える100％カスタムサイトが構築できます。

残された疑問は、こちらだけ。

あなたはAdvanced Custom Fieldsで何を作成しますか？ 下のコメント欄から教えてください。