
Webサイトで複数のページを作る時、ヘッダー/フッターなどのパーツは共通化したくなりますよね。勉強始めたての頃はhtmlに一箇所変更が発生したら全ページを手直ししていましたが共通化を知ってからは管理が楽になりました。
いくつか共通化するやり方はありますが今回はPHPを使って複数ページでパーツを共通化する方法をご紹介します。
ディレクトリ構成と共通パーツ化
あくまで私が管理しやすいと感じた構成ですので皆さんの好みが見つかるまでの参考にしてください。
rootディレクトリ
├── index.php
├── assets/
│ ├── images/
│ ├── css/
│ └── js/
└── includes/
├── config.php
├── header.php
├── footer.php
└── navi.php
- config.php・・・全ページ共通の情報格納
- header.php・・・ヘッダーおよびメタ情報
- footer.php・・・フッター情報
- navi.php・・・ナビゲーション情報
PHPでのインクルード方法:絶対パス推奨
複数ページで同じコードを使い回す場合、ページを制作していき階層が深くなっていった際、相対パスよりも 絶対パスを使うほうが記述の一貫性が保たれて便利です。
<?php include(dirname(__FILE__) . '/includes/header.php'); ?>
dirname(__FILE__)
を使って、現在のファイルのディレクトリ(ルート)を取得し、includes
フォルダを 絶対的に指定する方法です。
また、ルートディレクトリは使い回すので変数に入れてconfig.phpで管理すると変更の際に手間が減ります。
$root = dirname(__FILE__) ;
<?php include($root . '/includes/header.php'); ?>
include と require の使い分け
- include: 読み込みエラーが起きても、後続の処理を続ける(Warningで止まらない)。
- require: 読み込み失敗時に致命的エラーでスクリプトを中断する。
そのため、軽微なエラーが許され、後続処理を続けたい場合は include
、エラーが致命的と見なせる場合は require
を使うのが適切です
サンプルコード
config.php
全ページの変数管理に使うファイル
<?php
$root = dirname(__FILE__) ;//ルートディレクトリ
$title = サイト名;
$description = サイトの説明文;
header.php
headに入る内容からヘッダー要素までのまとめです。
一番上で全ページ共通のinclude.phpを読み込むことで変数が使えるようになります。
//全体共通パーツ読み込み
<?php include($root . '/includes/include.php'); ?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $title;?></title>
<meta name="description" content="<?php echo $description;?>">
<!-- SNS シェア用 OGP -->
<meta property="og:title" content="<?php echo $title;?>">
<meta property="og:description" content="<?php echo $description;?>">
<meta property="og:image" content="/assets/images/ogp.jpg">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<!-- Twitterカード -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@youraccount">
<!-- ファビコン -->
<link rel="icon" href="/assets/images/favicon.ico">
<!-- CSS 読み込み -->
<link rel="stylesheet" href="/assets/css/style.css">
</head>
<body>
<header>
<div class="site-header">
<div class="logo">
<a href="/"><img src="/assets/images/logo.png" alt="サイト名"></a>
</div>
<?php include($root . '/includes/include.php'); ?>
</div>
</header>
navi.php
ナビゲーション要素のまとめです。
<nav class="global-nav">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about/">会社概要</a></li>
<li><a href="/service/">サービス</a></li>
<li><a href="/news/">ニュース</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
</ul>
</nav>
footer.php
footerに入るナビゲーションからコピーライト、javascriptの要素をまとめています。
<footer>
<div class="site-footer">
<nav class="footer-nav">
<ul>
<li><a href="/privacy/">プライバシーポリシー</a></li>
<li><a href="/terms/">利用規約</a></li>
<li><a href="/contact/">お問い合わせ</a></li>
<li><a href="/sitemap/">サイトマップ</a></li>
</ul>
</nav>
<p class="copyright">
© <?php echo date('Y'); ?> サイト名 All Rights Reserved.
</p>
</div>
</footer>
<!-- JS 読み込み -->
<script src="/assets/js/main.js"></script>
</body>
</html>
まとめ
項目 | 解説 |
---|---|
ディレクトリ構成 | includes フォルダに共通パーツを集約 |
絶対パスでの読み込み | dirname(__FILE__) を使って同一記述がおすすめ |
include / require | エラー時の挙動が異なる(継続 vs 中断) |
include_once / require_once | ファイル重複読み込み防止に有効 |
動的パス取得 | 環境差によるパスずれを回避 |
PHPの include
はとても基本的な構文ですが、「コードを分割して整理する」第一歩です。
共通パーツを1か所にまとめることで、修正作業が大幅に楽になり、大規模なサイトを作る時ほど恩恵を感じると思います。
最初は小さなサイトでも実際に使ってみて、「メンテナンス性の向上」を体験してみてください。