MENU
WEB制作の備忘録 | ぶろぐみ
お問い合わせ
　
  1. ホーム
  2. WEB制作
  3. 共通箇所が多いHTMLサイトを量産するならPHPでパーツ化しよう

共通箇所が多いHTMLサイトを量産するならPHPでパーツ化しよう

PR
WEB制作

ほぼ同じようなデザインのLPを複数作成する案件があったので、HTMLではなくPHPでコーディングしてみました。

PHPでは別ファイルを読み込めるため、レイアウトの共通化がしやすいのが特徴です。

目次

要件

  • notice（告知ページ）
  • before（事前予約ページ）
  • general（通常予約ページ）

ある日付になると、全てのページはgeneralへリダイレクトさせます。

各ページはサブディレクトリ運用。（例：https://example.com/sub/notice）

HTMLで作成した場合

  • notice/index.html
  • before/index.html
  • general/index.html

HTMLの場合、共通部分が１箇所でも変更になると、全てのページファイルを修正しなくてはいけません。

「複数ページでindex.htmlがあり、共通部分が多い」「一部だけ違う」という状況なら、共通部分をPHPにまとめて、差分だけを出し分けるのが最も効率的です。

PHPで作成した場合

  • common/layout.php
  • notice/index.php
  • before/index.php
  • general/index.php

layout.phpに全てのコードを書き、各index.phpから読み込むイメージです。

各index.phpからlayout.phpを読み込ませる

各index.phpには、「自分のページ名」を定義し、layout.phpを読み込ませるようにします。

<?php
$page = 'notice';
include '../common/layout.php';
<?php
$page = 'before';
include '../common/layout.php';
<?php
$page = 'general';
include '../common/layout.php';

layout.phpに共通のレイアウトを記述する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>LP</title>
</head>
<body class="<?php echo $page; ?>">

<?php if ($page === 'notice'): ?>
  <img src="../assets/images/notice.png" alt="">
<?php endif; ?>

<?php if ($page === 'before'): ?>
  <img src="/assets/images/before.png" alt="">
<?php endif; ?>

<?php if ($page === 'general'): ?>
  <img src="/assets/images/general.png" alt="">
<?php endif; ?>

</body>
</html>

共通のレイアウトを1つで管理し、差分はifなどの条件分岐で切り替えることで、何か変更点があってもlayout.phpを編集するだけで完結します。

またbody要素にページクラスを追加しておくと、ページ毎にスタイルを適用することが容易になります。

リダイレクトさせる

例として、2025年12月15日12時に全てのページをgeneralページへリダイレクトさせてみます。

PHPでリダイレクト

リダイレクト処理は、ファイルの先頭に記述。

<?php
// リダイレクト
date_default_timezone_set('Asia/Tokyo');

if (
    $page !== 'general'
    && empty($_GET)
    && time() >= strtotime('2025-12-15 12:00:00')
) {
    header('Location: ../general/');
    exit;
}
?>

<!DOCTYPE html>
<html lang="ja">

有効となる条件は以下の３つ。

  • generalページ以外の時
  • URLのクエリパラメータがない時
  • 指定の時間（2025年12月15日12時）を超えた時

empty($_GET)（URLのクエリパラメータがない時）は、検証や動作確認をしやすくするために含めていますが、本番では必要ないので削除してもOKです。

JavaScriptでリダイレクト

PHPを利用しない場合は、JavaScriptで代用。

// リダイレクト
(function() {
  const now = new Date().getTime();

  // 12月15日 12:00 JST
  const redirectTime = new Date("2025-12-15T12:00:00+09:00").getTime();

  if (now >= redirectTime) {
    // 12/15 12:00以降は general にリダイレクト
    window.location.replace("../general");
  }
})();

リダイレクトが必要なページでredirect.jsを読み込ませます。

難点として、JavaScript無効環境では動作しません。

リダイレクト先のパスに注意

LPでは、サブディレクトリ（https://example.com/sub/）にファイルを配置することも多いため、リダイレクト先のパスの指定は注意が必要です。

// 🙆相対パスの場合
window.location.replace("../general");
// → https://example.com/sub/general

// 🙆サブディレクトリを含めたルート相対パス
window.location.replace("/sub/general");
// → https://example.com/sub/general

// ❌ルート相対パス
window.location.replace("/general");
// → https://example.com/general

単純にルート相対パスでリダイレクトさせると、サブディレクトリは無視されます。

ローカル環境では、実際にサブディレクトリに配置して検証することをおすすめします。

補足：ドキュメントルートにはindex.phpを置く

ドキュメントルートには、最低限空のindex.html（またはindex.php）を配置しておきます。

  • index.php（ここ）
  • common
  • notice
  • before
  • general

これを配置しないと、ルート（https://example.com）にアクセスした際、サーバー設定によってはディレクトリ内のファイル一覧が表示されてしまうためです。

「何のファイルか分からず誤って削除してしまう」ことを防ぐために、403（Forbidden）を返しておいても良いかもしれません。

<?php
// ルート直アクセス禁止
http_response_code(403);
exit;

共通箇所が多いならPHP

同じようなレイアウトのHTMLを複数作成する必要があるなら、PHPは最有力候補です。

PHPはほとんどの有料レンタルサーバー（国内）で対応していますし、データベースを必要としないコーディングなら学習コストも低めです。

ボリューム次第ですが、個人的には3ページ以上同じレイアウトが続くならPHPを検討しても良いと思っています。

あわせて読みたい
PHPの基礎知識まとめ いつもぼんやりとPHPを扱ってきたのですが、今回1週間でPHPの基礎が学べる本を読む機会があったので、初めて基礎から勉強しました。 書籍はKindle Unlimitedで読み放題…

カスタマイズに困ったらお気軽にご相談を！

  • 「ちょっとしたCSSの調整だけお願いしたい」
  • 「不具合を直してほしい」

料金は3,000円〜、お支払いは銀行振込・Amazonギフトカードなど柔軟に対応してます🤔

今すぐ相談する
WEB制作
PHP
役に立ったら他の方にシェア

お気軽にコメントどうぞ

コメントする

目次