PHPを使ってサイト運営を楽にしよう！～共通部品を外部ファイルで一括管理編～

自分でサイトを作った場合、一番面倒くさいのはサイトの更新です。

また、大抵のサイトではヘッダーやメニュー、フッターは共通ですよね。
これをCSSみたいに別のファイルに保存しておいて呼び出せるようになったら、ちょっとデザインやメニューの項目を変更したりしやすくなると思いませんか？

今回紹介するのは実際私のサイト（水に浮かぶ月）で使っているもので、便利さ＆効果は実証されています。
理論は知らなくてもコピペで対応できるため「ぷろぐらみんぐとかぴーえいちぴーとかむずかしくてわかんない」という人でも安心です！

PHPを使う際の注意事項

PHPはサーバー上で動くプログラムです。
つまりブラウザで開けばすぐに確認できるHTMLと違い、サーバーにアップロードするか仮想環境と呼ばれるものを作らなければ、実際の表示や動きを確認することはできません。
本来ならとっても面倒くさいんです。

ただ、この記事はすでに何らかのサーバーを使っている人を想定して書いています。
つまり手間ではありますが、契約しているサーバーにテスト用フォルダを作り、そこにファイルをアップロードして実際の表示をご確認いただければよろしいかと！
私自身、この手でちゃんと表示されるかどうかチェックしてました。

ちなみに私のサイトでは、「URLの最後が.phpだと手作り感が薄れる」とかいう理由から、.htaccessをいじってHTMLファイルをPHPとして扱えるように設定しています。
あとサイト構築の際の手間が大幅に減る（PHPファイルを複製したりHTMLファイルからPHPファイルにコピペしなくてよくなる）ので個人的にはオススメです。
サーバー上でHTMLファイルをPHPファイルとして扱う方法についてはまた別の記事で説明しますね。

とは言え、手順を工夫しさえすれば手間はかなり減らせます。

1. HTMLファイルで基本となるレイアウトを作る
2. サーバー上で表示＆動作確認
3. 動作に問題がなければPHPファイルはいったん置いて、HTML上でレイアウトやデザインを固める
4. HTML上でレイアウトとデザインを完成させる
5. 共通部品をPHPファイルにコピペ
6. 必要なファイルを再度サーバーにアップして表示＆動作確認
7. 問題がなければこのファイルをベースにページを複製していく

共通部分は外部ファイルにして一括管理

大抵のサイトでは、ヘッダーやフッター、あとメニューなどはどのページも同じものを使ってます。
つまりすべてのページに同じ内容のHTMLを書いてるわけですが、ちょっと何かを変更したいと思ったときに、全部のページを書き直さなければならないのが大変です。

まあ、Devasのような一括置換ソフトでまとめて変換すればいいっちゃいいんですが、相対パスを使っている場合が面倒くさい。
絶対パスも大規模な改装の場合はチェックが面倒くさい（先にリンク先のファイルをサーバーにアップしておかないとリンク切れチェックができない）ため、やっぱり面倒くさい。

そういった面倒を極力排除できるのがinclude。

まずは通常通りHTMLでサイトの構造を作ります。（ソースは以前書いた記事からの流用）
このとき、HTMLファイルとは別に拡張子がphp（例 index.php）のものを作っておくと後の作業がスムーズになります。

<header>
    <h1>サイト名</h1>
    <nav>
        <ul>
            <li>メニュー１</li>
            <li>メニュー2</li>
            <li>メニュー3</li>
            <li>メニュー4</li>
            <li>メニュー5</li>
        </ul>
    </nav>
</header>
<main>
    <section id="about">
        <h2>当サイトについて</h2>
        <article>サイトの説明</article>
    </section>
    <section id="history">
        <h2>更新履歴</h2>
        <article>履歴内容</article>
    </section>
    <section id="union">
        <h2>同盟・サーチ</h2>
        <article>同盟・サーチバナー</article>
    </section>
</main>
<footer>
著作権表示など
</footer>

このレイアウトだと、共通部分はヘッダー（メニュー含む）とフッターになりますね。
え？ページに合わせて色や見た目を変えたい？
レイアウト構成を丸っと変えたいとかでなければ、CSSでなんとでもできます。
ここで重要なのはHTMLの構造。
他のページでも構造が同じなら共通部品として扱えるので問題ありません。

ではヘッダー部分の対応をしましょう。
まず新しいファイルを作って、そこにヘッダータグの中身を丸っとコピペします。

<header>
    <h1>サイト名</h1>
    <nav>
        <ul>
            <li>メニュー１</li>
            <li>メニュー2</li>
            <li>メニュー3</li>
            <li>メニュー4</li>
            <li>メニュー5</li>
        </ul>
    </nav>
</header>

この状態で文字コードをUTF-8に指定して、header.phpという名前で保存してください。
次に拡張子がphpの方のファイル上で、ヘッダーの部分をPHPのincludeを使って書き換えます。

<?php include ('header.php'); ?>

<main>
    <section id="about">
        <h2>当サイトについて</h2>
        <article>サイトの説明</article>
    </section>
    <section id="history">
        <h2>更新履歴</h2>
        <article>履歴内容</article>
    </section>
    <section id="union">
        <h2>同盟・サーチ</h2>
        <article>同盟・サーチバナー</article>
    </section>
</main>
<footer>
著作権表示など
</footer>

というわけで、サーバーのテスト用フォルダにindex.phpとheader.phpをアップロードし、index.phpを表示してください。
問題なくヘッダーの入ったページが表示されるはずです。

ちなみにPC上ではPHP文は無視されるので、HTMLでデザインしている間は、includeで外に出す部分を併記していても表示に支障は出ません。

<header>
    <h1>サイト名</h1>
    <nav>
        <ul>
            <li>メニュー１</li>
            <li>メニュー2</li>
            <li>メニュー3</li>
            <li>メニュー4</li>
            <li>メニュー5</li>
        </ul>
    </nav>
</header>
<?php include ('header.php'); ?>
<main>
    <section id="about">
        <h2>当サイトについて</h2>
        <article>サイトの説明</article>
    </section>
    <section id="history">
        <h2>更新履歴</h2>
        <article>履歴内容</article>
    </section>
    <section id="union">
        <h2>同盟・サーチ</h2>
        <article>同盟・サーチバナー</article>
    </section>
</main>
<footer>
著作権表示など
</footer>

ヘッダーを共通部品化する際の注意点

HTMLファイルの冒頭部分は基本的にはどのページでも共通ですよね。
となれば!DOCTYPEやheadタグの中身も全部外部ファイルにまとめたくなるかもしれません。
これ、理論的には可能なのですが、実はあまり推奨されていません。
というのも<!DOCTYPE lang="ja">から始まる文字コードやviewportを含めた基本設定は、他の何が読み込まれるより先に指定しなければならないため、外部ファイルに含めた場合、header.phpファイルの読み込みが終わるまで表示がバグる可能性があります。
またCSSファイルも早い段階で読み込んでもらわないとサイトの表示がおもしろいことになりかねないのでご注意を。

おわりに

8月に入ってから自サイトをちょこちょこいじってるんですが、スマホレイアウトにハンバーガーメニューを適用した時、心底からヘッダー部分を共通部品化がしていてよかったと思いました。
（どんなふうに実装したかは実サイトにてぜひご自身でお確かめください！）
まあ、ここでもちょっとしたトラブルはあったんですが、それは私の知識不足やら凡ミスやらが主な原因だったのでここでは言及しませんが。
でも最近のCSSは本当すごいですね。発想の転換もあるんでしょうが、めちゃくちゃ便利だしこれまでJSやらjQueryやら使わなければできなかったこともできるようになっているので、これからも色々実験していく予定です！