お店情報ページの作成 single.php の場合

お店情報は、投稿画面で作成して増やしていくので
single.php を作成します

まず、以前作成したお店情報のページをコピーします

ただし、投稿表示画面のファイル名が
single.php
であることに注意してください

今回は、別のディレクトリからコピーしました

cp ../../../../shop.html single.php

画面の状態を確認するには
ダッシュボードから記事の投稿画面で
変更をプレビュー
でみるとわかります

ただし、今のソースのままだと
wordpress の内容は反映されません

このため、ソースを書き換えていきます

まず、wordpress のヘッダーとフッターになるように
テンプレに変更します

ヘッダー部分には

<?php get_header(); ?>

フッター部分には

<?php get_footer(); ?>

とします

次に、記事があるかないかを判定します
もし、ないのなら
記事がありません
と表示するようにします

このため、本文を判定で囲みます

<?php if(have_posts()): while(have_posts()): the_post(); ?>

を

<?php get_header(); ?>

の下へ書き

    <?php endwhile;   else: ?>
      <p>記事はありません</p>
    <?php endif; ?>

を

<?php get_footer(); ?>

の上に書きます

have_posts() は記事があるかを判定

the_post() は次の記事の取得です

この条件式の解説には
WordPressテーマの「while (have_posts()) : the_post();」の意味は？

がわかりやすいと思います

次にタイトルを wordpress の投稿で入力した
タイトルになるようにします

<h2>ティーセット</h2>

を

  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

へ変更します

これで投稿一覧の中から
hello world を選び
変更をプレビューすると

タイトルが Hello world になります

the_title() はタイトルを表示します

the_permalink() は記事へのリンクになります

次に、お店のランチメニューの紹介を書く場所を
編集します

<p>忙しい喧騒を離れ、午後はゆっくりとお茶を飲みたいときにおすすめです</p>

の部分には投稿本文を反映できるようにします

投稿内容を表示するには

  <?php the_content(); ?>

とします

これで保存し、再度変更をプレビューすると
hello world の記事に内容が変わります

今回の single.php のソースは以下のようになります

<?php get_header(); ?>

<?php if(have_posts()): while(have_posts()): the_post(); ?>

  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <h3>午後の緩やかな時間を本とともに</h3>
  <?php the_content(); ?>
  <img src="image/tee.jpg" alt="" width="300" height="300">

<h3>ギャラリー</h3>
<img src="image/food.jpg" alt="" width="300" height="300">

  <h3>メニュー</h3>
  <div data-role="collapsible">
    <h3>私のおすすめメニュー</h3>
    <p>イカスミパスタ</p>
  </div>

<h3>店舗情報</h3>
  <table data-role="table" data-mode="reflow" class="ui-responsive">
    <thead>
      <tr>
        <th>店名</th>
        <th>定休日</th>
        <th>価格</th>
        <th>住所</th>
        <th>電話番号</th>
        <th>HP</th>
        <th>アクセス</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>○○のお店</td>
        <td>日曜日</td>
        <td>ランチ1000円</td>
        <td>東京都</td>
        <td>000-000-0000</td>
        <td>http://example.co.jp</td>
        <td>○○駅○版口から徒歩</td>
      </tr>
    </tbody>
  </table>
<h3>周辺地図</h3>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7481415393895!2d139.74543744402948!3d35.65857638920314!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1436313888247" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
  <?php endwhile;   else: ?>
    <p>記事はありません</p>
  <?php endif; ?>


<?php get_footer(); ?>

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル