HTML/CSS

ヘッダーやフッターなどの共通部分をPHPでパーツ管理する方法

 

HTMLでサイトを構築していると、わりとページ数の多い案件もありますよね。

共通部分に修正が入ったら、全てのファイルを修正する必要があり、これがめちゃくちゃ大変です。

 

そんな時に便利なのがPHPを使ってパーツ管理する方法です。

手順としては以下の通りで、簡単に実装できるので試してみてください。

  1. PHPファイルに書き換える
  2. パーツを切り出す
  3. includeで読み込む

 

PHPファイルに書き換える

まずは、PHPを使うわけなので、htmlの拡張子をphpに変更します。

テキストエディタから拡張子を書き換えるだけでOKなので、簡単だと思います。

 

index.html → index.php

 

ただ、PHPファイルをブラウザで確認するにはMAMPなどのローカルサーバーが必要になってくるので、この辺りは調べておきましょう。

誰でもできる!MAMPのインストール方法【初心者向け】

 

共通部分(ヘッダーやフッター)を別のファイルにうつす

例えば、下記のようにヘッダー部分だけをheader.phpとして切り出します。

<!-- header -->
<header id="header">
<div class="inner">

<h1 class="header-logo"><a href=""><img src="./img/header-logo.png" alt="ロゴ"></a></h1>

<!-- header-nav -->
<nav class="header-nav">
	<ul>
		<li><a href="#">MENU1</a></li>
		<li><a href="#">MENU2</a></li>
		<li><a href="#">MENU3</a></li>
		<li><a href="#">MENU4</a></li>
		<li><a href="#">MENU5</a></li>
	</ul>
</nav><!-- /header-nav -->

<!-- header-drawer -->
<div class="header-drawer">
	<div class="drawer">
		<div class="drawer-icon js-drawer for-drawer" data-target="for-drawer">
			<div class="drawer-bars">
					<span class="drawer-bar"></span>
					<span class="drawer-bar"></span>
					<span class="drawer-bar"></span>
			</div>
		</div>
		<div class="drawer-close js-drawer for-drawer"></div>
		<div class="drawer-content for-drawer">コンテンツ部分</div>
	</div>
</div><!-- /header-drawer -->

</div><!-- /inner -->
</header><!-- /header -->

 

このパーツをルートディレクトリ直下に設置して準備完了。

 

共通ファイルを読み込む

PHPのinclude関数を使って、外部ファイルとして読み込みます。

埋め込みたい箇所に以下のコードを記述するだけでオッケーです。

<?php include( $_SERVER['DOCUMENT_ROOT'] . '/header.php'); ?>

 

DOCUMENT _ROOTとは、ルート直下のパスを返してくれる関数で、相対パスや絶対パスを意識する必要がないため便利です。

 

なぜかというと、includeのみで下層ページから読み込もうとすると、階層ごとにパスの記述を変える必要があります。

以下のような感じですね。

<?php include('../header.php'); ?> 

 

うーん、これでもいいですが、

結局は「階層によって記述を変更する必要がある」のなら共通化するメリットはありませんよね。

「共通化 = 一つのファイルを修正すればOK」なので。

 

 

なお、ここではルートディレクトリに設置しましたが、分かりやすいように「common」などのフォルダを作ってパーツファイルをまとめてしまうのもありです。

その場合は、こうなりますね。

<?php include( $_SERVER['DOCUMENT_ROOT'] . '/common/header.php'); ?>

 

 

補足として、

PHPでHTMLサイトを作ることには何ら問題はありません。

例えば、LPでも問い合わせフォームを実装するのにPHPを使うので、、もしかしたら初めからPHPを使った方が便利なのかも?

 

今回はヘッダーを例に上げましたが、フッターやサイドバー、そのほか共通化出来そうなパーツに色々応用できるので、是非使ってみてください。