Weblasts

PHPを使ってパーツを切り分けて読み込むと編集とか楽じゃん

PHPでは複数のページで使い回すことができる同じ部分(header・nav・footerなど)をあらかじめ保存しておき読み込むことができます。こうするとソースコードがスッキリして読みやすくなる。 読み込み方法はrequire関数で読み込む。

require関数

ファイルを読み込む関数。該当ファイルがなかった場合(パスが間違っていた場合)、この後に書かれた処理は行わないのが特徴。
Webページ内にファイルを読み込ませる場合はこれを使う

PHP

<?php require ’ファイルまでのパス’; ?>

簡単に使い方

ほかのページでも使いまわす部分を別ファイルで保存してテンプレートファイル化すると、まとめて修正することもでき編集に強くなります

ベースのHTML

<!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 &copy;2014 HOTEL IMPERIAL RESORT TOKYO All rights reserved.</small></p>
  </footer>
  <script src="js/slideshow.js"></script>
</body>

</html>

使いまわせそうな部分を探します。
今回の例ではheaderとnav部分・サイドバー部分・フッター部分が他のページでも共通する部分になっています。
それぞれをべつのPHPファイルとして保存していきます

header.php

<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>
sidebar.php

<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>
footer.php

<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 &copy;2014 HOTEL IMPERIAL RESORT TOKYO All rights reserved.</small></p>
</footer>

こんな感じで切り分けました。あとは読み込ませるだけになります

修正後

<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>

Recommend Post