メンテナンスを簡単に！共通部分を外部ファイルで管理する(html→phpへ)

急ぎでサイトを作りたくて、ひとまず書きなれているhtmlで書いたんですが、やっぱりphpの方がメンテナンスが簡単なので適宜書き直しました。
繰り返し使うヘッダー、フッター、ナビゲーションはやっぱりphpが便利。
久しぶりにphp触ったけど、やっぱり忘れてるのでメモしておきます。

もとのhtmlファイル
分割したファイル

もとのhtmlファイル

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1"
	<title>title</title>
	<link rel="shortcut icon" href="img/favicon.ico">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
	<nav>
		<div id="nav">
			<a href="index.html"><img src="img/logo.png" alt="logo"></a>
			<div class="drawer">
				<input type="checkbox" id="drawer-check" class="hidden" >
				<label for="drawer-check" class="drawer-open"><span></span></label>
				<div class="drawer-content">
					<ul class="drawer-list">
						<li class="drawer-item"><a href="about.html">About</a></li>
						<li class="drawer-item"><a href="#">Menu</a></li>
					</ul>
				</div>
			</div>
		</div>
	</nav>
	<header>
		<img src="img/top/eye.jpg">
		<div>
			<p>コメント</p>
		</div>
	</header>
	<div id="main">
		<section>
			<h1>見出し</h1>
			<p>本文</p>
		</section>
	</div>
	<footer>
		<div id="footer">
			<ul>
				<li><a href="privacy_policy.html" rel="nofollow">プライバシーポリシー</a></li>
				<li><a href="#" rel="nofollow">Menu</a></li>
			</ul>
			<small>Copyright &copy; 2021 SITETITLE All Rights Reserved.</small>
		</div>
	</footer>
</body>
</html>

分割したファイル

inc/head.php

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1"
	<title>title</title>
	<link rel="shortcut icon" href="img/favicon.ico">
	<link rel="stylesheet" type="text/css" href="css/reset.css">

inc/header.php

<?php
if (empty($featured_image)){
	echo '<header class="img_none">';
} else {
	echo '<header>
	<img src="'.$featured_image.'">
	<div>
		<p>'.$header_comment.'</p>
	</div>';
}
?>
</header>

アイキャッチ画像がある場合とない場合で分けたかったので、empty使いました。

inc/nav.php


<nav>
	<div id="nav">
		<a href="index.php"><img src="img/logo.png" alt="logo"></a>
		<div class="drawer">
			<input type="checkbox" id="drawer-check" class="hidden" >
			<label for="drawer-check" class="drawer-open"><span></span></label>
			<div class="drawer-content">
				<ul class="drawer-list">
					<li class="drawer-item"><a href="about.php">About</a></li>
					<li class="drawer-item"><a href="#">Menu</a></li>
				</ul>
			</div>
		</div>
	</div>
</nav>

SEOはひとまず置いておいて、拡張子もhtmlからphpに書き直してます。

inc/footer.php

<footer>
	<div id="footer">
		<ul>
			<li><a href="privacy_policy.php" rel="nofollow">プライバシーポリシー</a></li>
			<li><a href="#" rel="nofollow">Menu</a></li>
		</ul>
		<small>Copyright &copy; 2021 SITETITLE All Rights Reserved.</small>
	</div>
</footer>

index.php

<?php
include 'inc/head.php';
?>

	<link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body>
<?php
include 'inc/nav.php';
$featured_image = 'img/top/eye.jpg';
$header_comment = 'コメント';
include 'inc/header.php';
?>
	<div id="main">
		<section>
			<h1>タイトル</h1>
			<p>本文</p>
		</section>
	</div>
<?php
include 'inc/footer.php';
?>
</body>
</html>

スッキリ。
</head>はinc/head.phpには含まないことで、個別ページでcss等追加できるようにしておきました。
htmlからphpに拡張子が変わったのでSEO的によろしくないんですが、今回は私個人で管理していて、そんなにアクセスもないサイトなので、特に対策はせずにアップしようかなと思います。