メモ:階層問わず使用出来る共通ヘッダー&フッターをPHPで作る

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>
0