PHPの基本！外部ファイルを読み込んで使いまわす方法

2017/02/10 21:02

web

HTMLを勉強してホームページを公開してみたものの、運用についてお悩みの方もきっと多いのでは？

例えば、ページを1つ追加しただけなのに、すべてのページにリンクを貼りつけなければならないのが面倒で結局更新しなくなってしまったり、デザインを変えたいけど、すべてのページに反映させるのが面倒で、手を付けないままにしてしまったり。

1つの修正がすべてのページに及んでしまうことの億劫さはホームページを公開した多くの方が一度は頭を抱えてしまう問題だと思います。

そんな問題を解決に導くのは、『1つを変更したら、すべてのページに反映するような状態にする』こと。外部ファイル化して、各ページはそのファイルを読み込んで表示するような仕組みにすることで実現できますので、どうぞ一度お試しください。

すべてのファイルを変更するのはしんどい…解決策は『外部ファイル化』

ページを一つ追加したからサイトのメニューを更新しなきゃ!とは思ったものの、ページ数が多くて大変…。

という経験がある方もいらっしゃると思います。そのような場合は、サイトのメニューを外部ファイル化しておくことで手軽に更新できるようになります。

ヘッダーやフッター、サイドバーなど、どのページでも表示させる部分のHTMLコードを外部ファイル化させて、各ページで1つのファイルを使いまわす形にすれば、そのファイルを変更するだけで、その変更内容がすべてのページに反映されます。

外部ファイル化を行う方法はいくつかありますが、『PHP』を使う方法が一般的です。

HTMLの拡張版？ PHPとは？

PHP: Hypertext Preprocessor（ピー・エイチ・ピーハイパーテキストプリプロセッサー）とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。一般的には PHP 省略して用いられており、これは「個人的なホームページ」を意味する英語の “Personal Home Page” に由来する。

引用:Wikipedia

PHPとは、HTMLを生成するためのプログラミング言語のことで、HTMLだけではできなかった様々なことを実現するためのものだという認識でほとんど問題ないと考えています。

PHPを使うことで、複数のファイルをまとめて、1つのページであるように見せることが可能になります。

先述したように、サイトのメニュー部など、どのページでも使う項目を別のファイルにして各ページで使いまわす。CSVファイルを読み込んで、その内容で表を作成するといったことができるので、ホームページの更新が簡単になるのです。

プログラミング未経験の方がPHPを始めたきっかけは、「Webサイトの共通部を外部ファイル化」させるためという方が多い印象があります。私もそうでした。

どのように実装するのか

念のため記載しますが、ここからはPHPが動作するサーバーがある前提で進めます。ローカル環境（自分のPC）の場合はXAMPPを使用すると手軽にPHPを試せます。
XAMPPのインストールについては下記のリンク先ページに記載しておりますので、XAMPP等のPHPの実行環境が無い方はそちらから先にご覧いただけますと幸いです。

WindowsでPHPを実行する！　XAMPPのインストールについて

Webサイトの改善の幅を広げるPHPをWindowsで手早く使えるようにする『XAMPP』のインストール方法をお伝えします！

Windowsをお使いの方向けの記事ですが、Macでも同様の手順で行えます。フォルダを見ている画面をMacのFinderに置き換えて考えて頂ければと思います。

本題に戻りますが、PHPを使って外部ファイルを読み込む際は次のどちらかの関数を使います。

include
require

PHPは“関数”という『処理をひとまとめに定義したもの』をいくつも用意してくれています。上記のinclude関数、require関数はどちらも外部ファイルを読み込む処理をします。

次のように書くことで、外部ファイルを読み込めるようになります。


<?php include(‘ファイルのパス’); ?>

または


<?php require(‘ファイルのパス’); ?>

外部ファイル化してみる

下記のHTMLコードの『<!– ここから外部ファイル化する –>』から『<!– ここまで外部ファイル化する –>』までを外部ファイル化してみます。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1>これはテストページです。</h1>
    </div>
    <!-- ここから外部ファイル化する -->
    <div id="side">
      <p>ここはサイドです</p>
      <ul>
        <li>メニュー1</li>
        <li>メニュー2</li>
        <li>メニュー3</li>
        <li>メニュー4</li>
        <li>メニュー5</li>
        <li>メニュー6</li>
        <li>メニュー7</li>
        <li>メニュー8</li>
        <li>メニュー9</li>
      </ul>
    </div>
    <!-- ここまで外部ファイル化する -->
    <div id="main">
      <p>ここはメインです</p>
      <p>
        テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>
      </p>
      <p>
        テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>
      </p>
    </div>
    <div id="footer">
      <p>テストページでした。</p>
    </div>
  </div>
</body>
</html>

Step1使いまわしたい箇所を切り取り、別ファイルに保存する

切り取ったHTMLコードを別のファイルとして保存します。この時、拡張子は『php』で読み込むページと同じ階層に保存してください。
今回は『side.php』とします。


<!-- ここから外部ファイル化する -->
<div id="side">
  <p>ここはサイドです</p>
  <ul>
    <li>メニュー1</li>
    <li>メニュー2</li>
    <li>メニュー3</li>
    <li>メニュー4</li>
    <li>メニュー5</li>
    <li>メニュー6</li>
    <li>メニュー7</li>
    <li>メニュー8</li>
    <li>メニュー9</li>
  </ul>
</div>
<!-- ここまで外部ファイル化する -->

Step2切り取った箇所に外部ファイルを読み込む関数を入れ込んで保存する

先ほど切り取った箇所に外部ファイルを読み込むinclude関数を記述し、ファイルを保存します。拡張子は『php』で保存してください。

ファイル名は『index.php』とします。

※13行目に追記しています。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1>これはテストページです。</h1>
    </div>
<?php include('./side.php'); ?>
    <div id="main">
      <p>ここはメインです</p>
      <p>
        テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>
      </p>
      <p>
        テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>テキストテキストテキストテキスト<br>
      </p>
    </div>
    <div id="footer">
      <p>テストページでした。</p>
    </div>
  </div>
</body>
</html>