Custom Field Template

Custom Field Templateはカスタムフィールドを使いやすくしてくれるプラグインです。

お店紹介のサイトでは同じ項目を各ページに表示させるため、カスタムフィールドを多用しますから、カスタムフィールドが使い勝手の良さが作業効率の良さに直結します。

Custom Field Templateはかなり優れたプラグインで、様々な使い方ができますが、ここでは実際に東池袋カレーマップで使用したのと同じ流れで設定方法を紹介したいと思います。

Custom Field Template設定目次

カスタムフィールドの運用イメージ

Custom Field Templateの説明の前に、東池袋カレーマップを作成するときに行ったカスタムフィールドの運用イメージを確認しておきます。

WordPressが元々持っている機能だけでも運用は可能ですが、Custom Field Templateを使うことでカスタムフィールドの作成（修正含む）と記事投稿時の操作性が格段とアップします。

Custom Field Templateのインストール

１、WordPressのダッシュボードにログインし［プラグイン］→［新規追加］をクリック

２、検索窓に「Custom Field Template」を入力して［プラグインの検索］をクリック

３、Custom Field Templateの下にある［いますぐインストール］をクリック

４、「本当にこのプラグンをインストールしていいですか？」と聞かれるので［OK］をクリック

５、インストールしているプラグイン: Custom Field Template 1.9.6と表示されるので、［プラグンを有効化］をクリック（バージョンは変更になる可能があります）

６、プラグンのラインナップにCustom Field Templateが表示されていればインストール完了です

Custom Field Templateの設定

１、メニューの［設定］→［カスタムフィールドテンプレート］をクリック

２、TEMPLATE #0のテンプレートタイトルに「店舗情報」と入力

３、テンプレートコンテンツに以下の内容を入れて、［オプションを更新する］をクリック

[Zip]
type = text
size= 35
label = 郵便番号

[Address]
type = textarea
cols= 80
rows = 3
label = 住所

[Tel]
type = text
size = 35
label = 電話番号

[Time]
type = text
size = 35
label = 営業時間

[Holiday]
type = text
size = 35
label = 定休日

[Seat]
type = text
size = 35
label = 席数

[Outward]
type = file
label = 外観写真

[Curry Photo1]
type = file
label = カレー写真１

[Curry Photo2]
type = file
label = カレー写真２

[Impression]
type = textarea
cols= 80
rows = 3
label = 感想

[Map_lat]
type = text
size = 35
label = 緯度

[Map_lng]
type = text
size = 35
label = 経度

［プチ説明］

Custom Field Templateの記述ルールは、［ID］［tyle(サイズ)］［label］の３つで構成されています。

［］に挟まれた部分の記述がそのままIDに、「type」でカスタムフィールドの種類を、「label」は投稿画面で表示されるテキストを表しています。

IDの命名ルールは特に決まっておらず、自分の好きな名称を付けることができます（CSSと同じ感じ）、また、ID名は日本語でも可能みたいですけど、WordPressのテーマに読み込ませることを考えるとちょっと不安があったので、英数字のみを使っています。

参考までに、、、
「text」は一行のテキストフィールド（sizeが幅）、「textarea」が複数行のフィールド（colsが幅、rowsが行）「file」が画像のアップロードになります。

Custom Field Templateにはこれ以外にチェックボックス、ラジオボタンなどもありますが、それらについては触れませんので、Custom Field Templateの配布ページ等で確認してください。

４、記事投稿画面に設定した内容のカスタムフィールドが表示されます

以上でカスタムフィールドの設定は完了です。

テーマファイルへの埋め込み

カスタムフィールド自体の設定が終わったところで、次はWordPressのテーマファイルへの埋め込み作業を行います（カスタムフィールドは設定しただけでは反映されませんので、ここ作業もかなり重要なものになります）。

東池袋カレーマップはWordPressのデフォルトテーマの「Twenty Ten」をベースにカスタマイズしているかんけいで、編集するテーマファイルは「loop-single.php」になります（テーマファイルによって若干違ってくると思います）。

＜要注意＞
テーマファイルの編集に入りますが、WP-PostRatingsの部分だけピックアップしているため、基本的なテーマファイルの編集部分は省略しています。テーマファイルの編集について詳しく知りたい方はWordPressのインストールの「WordPressのテーマ作成に役立つサイト」などを参考にしてください。

＜編集開始＞
メニューの［外観］→［テーマ編集］を開き、右のメニューから「loop-single.php」をクリックします。記事関連の記述があるところに以下のファイルを追加。

<?php if ( get_post_meta($post->ID,'Zip',TRUE) ): ?>
<h3><?php the_title(); ?>の情報</h3>
<div class="infobox">
<table>
<tr><td class="name">住所</td><td>〒<?php echo post_custom("Zip")?><br /><?php echo post_custom("Address")?></td></tr>
<tr><td class="name">電話番号</td><td><?php echo post_custom("Tel")?></td></tr>
<tr><td class="name">営業時間</td><td><?php echo post_custom("Time")?></td></tr>
<tr><td class="name">定休日</td><td><?php echo post_custom("Holiday")?></td></tr>
<tr><td class="name">席数</td><td><?php echo post_custom("Seat")?></td></tr>
<tr><td class="name">地図</td><td>
<div id="map" style="width: 440px; height: 200px;"></div>
    <script type="text/javascript">
    google.maps.event.addDomListener(window, 'load', function() {
        var mapdiv = document.getElementById( 'map' );
        var myOptions = {
            zoom: 17,
            center: new google.maps.LatLng( <?php echo post_custom("Map_lat")?>,<?php echo post_custom("Map_lng")?> ),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true
        };
        var map = new google.maps.Map( mapdiv, myOptions );
        var marker = [];
        var infowindow = [];
marker[0] = new google.maps.Marker({icon: 'http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.png',position: new google.maps.LatLng(<?php echo post_custom("Map_lat")?>,<?php echo post_custom("Map_lng")?>),
            map: map,
            title: '<?php the_title(); ?>'
        });
        var markerCluster = new MarkerClusterer( map, marker );
    });
    </script></div>
</td></tr>
<tr><td class="name">感想</td><td><?php echo post_custom("Impression")?></td></tr>
<tr><td class="name">口コミ評価</td><td><?php if(function_exists('the_ratings')) { the_ratings(); } ?>（５段階の口コミ評価です。星を選択することで評価できます。皆様の口コミ評価をお待ちしています！）</td>
</tr>
<tr><td colspan="2"><?php echo wp_get_attachment_image(get_post_meta($post->ID,'Outward',true)); ?><?php echo wp_get_attachment_image(get_post_meta($post->ID,'Curry Photo1',true)); ?><?php echo wp_get_attachment_image(get_post_meta($post->ID,'Curry Photo2',true)); ?></td></tr>
</table>
<?php endif;?>

少し長いので、難しそうですが基本的な部分はここ

<?php echo post_custom("Zip")?>

“”で囲われているところが、Custom Field Templateで設定したIDになっているので、呼び出したい部分に記述してあげればカスタムフィールドで入力した値が自動的に表示されるようになります。

＜追記＞
上記の方法でカスタムフィールドの情報が上手く取得できない時もあるようなので、その場合は以下の２パターンを試してみてください。

<?php echo get_post_meta($post->ID, Zip, true); ?>
もしくは
<?php echo $post->Zip; ?>

また、画像に関してはこの方法だとID番号しかでないため、少しだけ記述方法が変わっています。

<?php echo wp_get_attachment_image(get_post_meta($post->ID,'Outward',true)); ?>

＜注意＞
画像のサイズは［設定］→［メディア］にある「サムネイルのサイズ」に準じるようになっています。サイズを変更したい場合はここでサイズを変更してからアップロードする必要があります（アップロードごのサイズ変更はできません）。

＜おまけ＞
最初と最後に以下の記述があるのは、カスタムフィールドに入力がなかった場合は表示させないようにするためのものです。店舗情報だけを掲載するサイトなら不要ですが、別途レビューなどを書くときに「店舗情報ページ」と「レビューページ」のデザインを分けるのに便利です。

<?php if ( get_post_meta($post->ID,'Zip',TRUE) ): ?>
<?php endif;?>

以上で、テーマファイルへの埋め込みは完了です。

＜参考＞
上記ページに適応させているCSSはこちらになります。

div#page div.infobox table{
	margin: 0 0 20px 0;
	width: 575px;
	border-collapse: collapse;
	font-size:14px;
	}
div#page div.infobox table td{
	width:455px;
	padding:5px;
	word-break:break-all;
	line-height:1.3;
	border:1px solid #df9128;
	}
div#page div.infobox table td.name{
	width:120px;
	vertical-align:top;
	background-color: #ffe1b9;
	font-size:12px;
	}
div#page div.infobox table td img{
	margin: 0 5px 0 0;
	border:1px solid #343434;
	}

内容を入力して動作確認

カスタムフィールドの設定、テーマファイルへの埋め込みが終わったらついに記事投稿を行います。

カスタムフィールドの設定で確認したカスタムフィールド入力欄に必要事項を入力して、ページを「更新」すれば反映されるはずです。

上手く表示されない場合は、テーマファイルへの埋め込みでミスがあることがほとんどなので、記述などに問題がないか改めて確認してみてください。

上手く行けばこうなります。