サイト全体の更新が楽ちんに!PHPのinclude(インクルード)を使ったWEBサイト共通パーツの作り方
ヘッダーやフッターなど、サイトを通して共通した部分の更新を、各ページで行っていませんか?
PHPのinclude(インクルード)を使えば、1つのページを変更することで全ページの変更が可能となります。
CMS全盛の時代にコードを書いてサイトを作ることも少ないとは思いますが、少ない需要があると思って記事にしたいと思います。
大前提として、PHPが使用できるサーバーでなければ今から紹介する方法は利用できません。使用可否については各自で確認してから使用くださいね。
.htaccessファイルの準備
まずは.htaccessファイルを作成することをおすすめします。
.htaccessとは、Webサーバーの動作をディレクトリ単位で制御できるファイルのことで、今回用意する目的としては、拡張子「.html」のままでPHPを使うために作成します。
今からサイトを作成するのであれば全てのページを拡張子「.php」で作成すればよいわけですが、途中からPHPを導入する場合、PHPファイルに変更するのも手間ですし、色んな場所に「.html」でリンクを貼っている場合はURLを変更するのも一苦労です。
というわけで、.htaccessファイルは絶対必要というわけではないですが、この記事では.htaccessファイルあり、「.html」のままPHPを使う前提で解説していきたいと思います。
ファイル名はそのまま「.htaccess」で、中身は以下コードです。
ファイルをルートフォルダにアップすればOKです。
<FilesMatch "¥.html$">
AddHandler fcgid-script .html
</FilesMatch>
ただこの.htaccess、利用しているサーバーによってコードを変える必要があるようです。
上記コードで動作しない場合は、お手数ですが各自で調査いただければと思います。
サンプル
例えば以下のようなサイト(トップページ)があるとします。
htmlは以下となります。cssは割愛しますので、お好みでどうぞ。
<body>
<header>
<ul>
<li>リンク1</li>
<li>リンク2</li>
<li>リンク3</li>
<li>リンク4</li>
</ul>
</header>
<div class="wrapper">
<div class="main">
メイン
</div>
<div class="side">
サイド
</div>
</div>
<footer>
フッター
</footer>
</body>
通常、ヘッダー・サイド・フッターはサイトの全ページに渡り共通で、メインの部分のみ内容が変わることがほとんどだと思います。
もし100ページあるサイトで、全てのページのヘッダーの内容を変更しようとすると、100ページ分を変更しなければなりません(!)
それに対し、インクルードで作成をしていれば、元となる1ページさえ変更すれば、100ページ全てを一度に変更することが可能です。
インクルードを使用した書き方
まずはphpファイルを作成します。
ヘッダー部分など、共通部分のみのコードを記載したファイルを作成し、拡張子「.php」で保存します。よく聞く「外部ファイル化」というやつですね。
例としてヘッダー部分で作成し、「header.php」で保存します。
パスの階層は適当なので、お好みでどうぞ。私はトップページの1つ下の階層に、インクルードファイルをまとめるフォルダを作成しています。
<header>
<ul>
<li>リンク1</li>
<li>リンク2</li>
<li>リンク3</li>
<li>リンク4</li>
</ul>
</header>
html内に、インクルードで外部ファイル化したphpファイルのパスを書きます。
<body>
<?php include('header.php'); ?>
<div class="wrapper">
<div class="main">
メイン
</div>
<div class="side">
サイド
</div>
</div>
<footer>
フッター
</footer>
</body>
これによって、WEB上では通常バージョンと同じコードがはきだされ、cssもそのままheaderに対して設定したものが反映します。
<body>
<?php include('header.php'); ?>
<div class="wrapper">
<div class="main">
メイン
</div>
<?php include('side.php'); ?>
</div>
<?php include('footer.php'); ?>
</body>
コードもすっきりしますし、管理も楽になるので書き間違いも減りそうです。
リンクの変更などインクルードしている部分を変更したい場合は、外部ファイルを変更すれば全ページが一度に変更できるわけです。めちゃくちゃ便利ですよね!
以上、PHPのinclude(インクルード)を使ったサイト共通パーツの作り方でした。
今からブログを始める方、CMSを利用するのであれば不要ですが、自分で構築する場合はインクルード利用は必須です!
無駄な作業を減らすためにも、ぜひ活用していきましょう。