Custom Field Template


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

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

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

Custom Field Template設定 目次

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

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

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

Custom Field Templateのインストール

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

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

3、Custom Field Templateの下にある[いますぐインストール]をクリック

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

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

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

↑Custom Field Template設定 目次へ

Custom Field Templateの設定

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

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

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

[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 = カレー写真1

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

[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]の3つで構成されています。

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

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

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

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

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

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

↑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(); } ?>(5段階の口コミ評価です。星を選択することで評価できます。皆様の口コミ評価をお待ちしています!)</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になっているので、呼び出したい部分に記述してあげればカスタムフィールドで入力した値が自動的に表示されるようになります。

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

<?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;
	}

↑Custom Field Template設定 目次へ

内容を入力して動作確認

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

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

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

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

↑Custom Field Template設定 目次へ

Custom Field Template への20件のフィードバック

  1. ピンバック: お天気Webサービス | WordPressとプラグインを使ってお店紹介サイトを作る方法

  2. ピンバック: Twitter Search API | WordPressとプラグインを使ってお店紹介サイトを作る方法

  3. ピンバック: TSUKIROKU WP SAMPLE THEME » カスタムフィールドテンプレートテスト02

  4. 岩嵜(いわさき) のコメント:

    記事拝見しました。
    他の人のを見ても分らなかったのが、アナタの記事で解決できました!
    ありがとうございます。
    私のような初心者にはすごく有り難い内容でした。

    • yuji のコメント:

      岩嵜(いわさき)さん
      コメントをありがとうございます。

      そういっていただけると、サイトを作った甲斐があります。
      今後もサイト制作の参考になれば幸いです。

  5. ピンバック: ブログリニューアルしました | くろひつじのメモ帳

  6. コバ のコメント:

    cssはstyle.cssに追加するだけでいいのでしょうか。レイアウトが反映されないので困っています。
    教えてください。

    • yuji のコメント:

      コバさん

      返信が遅くなってしまい、大変申し訳ありません。

      cssですが、参考のものはもうひとつ外側の「div#page」が入っているので、それを削除すると反映されると思います。
      若干説明が足りなくてすみませんでした。

      よろしくお願いします。

  7. game tester のコメント:

    Hello! I could have sworn I’ve been to this website before but after reading through some of the post
    I realized it’s new to me. Nonetheless, I’m definitely delighted I found it and I’ll be book-marking and checking back often!

  8. ピンバック: Custom Field Templateまとめ|新・ウズラ日常記

  9. Masashi のコメント:

    loop-single.phpが存在しないテンプレートの場合はどのファイルに書き込めばいいでしょうか?
    まずは、YUJIさんのサンプルを丸ごとコピーして、反映されることを確認したうえで自分のやりたいように変更しようと思ってやってみましたが、全然上手くいきません。
    よろしくお願いします。

    • yuji のコメント:

      Masashiさん
      コメントありがとうございます。

      loop-single.phpが存在しない場合、単一記事の投稿は「single.php」に集約されているはずですので、こちらを修正すれば大丈夫です。

      また、ここに紹介しているものをすべて一気にテストしてしまうと「どこに間違いがあるか」がわかりにくくなってしまうため、まずはどれか1つをテストしてうまくいったら増やしていくほうが結果としては効率が良くなると思います。

      その他でもわからないことがあれば、聞いてください。

      • Masashi のコメント:

        そうですね、
        YUJIさんが指摘されたように、まず1つをテストしていくことにします。

        メールに返信もらえると思っていたので返事が遅くなってしまいました。
        申し訳ありません。

        とにかく頑張ってみます。
        また質問するかもしれませんが、よろしくお願いします。

        • yuji のコメント:

          Masashiさん
          すみません、回答をどこにするか迷ったのですが、コメントにしてしまいました。

          また何かあれば問い合わせてください(次に質問があった場合は確実に届くようにメールにします)。

  10. Moriya のコメント:

    はじめまして。とても参考になりありがとうございます。現在製作中のサイトにて店舗情報を取り扱うため、当該ページと全く同じように記述をして大体はOKなのですが、google maoだけが表示されません。緯度と軽度も
    緯度 35.689506
    経度 139.69170 という感じでちゃんと計測できる数字を入れているのですが、その部分だけ真っ白に表示されます。
    こちらの地図を表示させる前提として、なにかしらする準備みたいなものはあるのでしょうか?
    ご教示いただければ幸いです。

    • yuji のコメント:

      Moriyaさん
      コメントありがとうございます。

      Google Mapが動かないとのことですが、ヘッダーにJavaScriptの記述は行っていますでしょうか?

      その他、Google Mapに関してはこちらを参考にしていただけるといいと思います。
      http://make.mapmap.biz/api/559/

      もしこちらでわからないようであれば、また質問してください。

  11. のコメント:

    こちらの記事を元に最近の記事から導入致しました。
    お世話になりました。
    とてもわかりやすかったです。
    ありがとうございました。

    mashupの地図も独自マーカーにしたいなぁ~と思っていますので
    今後、また参考にさせて頂きます。

    • yuji のコメント:

      都さん

      当サイトの記事が参考になってなによりです。
      最初は難しいですが、Custom Field Templateは慣れると使い勝手のいいプラグインですので、ぜひともご活用ください。

      また、独自マーカーについてもうまくいくことを願っております。

  12. ピンバック: Custom Field Template プラグイン | あみものぺーじ

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>