【WordPress】便利なカスタムフィールドの活用

商品やイベントを紹介する企業向けのWordPressサイトでは、決まったフォーマットの投稿を繰り返すことがあるかと思います。このとき、カスタムフィールドを利用すると見出しや定型文を都度入力する手間を省くことができます。

このページでは、プラグインを利用したカスタムフィールドの導入と活用を紹介します。

カスタムフィールドとはなにか

カスタムフィールドとはあらかじめ設定しておいた任意の項目のみ入力できる機能です。たとえば通常の投稿から商品の詳細を入力するとき、以下のような内容になります。

（通常の投稿の例）

通常の投稿を行った場合の懸念点をまとめます。（必ずしも通常の投稿ではダメ、という意見ではありませんので、あしからず…）

• 商品名や色、価格といったテキストは毎回表示される固定のテキストになるため、入力の際に間違って消してしまいそう。
• コピペミスが起きそう。改行なども消してしまいそう。
• デザインが限られてしまいそう。仮にHTMLソースから変更できるとしても、そのHTMLソースも誤って削除してしまうかもしれない。

このとき、「毎回変わるテキストのみ入力させる」というフォームを作成できるのがカスタムフィールドになります。今回の例であれば、以下のようなカスタムフィールドが役に立つものと思います。

（カスタムフィールドの投稿の例）

このようなカスタムフィールドによるフォームを用意すれば、必要なテキストのみを入力するだけで同じ内容のWordPressの投稿ページ作成できます。
この例では1行テキストのフォームしかありませんが、通常の投稿のような複数行のエディタ、画像などを設定できるフォームなどが用意されています。

カスタムフィールドを導入するメリットをまとめます。

• 入力効率が改善されます。
• 必須入力項目を設定できるため、データの入力漏れを防ぐことができます。
• 投稿ごとに変わるテキストしか入力できないため、固定テキストの削除、上書きといったミスを防ぐことができます。
• UIが整えられているため、初めてWordPressサイトを触るような不慣れな人でも入力しやすくなります。
• テーマファイルにフォーム用のページを用意すれば、通常のHTMLページと同じようなデザインを実現できます。スマホ向けデザインのレスポンシブ対応にも向いています。

カスタムフィールドの向いているサイト

カスタムフィールドを使ったフォームは「同じテンプレートを使ったページが大量にある」サイトに向いています。例えば以下のようなサイトが適しています。

• ECサイト
  商品の紹介やレビューなど
• 不動産紹介サイト
  物件の紹介など
• レジャーサイト
  旅行、イベントの紹介など
• マッチングサイト
  サービス、人物の紹介など
• 求人サイト
  募集案件、セミナー情報の紹介など

Secure Custom Fieldsを使ったカスタムフィールドの作成

カスタムフィールドはWordPressの標準機能として利用できますが、今回はSecure Custom Fields （Advanced Custom Fields）というプラグインを使った作成方法を紹介します。このプラグインを利用することで、カスタムフィールドをより簡単に導入することができます。Secure Custom Fieldsには機能制限のない有料版が用意されていますが、今回は無料版を利用します。

Secure Custom Fields

導入手順

1. WordPressのダッシュボードから「プラグイン」→「新規追加」を選択します。
2. 「Secure Custom Fields」で検索し、「今すぐインストール」をクリックした後、「有効化」をクリックします。

カスタムフィールドの作成

ここでは詳細の説明は省き、簡単な流れのみ紹介します。

1. 左メニュー「カスタムフィールド」＞「新規追加」をクリックします。
2. カスタムフィールドのタイトルを入力します。
3. 「フィールド名」はテンプレートページでの表示に利用するため、半角英数字の名前を設定します。
4. 「フィールドを追加」をクリックし、フィールド（入力項目）を追加します。フィールドタイプには様々な種類があります。このフィールドタイプを含むすべての項目は後から変更できます。
   
5. 「位置」からカスタムフィールドをどこに表示させるか設定します。カスタムフィールドはそのページと置き換えるのではなく、そのページに追加するという機能となります。通常の投稿や特定の固定ページなど、表示位置をここから設定します。
   
6. 設定を確認後、画面右上の「公開」をクリックするとカスタムフィールドが公開されます。公開後のカスタムフィールドは左メニュー「カスタムフィールド」＞「フィールドグループ」から確認、編集ができるようになります。

テーマファイルでのテンプレートページの編集

これまでのカスタムフィールドの作成手順は入力フォームのみの作成になります。実際に表示するページには表示用の関数を挿入する必要があります。このとき、カスタムフィールドを作成した際の半角英数字のフィールド名を利用します。
たとえば「items」という名前のカスタムフィールドのデータをテンプレートページに出力するには、以下のコマンドを挿入します。

$items = get_field( 'items' ); 
// $itemsには現在のページに紐づいたカスタムフィールドのデータが代入されている

もしもitemsというカスタムフィールドが繰り返しコンテンツであれば、この$itemsは配列となっているため、このままループ処理を実行することができます。

if(is_array($items)){
  foreach ($items as $value) {
    $title = $value['title'];
    $color = $value['color']; 
    $price = $value['price']; 
    $postage = $value['postage']; 
    $material = $value['material'];
    // これらの変数を使って、PHPテンプレート上でコンテンツを組み立てていきます
  }
}

まとめ

最初にカスタムフィールドを作成するときは戸惑うことがあるかもしれませんが、ひとつ作ってしまえばその後は使いまわすことができます。Secure Custom Fields （Advanced Custom Fields）はとてもメジャーなテンプレートですので、検索すると有益な情報が多くヒットするものと思います。ぜひご活用ください。

お問い合わせ

株式会社HumAInではWordPressを使用したLP制作のほか、様々なサービスやウェブサイトの制作を行っています。詳しくはお問合せください。