WordPressなどのCMSを使わない静的サイトを作る時、各ページのヘッダーやフッターのHTMLをどう管理するかは、けっこう悩みのタネ。
適切な設計を考えておかないと、それぞれのHTMLファイルにヘッダーとフッターのソースコードを独自に組み込むという悪手に陥ってしまう。そうなると、ヘッダーのソースコードをちょっと書き換えるにも、テキストエディタの一括変換などが要求されてとても大変。おまけにメンテナンス性も悪く、ミスする確率も増えて、いいことがなにもない。
ここで、解決策を1つ。 PHPを使って共通したファイルをすべてのページにインクルードさせる方法をメモ。複数の階層に対応した記述なので、階層が深くなった時に画像のリンク切れを起こす心配もない。
参考になったサイト
更新するのが面倒！サイトの共通部分を簡単に作る様々な方法｜WEB Drawer｜web制作に関するネタの引き出しサイト
HTMLファイルの記述（/index.php）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<?php $Path = "./"; include ('./inc/header.php'); ?>
</body>
</html>1つ下の階層の記述（/test/index.php）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<?php $Path = "../"; include ('../inc/header.php'); ?>
</body>
</html>2つ下の階層の記述（/test/sub/index.php）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>TEST</title>
</head>
<body>
<?php $Path = "../../"; include ('../../inc/header.php'); ?>
</body>
</html>全ページに読み込むファイル（inc/header.php）
<header>
<img src="<?php print $Path; ?>header.png" alt="">
</header>