WordPressプラグインレビュー：Advanced Custom Fields Pro

GeekWireでは、WordPressプラグインを数多く使用しています。中でも特に便利なのが、カスタムフィールドの入出力を簡単に行えるAdvanced Custom Fields（ACF）です。カスタムフィールドを頻繁に使用しており、このプラグインなしではWordPress開発ワークフローは考えられません。文字通り、何百時間もの面倒な作業を省いてくれました。

WordPressのカスタムフィールドを使うと、投稿者は投稿に様々なメタデータを割り当てることができます。このメタデータは文字通り何でも構いません。私たちはカスタムフィールドを使って、特定の投稿タイプの有効期限を指定したり、投稿に外部URLを関連付けたり、Googleアナリティクスのリンクトラッキングパラメータを追加したり、イベント投稿に講演者やスポンサーのリストを入力したりしています。

投稿にカスタムフィールドを割り当てると、サイト上でデータを表示する際に興味深い操作が可能になります。例えば、カスタムフィールドに特定の値を持つ投稿のみを返すカスタムWP_Queryオブジェクトを使用できます。また、カスタムフィールドの値を取得してサイトに表示することもできます。当社のサイトでの好例として、スタートアップリストが挙げられます。リスト内の各企業は、さまざまなカスタムフィールドを持つ投稿です。企業のURLやソーシャルメディアのプロフィールなどを取得し、表に表示しています。シアトルエンジニアリングセンターのページの場合、企業名を除くすべての情報がカスタムフィールドとして保存されています。

WordPressカスタムフィールドメタボックスの構築

WordPressの投稿でカスタムフィールドが有効になっている場合は、管理画面の右上にある「表示オプション」ドロップダウンから「カスタムフィールド」の表示を有効にするだけで済みます。これにより、投稿編集画面に非常に基本的なメタボックスが表示されます。

このボックスは明らかに、投稿者に対してテーマがどのようなデータを期待しているかを全く示しておらず、ユーザーフレンドリーとは程遠いものです。カスタムフィールドを効果的に使用するには、投稿編集画面にカスタムメタボックスを追加し、データ入力を分かりやすく、エラーが発生しにくくする必要があります。以下は、当サイトのスタートアップリストにデータを入力する例です。

カスタムメタボックスの作成には、それほど難しいコードは必要ありませんが、非常に面倒です。コードでは、各フィールドの入力用のHTMLを指定し、データのフォーマットや検証ルールを処理し、値をデータベースに保存し、データベースから値を取得し、ユーザー入力をサニタイズし、メタボックスを編集画面に追加する必要があります。フィールドが数個しかないシンプルなメタボックスでも、コードは簡単に100行を超えてしまいます。add_meta_box シンプルな1フィールドのメタボックスの長い例は、Codexで確認できます。

ACFがなぜこんなに便利なのか

Advanced Custom Fieldsを使えば、コードなしでカスタムフィールド情報を入力するための複雑なUIを作成できます。自分でコーディングすると数時間かかるような作業も、たった2分でカスタム投稿編集画面を作成できます。

ACFはフィールドグループを使用して、投稿にカスタムフィールドを追加します。フィールドグループを使用すると、カスタムフィールドの順序を変更したり、フィールド編集画面を追加する投稿タイプを指定したりできます。

フィールドグループを作成したら、様々なカスタムフィールドタイプを入力できます。ACFでは、フィールドラベルとフィールド名を指定できます。後者は、WordPressデータベースにデータを保存するためのメタキーとして使用されます。テキストボックス、WYSIWYGエディター、日付ピッカー、画像アップロード、チェックボックス、画像ギャラリー、oEmbedオブジェクト、Googleマップ位置情報など、幅広いフィールドタイプから選択できます。メールアドレス、URL、数値などの多くのフィールドタイプには、不適切な形式の値がデータベースに保存されるのを防ぐためのデータ検証ロジックが組み込まれています。

また、各フィールドについての作成者への指示、データ入力のために特定のフィールドがいつ表示されるかに関する条件付きロジック、入力フィールドのプレースホルダー テキスト、フォームにカスタム スタイルを適用できるようにするための CSS クラスおよび ID 属性を提供することにより、投稿編集画面に磨きをかけることもできます。

サイトにカスタムフィールドを表示する

フィールドグループを作成し、作成者がカスタムデータを入力したら、そのデータをサイトに表示したり、サイトのレンダリング方法を調整したりする必要があります。ACF はここで多くの魔法を提供していません。テーマを使用して、カスタムフィールドデータをどのように出力したり、サイトの表示に影響を与えたりするかは、自分で決める必要があります。

ACFフィールドグループを使用して構築する投稿エディターフォームは、WordPress標準のpostmetaを使用します。つまり、データは標準のmeta_key/meta_valueペアでデータベースに保存されます。多くの場合、このデータにアクセスするためにACF関数を使用する必要はありません。get_post_meta投稿者が保存したデータを取得するには、WP_Queryカスタムフィールドパラメータなどの標準WordPress関数を使用できます。

ACFは、カスタムフィールドデータにアクセスするための独自のAPIも提供しています。 や のようなシンプルな例を使うthe_field('field_name')ことで、get_field('field_name')開発者はカスタムフィールドデータを素早く取得して使用できます。ACF APIの優れた点は、返したい値の種類を指定できることです。例えば、画像アップロードフィールドがある場合、get_fieldコード内で必要な値に応じて、画像URL、画像ID、または画像メタデータの配列を返すことができます。

APIが特に役立つのは、リピーターフィールドなどを使うときです。リピーターフィールドを使うと、同じ投稿で同じフィールドを繰り返し入力できます。ACF APIのhave_rows、、the_rowを組み合わせて使うことでthe_sub_field、WordPressのループと非常によく似た方法で、これらのフィールドを反復処理し、サイトにデータを表示できます。

高度なカスタムフィールドの使い方

ACFには2つのバージョンがあります。WordPress.orgからの無料ダウンロードには、基本機能のほとんどが含まれています。有料のProバージョンにアップグレードすると、リピーターフィールド、ギャラリーフィールド、フレキシブルコンテンツフィールド、オプションページなど、より複雑なフィールドグループを作成できます。開発者ライセンスを購入すると、クライアントのウェブサイトにプラグインを導入できます。商用テーマ開発者であれば、独自のプラグイン/テーマにACFを組み込んで配布することも可能です。

ACFはWordPressコミュニティで広く利用されており、WordPress.orgによると、現在90万件のアクティブインストール数を記録しています。ACFは開発者によって積極的に開発され、適切なサポートも受けており、これはWordPressプラグインを評価する際の重要な基準です。

WordPressの投稿に関連するカスタムメタデータを扱う必要がある開発者であれば、ACFをぜひ試してみることをお勧めします。多くの時間を節約できるはずです。