カスタムフィールドとカスタム投稿で記事投稿フォームを使いやすく 3 – テンプレート編集の巻 【ワードプレス】 #wp

1年以上前の記事です。内容が古い可能性があります。

さて、入力側のインターフェースが整ったところで、今度は出力側の設定をしておきましょう。
カスタム投稿（カスタムポスト）を使って投稿された記事はなにも設定しないと「single.php」（ブログ記事一つのテンプレート）にのっとって表示されます。
これを、専用のテンプレートで表示させるためには、今回作ったカスタム投稿タイプが「shops」なので、「single-shops.php」というテンプレートを用意する必要があります。
つまり「single-カスタム投稿タイプ名（英字）.php」というテンプレートを用意すればいいのです。
そしてそこに、カスタムフィールドの要素も付け加えてレイアウトしてあげます。

WordPress 高速化＆スマート運用必携ガイド

posted with ヨメレバ

こもりまさあき,岡本渉 MdN 2012-03-16

Amazon

楽天ブックス

7net

bk1

ブックオフ

e-hon

1. まずはサーバーから該当のテーマフォルダ内の「single.php」をダウンロードして「single-shop.php」（カスタム投稿タイプが「shops」の場合）に改名、同じ場所にアップする。
   
2. ダッシュボードから「外観」→「テーマ編集」と行き、「single-shop.php」を開く。
3. 「つぶくま」の場合はベースとなっているテーマが「Twenty Ten」。
   「Twenty Ten」は「single.php」に「loop-single.php」を読み込ませています。
   したがって「loop-single.php」からソースを引っ張ってこなければなりません。
   このあたりは、テーマによって変わってくるので注意。
   いずれにしても、「single-shop.php」内にカスタムフィールドの各項目を表示させるスクリプトを書くことになります。
4. まずはカスタムフィールドで得た情報をどのように配置するかですがこのあたりは何らかの方法でベースデザインを作ってそれをテンプレートに当てはめるというやり方がいいと思います。
   僕はDreamweaverを使って表組みデザインを作った上でテンプレートに当てはめました。
   基本、各項目をテーブルで整然と並べただけですが。
5. 次に、どの部分に上記テーブル（作成したレイアウト）をいれこむかがポイントになります。
   僕は本文上に置きたかったので
   <div class=”entry-content”>

   と

   <?php the_content(); ?>

   の間に書き込みました。
   本文下に入れたければ上記スクリプトの下に配置すればいいと思います。

6. 最後にカスタムフィールドで入力されたデータを呼び出します。
   データを呼び出すには、
   
   <?php echo post_custom(‘キー’)?>

   via : テーマにカスタムフィールドを反映させる方法 | かたつむりくんのWWW
   を使います。
   画像（type = imagefield）の場合はその画像のURLになるので注意して下さい。
   また、地図の部分はショートコードとの合わせ技で、

   <?php echo do_shortcode( ‘[addr2gmap addr=”‘.post_custom(‘address1′).'”]’ ); ?>

   via : FAQ | Contact Form 7
   
   といった具合に表記します。

以上でできたページが以下のとおりです。

タイトルをお店の名前にしたりと部分的にカスタマイズしています。
やっぱり本文と写真は上のほうがいいかもしれませんねぇ。