2012.09.17
ヘッダーやフッターを全ページ共通にする PHP
PHP ・ サンプルありウェブサイトでは通常、ヘッダーやフッター、メニューなどは全部のページで同じだと思います。
例えばヘッダーに変更があった場合に、すべてのHTMLファイルを変更しなければならないのは、とても手間がかかります。
今回はPHPを使った便利な方法を紹介します。
JavaScriptを使った方法はこちら
この方法だと、ヘッダーなどを外部ファイルとして読み込み、その外部ファイルを変更すればすべてのページに変更を反映させることができます。
各ページで共通な部分に使うことができます。
簡単な例で説明します。
HTMLのソース
<div class="header">PHPを使ってません。
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="content">内容が入る…</div>
CSSのソース
ul {
padding:0;
}
li {
float:left;
list-style:none;
display:block;
padding:10px;
width:80px;
margin:10px;
border:#756F61 2px solid;
font-weight:bold;
}
.header {
background:#FCEB9D;
width:496px;
height:auto;
margin:0 auto;
padding:40px 0 0;
text-align:center;
}
.menu {
background:#F7AABB;
width:100%;
height:55px;
margin:0 auto;
}
.content {
background:#AADAF2;
width:496px;
height:250px;
margin:0 auto;
text-align:center;
padding-top:100px;
}
上記のソースを使って…
テキストエディタなどを使い新しいファイルに下記のように書き込みます。
PHPのソース
<div class="header">PHPを使ってます。 <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Product</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div>
これを
今回はphp002.phpというファイル名で保存しました。
そしてHTMLファイルは中身をそのままの状態で拡張子を.htmlから.phpに変更して保存します。
出来上がったPHPファイルを下記のように書き換えます。
PHPのソース
<?php include 'php002.php'; ?> <div class="content">内容が入る…</div>
PHPのinclude文を使ってphp002.phpという外部ファイルを読み込んで表示するようにしています。
PHPのソースはブラウザに表示されないのであんまり意味はないかと思いますが…
最初のサンプルのHTMLファイルのソースと全く同じように表示されているかと思います。
