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

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

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

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

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

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

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

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

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

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

How cool are custom fields in WordPress, uh? 👨‍💻Learn how to take advantage of them with the amazing @wp_acf in our latest guide! 💪Click to Tweet

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

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

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

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

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

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

ブロックエディタでカスタムフィールドを扱う方法

ブロックエディタでカスタムフィールドを扱う方法

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

WordPressビルトインのカスタムフィールド

WordPressビルトインのカスタムフィールド

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

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

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

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

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

ブロックエディタで使用した時のAdvanced Custom Fields

ブロックエディタで使用した時のAdvanced Custom Fields

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ACFフィールドグループの新規作成

ACFフィールドグループの新規作成

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

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

 新しいフィールドを追加

新しいフィールドを追加

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

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

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

フィールドの設定

フィールドの設定

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

 ラジオボックスのオプションを入力

ラジオボックスのオプションを入力

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

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

 数値フィールドの作成

数値フィールドの作成

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

その他のフィールドの設定

その他のフィールドの設定

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

3. 設定を調整して公開

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

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

 ACFフィールドグループの設定

ACFフィールドグループの設定

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

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

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

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

ブロックエディタで見たAdvanced Custom Fields

ブロックエディタで見たAdvanced Custom Fields

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

条件判定を使いこなす

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

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

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

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

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

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

 条件判定

条件判定

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

 チェックマークを入れると、他のフィールドが登場

チェックマークを入れると、他のフィールドが登場

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

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

 真 / 偽フィールドの追加

真 / 偽フィールドの追加

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

条件判定を他のフィールドに追加

条件判定を他のフィールドに追加

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

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

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

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

 フロントエンドにはカスタムフィールドなし

フロントエンドにはカスタムフィールドなし

修正しましょう。

WordPress関連の課題や遅いホスティング会社はもう嫌ですか?当社は超高速サーバーと24時間365日利用可能なWordPressの専門家によるサポートを提供しています。と超高速サーバーから世界クラスのサポートを提供しています。プラン一覧をご確認ください。

サイトのフロントエンドで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'); ?>

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

ACFフィールド名を確認する

ACFフィールド名を確認する

そして、簡単な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エディターに貼り付けると、以下のようになります。

ショートコードを使用してACFデータを表示する

ショートコードを使用してACFデータを表示する

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

ショートコードの結果は、テーマテンプレートファイルと同じ見た目に

ショートコードの結果は、テーマテンプレートファイルと同じ見た目に

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

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

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

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

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

新しいElementor Singleテンプレートを作成する

新しいElementor Singleテンプレートを作成する

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

Elementor Proの「動的」オプション

Elementor Proの「動的」オプション

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

「ACFフィールド」を選択

「ACFフィールド」を選択

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

表示する特定のフィールドを選択

表示する特定のフィールドを選択

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

情報を先頭または末尾に追加

情報を先頭または末尾に追加

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

まとめ

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

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

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

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

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


この記事が面白いと思った方は、KinstaのWordPressホスティングプラットフォームも大好きでしょう。ウェブサイトをスピードアップし、当社のベテランのWordPressチームからの24時間365日のサポートを是非ご利用ください。Google Cloudを使用したインフラストラクチャは、自動スケーリング、パフォーマンス、およびセキュリティに重点を置いています。Kinstaの魅力をご案内させてください。当社のプランをご確認ください。