Advanced Custom Fieldsでカード型データベースを構築する

ワードプレスでウェブサイトを制作する際、Advanced Custom Fieldsプラグインを使ってカード型データベースを組み込む機会が増えています。対象データは今までのところ中古車、人(スタッフ)だけですが物販や在庫管理などにも使えそうです。しかし、取り扱うデータ数が厖大(4桁以上?)な場合や他に専門のシステム(ネット通販システム)がある場合は余り出番はないと思います。つまり、比較的小規模で特殊なテータ形式のものを扱う場合に向いています。制作実績は、アルタオート様HPの中古車データベース、BE THERE様HPのスタッフデータベース、理想彼氏様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' );

少し手順が長いですが一度覚えると手当たり次第にカード型データベースにしてしまいたくなるくらい便利な方法です。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ブログに戻る