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>