PHPで外部ファイルを読み込んでレイアウトを作る方法

PHPで外部ファイルを読み込んでレイアウトを作る方法を紹介します。

.htaccessを使ってHTMLファイルでPHPを実行する方法

「MIMEタイプの設定」を.htaccessで制御することで「.html」ファイル内のPHPを実行できるようにします。

「.htaccess」を「index.html」と同じフォルダに置きます。

htmlの外部ファイル化

htmlファイルを用意します。

CSSレイアウトはdivタグで作る!

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="wrapper"><br>
      <div id="header">
        <h1>ヘ ッ ダー</h1>
      </div>
      <div id="contents">
        <h2>コンテンツ</h2>
        <h2> </h2>
      </div>
      <div id="menu">
        <ol>
          <li> メニュー</li>
          <li>メニュー</li>
          <li>メニュー</li>
        </ol>
      </div>
      <div id="footer">
        <h3>フ ッ タ ー<br>
        </h3>
      </div>
    </div>
  </body>
</html>

外部ファイル化したい部分を切り取る

「header」も「footer」も外部ファイル化できますが今回は「menu」を外部ファイル化してみます。

「menu」の外部ファイル化

「index.html」と同じ階層に「parts」フォルダを作成します。

「index.html」と同じ階層に「parts」フォルダを作成します。

「index.html」の「menu」を切り取り「menu.php」として保存します。

<div id="menu">
        <ol>
          <li> メニュー</li>
          <li>メニュー</li>
          <li>メニュー</li>
        </ol>
      </div>

切り取った箇所に外部ファイルを読み込みます。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="wrapper"><br>
      <div id="header">
        <h1>ヘ ッ ダー</h1>
      </div>
      <div id="contents">
        <h2>コンテンツ</h2>
        <h2> </h2>
      </div>
      <?php include_once 'parts/menu.php'; ?>
      <div id="footer">
        <h3>フ ッ タ ー<br>
        </h3>
      </div>
    </div>
  </body>
</html>
include_once

外部ファイルを一度だけ読み込みます。すでに外部ファイルが読み込まれている場合は、ファイルを読み込むことはありません。

CSS(スタイルシート)でデザインをする!

Pleiades All in One をインスートールしてPHPを始める!

コメント

タイトルとURLをコピーしました