お店情報ページの作成 single.php の場合
お店情報は、投稿画面で作成して増やしていくので
single.php を作成します
まず、以前作成したお店情報のページをコピーします
ただし、投稿表示画面のファイル名が
single.php
であることに注意してください
今回は、別のディレクトリからコピーしました
1 | cp ../../../../shop.html single.php |
画面の状態を確認するには
ダッシュボードから記事の投稿画面で
変更をプレビュー
でみるとわかります
ただし、今のソースのままだと
wordpress の内容は反映されません
このため、ソースを書き換えていきます
まず、wordpress のヘッダーとフッターになるように
テンプレに変更します
ヘッダー部分には
1 | <?php get_header(); ?> |
フッター部分には
1 | <?php get_footer(); ?> |
とします
次に、記事があるかないかを判定します
もし、ないのなら
記事がありません
と表示するようにします
このため、本文を判定で囲みます
1 | <?php if(have_posts()): while(have_posts()): the_post(); ?> |
を
1 | <?php get_header(); ?> |
の下へ書き
1 2 3 | <?php endwhile; else: ?> <p>記事はありません</p><?php endif; ?> |
を
1 | <?php get_footer(); ?> |
の上に書きます
have_posts() は記事があるかを判定
the_post() は次の記事の取得です
この条件式の解説には
WordPressテーマの「while (have_posts()) : the_post();」の意味は？
がわかりやすいと思います
次にタイトルを wordpress の投稿で入力した
タイトルになるようにします
1 | <h2>ティーセット</h2> |
を
1 | <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> |
へ変更します
これで投稿一覧の中から
hello world を選び
変更をプレビューすると
タイトルが Hello world になります
the_title() は タイトルを表示します
the_permalink() は記事へのリンクになります
次に、お店のランチメニューの紹介を書く場所を
編集します
1 | <p>忙しい喧騒を離れ、午後はゆっくりとお茶を飲みたいときにおすすめです</p> |
の部分には投稿本文を反映できるようにします
投稿内容を表示するには
1 | <?php the_content(); ?> |
とします
これで保存し、再度変更をプレビューすると
hello world の記事に内容が変わります
今回の single.php のソースは以下のようになります
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <?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(); ?> |