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を使ってないサンプル。

phpなし

上記のソースを使って…

テキストエディタなどを使い新しいファイルに下記のように書き込みます。

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>

これを拡張子が.phpのPHPのファイルで名前を付けて保存します。
今回はphp002.phpというファイル名で保存しました。

そしてHTMLファイルは中身をそのままの状態で拡張子を.htmlから.phpに変更して保存します。
出来上がったPHPファイルを下記のように書き換えます。

PHPのソース

<?php include 'php002.php'; ?>
<div class="content">内容が入る…</div>

PHPのinclude文を使ってphp002.phpという外部ファイルを読み込んで表示するようにしています。

PHPのソースはブラウザに表示されないのであんまり意味はないかと思いますが…

phpあり

最初のサンプルのHTMLファイルのソースと全く同じように表示されているかと思います。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP