PHPを使ってパーツを切り分けて読み込むと編集とか楽じゃん
PHPでは複数のページで使い回すことができる同じ部分(header・nav・footerなど)をあらかじめ保存しておき読み込むことができます。こうするとソースコードがスッキリして読みやすくなる。 読み込み方法はrequire関数で読み込む。
require関数
ファイルを読み込む関数。該当ファイルがなかった場合(パスが間違っていた場合)、この後に書かれた処理は行わないのが特徴。
Webページ内にファイルを読み込ませる場合はこれを使う
|
1 |
<?php require ’ファイルまでのパス’; ?> |
簡単に使い方
ほかのページでも使いまわす部分を別ファイルで保存してテンプレートファイル化すると、まとめて修正することもでき編集に強くなります
|
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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>HOTEL IMPERIAL RESORT TOKYO</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 480px)"> </head> <body> <header id="top"> <h1><a href="index.html"><img src="images/logo.png" alt="HOTEL IMPERIAL RESORT TOKYO"></a></h1> </header> <nav> <ul> <li id="nav_concept"><a href="concept.html">結婚式場のコンセプト</a></li> <li id="nav_plan"><a href="plan.html">プランのご案内</a></li> <li id="nav_fair"><a href="fair.html">ブライダルフェア</a></li> <li id="nav_contact"><a href="contact.html">お問い合わせ</a></li> </ul> </nav> <div id="graphic"> <ul> <li class="now"><img class="image1" src="images/slide1.jpg" alt="こだわりの空間で心地よいひとときを"></li> <li><img class="image2" src="images/slide2.jpg" alt="幸福に満ちた神聖なチャペル"></li> <li><img class="image3" src="images/slide3.jpg" alt="「ありがとう」の気持ちが伝わるウェディング"></li> </ul> </div> <div id="contents"> <div id="main"> <section id="news"> <h2>お知らせ</h2> <ul> <li><time datetime="2014-04-25">2014年04月25日</time>ランチ・ディナーのテイスティングフェア開催決定。ただいまご予約受付中です。</li> <li><time datetime="2014-03-03">2014年03月03日</time>春の特別見学会</li> <li><time datetime="2014-02-20">2014年02月20日</time>期間限定の割引プラン</li> <li><time datetime="2014-02-14">2014年02月14日</time>バレンタインフェア</li> </ul> </section> </div> <div id="sub"> <aside> <div class="bnr_inner"> <a href="plan.html"> <dl> <dt><img src="images/bnr_plan.jpg" alt="プランのご案内"></dt> <dd>標準のプランをご紹介いたします。</dd> </dl> </a> </div> <div class="bnr_inner"> <a href="contact.html"> <p><img src="images/bnr_contact.png" alt="お問い合わせ"></p> </a> </div> </aside> </div> </div> <footer> <p id="pagetop"><a href="#top">ページの先頭へ戻る</a></p> <address>東京都千代田区X-X-X 電話 0120-000-XXX 営業時間 11:00～20:00(水曜日定休)</address> <p id="copyright"><small>Copyright ©2014 HOTEL IMPERIAL RESORT TOKYO All rights reserved.</small></p> </footer> <script src="js/slideshow.js"></script> </body> </html> |
使いまわせそうな部分を探します。
今回の例ではheaderとnav部分・サイドバー部分・フッター部分が他のページでも共通する部分になっています。
それぞれをべつのPHPファイルとして保存していきます
|
1 2 3 4 5 6 7 8 9 10 11 |
<header id="top"> <h1><a href="index.html"><img src="images/logo.png" alt="HOTEL IMPERIAL RESORT TOKYO"></a></h1> </header> <nav> <ul> <li id="nav_concept"><a href="concept.html">結婚式場のコンセプト</a></li> <li id="nav_plan"><a href="plan.html">プランのご案内</a></li> <li id="nav_fair"><a href="fair.html">ブライダルフェア</a></li> <li id="nav_contact"><a href="contact.html">お問い合わせ</a></li> </ul> </nav> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="sub"> <aside> <div class="bnr_inner"> <a href="plan.html"> <dl> <dt><img src="images/bnr_plan.jpg" alt="プランのご案内"></dt> <dd>標準のプランをご紹介いたします。</dd> </dl> </a> </div> <div class="bnr_inner"> <a href="contact.html"> <p><img src="images/bnr_contact.png" alt="お問い合わせ"></p> </a> </div> </aside> </div> |
|
1 2 3 4 5 |
<footer> <p id="pagetop"><a href="#top">ページの先頭へ戻る</a></p> <address>東京都千代田区X-X-X 電話 0120-000-XXX 営業時間 11:00～20:00(水曜日定休)</address> <p id="copyright"><small>Copyright ©2014 HOTEL IMPERIAL RESORT TOKYO All rights reserved.</small></p> </footer> |
こんな感じで切り分けました。あとは読み込ませるだけになります
|
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 |
<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>HOTEL IMPERIAL RESORT TOKYO</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 480px)"> </head> <body> <?php require 'header.php';?> <div id="graphic"> <ul> <li class="now"><img class="image1" src="images/slide1.jpg" alt="こだわりの空間で心地よいひとときを"></li> <li><img class="image2" src="images/slide2.jpg" alt="幸福に満ちた神聖なチャペル"></li> <li><img class="image3" src="images/slide3.jpg" alt="「ありがとう」の気持ちが伝わるウェディング"></li> </ul> </div> <div id="contents"> <div id="main"> <section id="news"> <h2>お知らせ</h2> <ul> <li><time datetime="2014-04-25">2014年04月25日</time>ランチ・ディナーのテイスティングフェア開催決定。ただいまご予約受付中です。</li> <li><time datetime="2014-03-03">2014年03月03日</time>春の特別見学会</li> <li><time datetime="2014-02-20">2014年02月20日</time>期間限定の割引プラン</li> <li><time datetime="2014-02-14">2014年02月14日</time>バレンタインフェア</li> </ul> </section> </div> <?php require 'sidebar.php';?> </div> <?php require 'footer.php';?> <script src="js/slideshow.js"></script> </body> </html> |
