ワードプレスでウェブサイトを制作する際、Advanced Custom Fieldsプラグインを使ってカード型データベースを組み込む機会が増えています。対象データは今までのところ中古車、人(スタッフ)だけですが物販や在庫管理などにも使えそうです。しかし、取り扱うデータ数が厖大(4桁以上?)な場合や他に専門のシステム(ネット通販システム)がある場合は余り出番はないと思います。つまり、比較的小規模で特殊なテータ形式のものを扱う場合に向いています。制作実績は、アルタオート様HPの中古車データベース、BE THERE様HPのスタッフデータベース、理想彼氏様HPのスタッフデータベースがあります。
まず、最初に対象データの投稿タイプを考えます。通常はpostタイプを選び、1つのカテゴリー(中古車、スタッフなど)でデータを扱いますが、特殊なデータ型の場合はpost以外の投稿タイプにすることもあります。今回はアルタオート様HPの中古車データベースの例(上図)ではpostタイプ、カテゴリー名=中古車(スラッグ: usedcar)としています。
Advanced Custom Fieldsのインストールが完了したら WordPress管理画面 > カスタムフィールド > 新規追加 から新規にフィールドグループを任意の名称で作成し、全データ項目(フィールド)の属性等を記述します。フィールドは複数あると思いますが実際データ入力する際の順序を意識して、その順番で作成します(後で順序変更可)。UIは直感的で分かり易く設計されています。完成したフィールドグループはこのような感じです。
一例として12番目のフィールド”年式”の詳細を見てみましょう。フィールドの記述で重要なのは①フィールドラベル(俗称、日本語可)、②フィールド名(プログラム中で参照する正式名称、半角英数等制約あり)、③フィールドタイプ(テキスト、画像、ラジオボタンなど選択式)の3つです。この”年式”の例はデイトピッカー(日付けをカレンダーから選択)という特殊なフィールドタイプですので保存・表示フォーマットを指定します。 フィールドグループの最後尾にオプション指定があります。ここにある”ルール”が重要で、どのデータの編集画面にこれらのフィールドを表示させるかを設定します。この例では、「Post Categoryが中古車に等しい」という条件です。左側選択窓でPost Categoryを選ぶと右側にカテゴリー一覧の選択窓が現れるので、前もって作成した中古車を選びます。 これでデータ入力の準備が整ったので WordPress管理画面 > 投稿 > 新規追加 から編集画面をだします。カテゴリー選択欄(右サイド)で”中古車”を選択すると編集画面が上記で設定したフィールドに変化するので項目毎にデータを入力するだけです。 次に表示用テンプレートを作ります。これは使用しているテーマに依存するので共通部分のみ説明します。テーマディレクトリ下のsingle.phpをsingle-usedcar.php(usedcarの部分は実際のカテゴリースラッグに変更すること)にコピーします。下の例は中古車の画像をスライダー表示(bxsliderを使用)するためのコードです。<?php /* WP Post Template: 中古車データ投稿用 */ ?> <!-- この部分は使用するテーマに依存 --> <?php if (get_field("image1")) { echo '<div class="bxslider">'; for ( $i = 1; $i <= 4; $i++ ) { if (get_field("image$i")) { echo '<div><img src="'.get_field("image$i").'" alt="'.get_field("caption$i").'" /></div>'; } } echo '</div>'; } ?>最後にこの表示用テンプレートと中古車カテゴリーの投稿をリンクさせる必要があります。ここではカテゴリーと表示用テンプレートを自動的にリンクさせる方法をご紹介します。テーマディレクトリ下のfunctions.phpに以下のコードを追加します。
// カテゴリーと表示用テンプレートを自動的にリンクさせる function add_category_template( $single_template ) { $new_template = $single_template; $post = get_queried_object(); if ( has_category( 'usedcar', $post ) ) { $single_member_template = locate_template( 'single-usedcar.php' ); if( !empty( $single_member_template ) ) $new_template = $single_member_template; } return $new_template; } add_filter( 'single_template', 'add_category_template' );
少し手順が長いですが一度覚えると手当たり次第にカード型データベースにしてしまいたくなるくらい便利な方法です。