メモ:PHPを使って階層を気にせずにヘッダー等の要素を組み込む

Webサイトを作る時に気をつけなければならない項目のひとつに、パス(階層)の問題があります。パスとは、Webサイト内で画像を読み込んだりリンクを設置するときの「書き方」のことです。

これをとても簡単に解決する方法がわかったので、自分用にメモしておきます。

例えば、上記のようなディレクトリのWebサイトがある場合、トップページのindex.php内部ページのitem/index.php両方で共有パーツ(header.phpとfooter.php)を読み込むには、header.phpやfooter.php内に記述するパスに気をつけなければならない。階層が異なるため、ページによってはリンク切れを起こしてしまう可能性があるためです。

これを解決するために、PHPを使った記述はけっこう便利。以下、書き方の例を記述してみます。

(よって、HTMLファイルの拡張子は、.htmlではなく.phpを使います。.htmlで実現する方法もありますが、サーバー設定が必要なため、この記事では割愛)

ヘッダーを読み込む(index.php)

$Pathという変数をそれぞれのページで最初に設定しておくのがキモ。トップページの場合は$Pathの値が「./」で、下の階層のページの場合は「../」という値になります。また、フッターを読み込みたい場合は、ファイル名を「footer.php」と書き換えます。

<?php $Path = "./"; include ('_inc/header.php'); ?>
ここにコンテンツが入る
<?php include ('_inc/footer.php'); ?>
<?php $Path = "../"; include ('../_inc/header.php'); ?>
ここにコンテンツが入る
<?php include ('../_inc/footer.php'); ?>

ヘッダーやフッター内の記述例(header.php)

ヘッダーやフッターの読み込み元(例:index.php)で定義しておいた$Pathという変数を活かした記述をします。
例えば、ヘッダー内にリンクを設定した画像を設定したい時は、下記のような記述になります。

このように記述しておけば、どの階層でもリンク切れを起こさずに使うことが出来るでしょう。

<header>
<a href="<?php echo $Path; ?>"><img src="<?php echo $Path; ?>images/logo.png" alt="ロゴ"></a></li>
</header>

参考サイト

更新するのが面倒!サイトの共通部分を簡単に作る様々な方法|WEB Drawer|web制作に関するネタの引き出しサイト

0