PHPの基本!外部ファイルを使いまわす方法

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のインストールについて

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>

STEP3. ブラウザから『index.php』を閲覧する

PHPが動作するサーバーにアップロードし、ブラウザで閲覧すると、外部化したファイルを読み込んだ状態で表示されます。

余談(include関数とrequire関数の違い)

include関数とrequire関数の違いを簡単にすると、読み込みができなかった場合に、その後処理を続けるかの違いです。

例えば、次の表示例は「ここはサイドです」と書かれた箇所が外部ファイルです。
エラーがあると、include関数は他の要素も表示しますが、require関数だと、エラーが出たところで表示が止まります。

例:正しい表示

include関数とrequire関数の違い

例:include関数でエラーが出ている場合

include関数の場合の表示例

エラーメッセージは出ていますが、ページ自体は最後まで表示しきっています。

例:require関数でエラーが出ている場合

require関数の場合の表示例

エラーメッセージ以降の要素が出てこなくなりました。

このような違いがあるので、ページのパーツを読み込む際には、include関数を使うことで、パーツのファイルは読み込めなかったけれど、表示自体はされる、という状態にすることが可能です。
また、PHPではエラーメッセージを出さない設定にもできます。その設定をすれば、閲覧者に読み込みエラーを悟られません。

Webアプリなどでは、一つのエラーが致命的になるので、require関数を使うべきだと思います。PHPへの理解が深まり、さらに深いシステムの部分を書くことになった場合にはrequire関数を使うようにすると良いと考えます。

まとめ

お使いのサーバーによっては、PHPが動作しない場合がございます。その点ご了承ください。

こういった方法を使うことで、ホームページの運用が楽になり、更新しやすくなります。定期的なサイトの更新はSEO対策にも重要なポイントですので、ちょっとした工夫で手軽に更新できるようになれば、すごくうれしいですね。

WordPress等のCMSも内部的には使いまわしできる部分を外部ファイル化し、必要なページで読み込む処理をしています。
CMSを使う予定はないが、サイト更新、修正の手間を少なくしたいと感じている方は、一度『PHPを使った共通部の外部ファイル化』、試してみてはいかがでしょうか。

すべての人にインターネット
関連サービス