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

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

.htaccessを使ってHTMLファイルでPHPを実行する方法
htmlの外部ファイル化
外部ファイル化したい部分を切り取る
- 「menu」の外部ファイル化
- 切り取った箇所に外部ファイルを読み込みます。
Pleiades All in One をインスートールしてPHPを始める！

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

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

HTMLファイルに埋め込んだPHPが表示されない。

HTMLファイルに埋め込んだPHPが表示されなくて困っていませんか？それは、サーバーがhtml拡張子を持つファイルをPHPとして認識していないからです。サ…

jikuu.work

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

htmlの外部ファイル化

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

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

無料のホームページ作成ソフトBlueGriffonのダウンロードとインストールの方法 – 知識を取得する！

無料のホームページ作成ソフトを検索してもホームページ作成ツールが表示されてしまいます。その中で無料のホームページ作成ソフトBlueGriffonを見つけること…

jikuu.info

<!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」の「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>

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