[PHP] 静的HTMLサイトの共通部分をPHPによるパーツ化する方法

  HTML, WEB, WordPress , ,

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
PHP パーツ化 静的サイト HTML

一般的なサイト構成として、ヘッダー・グローバルナビゲーション・サイドメニュー・コンテンツ・フッター部分などから構成されている。
例えばサイトの中でもブログにおいて、コンテンツ部分以外はヘッダー・フッターなどを共通部分とする場合があり、一つ一つ修正することは面倒であり、非効率に感じていました。そこで今回は、WordPressまでとはいかないが初期段階として、静的HTMLサイトの共通部分をパーツ化することで管理し易い方法をご紹介したいと思います。

PHPによる静的サイトの共通部分をパーツ化する方法

WordPressの使用しているテーマのアップデートに伴い、直接カスタマイズする方法から、子テーマを用いてカスタマイズしていた際にPHPファイルによるパーツ化のメンテナンス性・利便性などを強く感じたため、既存の静的HTMLサイトをPHPによるパーツ化する方法について下記にご紹介したいと思います。

まず、お使いのサーバーではPHPを使用できるか確認してから実行してください。

既存の静的HTMLサイトをパーツ化

下記に、今回使用する静的HTMLファイルを示したいと思います。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<header>
	<h1>ヘッダー部分</h1>
</header>
<!--グローバルナビゲーション部分-->
<nav>
	<ul id="menu">
		<li><a href="index.html">TOP</a></li>
		<li><a href="about.html">ABOUT</a></li>
		<li><a href="company.html">COMPANY</a></li>
		<li><a href="contact.html">CONTACT</a></li>
	</ul>
</nav>
<!--グローバルナビゲーション部分-->

<article>
	<h2>コンテンツ部分</h2>
	<p>テキスト・テキスト・テキスト・テキスト・テキスト</p>
</article>
<aside>
	<ul id="side-menu">
		<li><a href="index.html">TOP</a></li>
		<li><a href="about.html">ABOUT</a></li>
		<li><a href="company.html">COMPANY</a></li>
		<li><a href="contact.html">CONTACT</a></li>
	</ul>
</aside>
<footer>フッター部分</footer>
</body>
</html>

まず初めに既存の静的HTMLファイルを分割して、下記のように別ファイルとして保存する。

<header>
	<h1>ヘッダー部分</h1>
</header>
<nav>
	<ul id="menu">
		<li><a href="index.html">TOP</a></li>
		<li><a href="about.html">ABOUT</a></li>
		<li><a href="company.html">COMPANY</a></li>
		<li><a href="contact.html">CONTACT</a></li>
	</ul>
</nav>
<aside>
	<ul id="side-menu">
		<li><a href="index.html">TOP</a></li>
		<li><a href="about.html">ABOUT</a></li>
		<li><a href="company.html">COMPANY</a></li>
		<li><a href="contact.html">CONTACT</a></li>
	</ul>
</aside>
<footer>フッター部分</footer>

静的HTMLファイルのパーツの読み込みの種類

下記にファイルを読み込む際の記述例を示したいと思います。

<?php include ('footer.html'); ?>

ファイルを読み込み、失敗した場合は警告を発するが処理を続行する。

<?php include_once ('footer.html'); ?>

ファイルを一度だけ読み込み、失敗した場合は警告を発するが処理を続行する。

<?php require ('footer.html'); ?>

ファイルを読み込み、失敗した場合はエラーが起きて処理を停止する。

<?php require_once ('footer.html'); ?>

ファイルを一度だけ読み込み、失敗した場合はエラーが起きて処理を停止する。

共通部分のリンクや画像の参照

下記にファイルの参照の際の記述例を示したいと思います。

<?php $Path = "../"; include ('../footer.html'); ?>

1階層下の場合は、上記のように記述して、footer.html内のリンクや画像のパスの部分となる$Pathを持ったままfooter.htmlへ移動する。

<!--記述部分--><img src="<?php print $Path; ?>test.png" width="" height="" alt="">
<!--実行部分--><img src="../test.png" width="" height="" alt="">

上記の記述部分の記述を行うと、変換されて実行部分となる。なので$Pathを用いて階層を一括で管理することができる。

静的HTMLファイルのパーツの参照の種類

静的HTMLファイルのパーツを参照する際に、ファイルによっては参照したファイルの先で参照が行われる場合がある。その時多くの問題があり、しっかりと理解した上で記述しないとエラーが出る可能性がある。

「$_SERVER[‘DOCUMENT_ROOT’]」による参照

<?php include ($_SERVER['DOCUMENT_ROOT'] .'footer.html'); ?>

ドキュメントルート(URLでいうとドメイン直下)でのパスの参照を行う。$_SERVER[‘DOCUMENT_ROOT’]を使うことによって、記述は相対パスであるが絶対パスを用いてドキュメントルートからfooter.htmlを読み込みが行われます。
言い換えると、上記命令が記述されているドメイン直下からの絶対パスの参照を行う。

「dirname(__FILE__)」による参照

<?php include (dirname(__FILE__).'footer.html'); ?>

ファイルが置かれたディレクトリでのパスの参照を行う。dirname(__FILE__)を使うことによって、相対パスを用いてディレクトリルートからfooter.htmlを読み込みが行われます。
言い換えると、上記命令が記述されているファイルの場所からの相対パスの参照を行う。

静的HTMLファイルをPHPファイルに変換

静的HTMLファイルの共通部分をパーツ化して、PHPファイルとして記述したものを下記に示したいと思います。これによりパーツ化したファイルを読み込むことでサイトを構成して、共通部分の修正があれば一括で修正可能となる。今回は静的HTMLでの記述と同様の参照方法である「dirname(__FILE__)」を用いて記述しました。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<?php include (dirname(__FILE__).'header.html'); ?>

<!--グローバルナビゲーション部分-->
<?php include (dirname(__FILE__).'gnav.html'); ?>
<!--グローバルナビゲーション部分-->

<article>
	<h2>コンテンツ部分</h2>
	<p>テキスト・テキスト・テキスト・テキスト・テキスト</p>
</article>

<?php include (dirname(__FILE__).'side-menu.html'); ?>

<?php include (dirname(__FILE__).'footer.html'); ?>
</body>
</html>

参考サイト

参考にさせていただいたサイトを下記に示したいと思います。

SNSでもご購読できます。

コメントを残す

*