EnjomonWeb

WEBページの画像
2024/09/07

サイト全体の更新が楽ちんに!PHPのinclude(インクルード)を使ったWEBサイト共通パーツの作り方

ヘッダーやフッターなど、サイトを通して共通した部分の更新を、各ページで行っていませんか?

PHPのinclude(インクルード)を使えば、1つのページを変更することで全ページの変更が可能となります。

CMS全盛の時代にコードを書いてサイトを作ることも少ないとは思いますが、少ない需要があると思って記事にしたいと思います。

大前提として、PHPが使用できるサーバーでなければ今から紹介する方法は利用できません。使用可否については各自で確認してから使用くださいね。

.htaccessファイルの準備

まずは.htaccessファイルを作成することをおすすめします。

.htaccessとは、Webサーバーの動作をディレクトリ単位で制御できるファイルのことで、今回用意する目的としては、拡張子「.html」のままでPHPを使うために作成します。

今からサイトを作成するのであれば全てのページを拡張子「.php」で作成すればよいわけですが、途中からPHPを導入する場合、PHPファイルに変更するのも手間ですし、色んな場所に「.html」でリンクを貼っている場合はURLを変更するのも一苦労です。

というわけで、.htaccessファイルは絶対必要というわけではないですが、この記事では.htaccessファイルあり、「.html」のままPHPを使う前提で解説していきたいと思います。

.htaccessファイルの作成方法

ファイル名はそのまま「.htaccess」で、中身は以下コードです。

ファイルをルートフォルダにアップすればOKです。


<FilesMatch "¥.html$">
AddHandler fcgid-script .html
</FilesMatch>

ただこの.htaccess、利用しているサーバーによってコードを変える必要があるようです。

上記コードで動作しない場合は、お手数ですが各自で調査いただければと思います。

サンプル

例えば以下のようなサイト(トップページ)があるとします。

html(通常バージョン)

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ファイルを作成します。

ヘッダー部分など、共通部分のみのコードを記載したファイルを作成し、拡張子「.php」で保存します。よく聞く「外部ファイル化」というやつですね。

例としてヘッダー部分で作成し、「header.php」で保存します。

パスの階層は適当なので、お好みでどうぞ。私はトップページの1つ下の階層に、インクルードファイルをまとめるフォルダを作成しています。


<header>
<ul>
<li>リンク1</li>
<li>リンク2</li>
<li>リンク3</li>
<li>リンク4</li>
</ul>
</header>

html(インクルードを使用したバージョン)

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に対して設定したものが反映します。

html(共通部分全てをインクルードしたバージョン)

<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を利用するのであれば不要ですが、自分で構築する場合はインクルード利用は必須です!

無駄な作業を減らすためにも、ぜひ活用していきましょう。

About

EnjomonWebは、「えんじょもん」である元転勤族の管理人が石川県金沢市から発信する、WEB制作情報をメインとした情報発信サイトです。

コーディング習得過程で検索してもすぐに解決しなかったことや、初心者には分かりづらい内容を分かりやすく説明することができるサイトを目指しています。

※「えんじょもん」とは金沢弁で「遠方の人、県外出身の人」という意味の方言。