共通部分を PHP で管理（外部ファイル化・テンプレート化）

サイト内で共通している部分（ヘッダーやフッターなど）を CMS のように別々に管理することで、変更があった場合などその部分のみ変更することで全ページに反映させることができるので便利です。

以下はサイトの共通部分を PHP で管理する方法（外部ファイル化やナビゲーションメニュー、異なる階層のページに対応する方法、現在のページのメニューにクラスを追加する方法、簡易的なテンプレートの作成方法など）の覚書です。

更新日：2022年03月11日

作成日：2021年6月1日

全ページで共通する部分を外部ファイル化

ヘッダーやナビゲーション、フッターなど全ページで共通する部分を外部ファイル化して各ページで読み込むようにすることで、共通ファイルを変更すれば、全てのページに変更を反映させることができます。

外部ファイル化はパーツ化やコンポーネント化などとも言いますが、共通する部分を別のファイルにして PHP の include や require を使って読み込むようにします。

最初の例は同じ階層にある4つのページ（about.php、contact.php、index.php、news.php）で構成されています。

.
├── about.php
├── contact.php
├── css
│   └── style.css
├── favicon.ico
├── images
│   ├── logo.svg
│   └── sample_01.jpg
├── index.php  //トップページ
├── js
│   └── main.js
└── news.php

以下はヘッダーやフッターなどの全てのページで共通する部分を外部ファイル化する一例です。どの部分を外部ファイル化するかは、ファイル構造やそのサイトの内容により異なります。

また、この例では共通部分として切り出した外部ファイルは inc というフォルダを作成して保存します。

index.php（外部ファイル化する前のファイル）

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Site Top</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="説明（トップページ）">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<div class="wrapper">
  <header>
    <div class="container"> 
    <a>
      <img class="logo" src="images/logo.svg" width="141" height="36" alt="logo">
      <h1>My Site</h1>
      </a> 
    </div>
    <nav class="global-nav">
      <div class="container">
        <ul>
          <li><a href="index.php">Home</a></li>
          <li><a href="news.php">News</a></li>
          <li><a href="about.php">About</a></li>
          <li><a href="contact.php">Contact</a></li>
        </ul>
      </div>
    </nav>
  </header>
  <div class="container">
    <main>
      <section>
        <h2>Top page</h2>
        <p><img src="images/sample_01.jpg" width="600" height="400" alt="">Lorem ipsum dolor sit amet,...</p>
      </section>
      <section>
        <h3>Heading</h3>
        <p>Repellat nihil unde commodi soluta dignissimos dicta...</p>
      </section>
    </main>
    <aside>
      <section>
        <h4>Side Bar</h4>
        <p>Recusandae nostrum cupiditate.</p>
      </section>
    </aside>
  </div>
</div>
<footer>
  <div class="container">
    <p><small>&copy;Copyright</small></p>
  </div>
</footer>
<script src="js/main.js"></script>
</body>
</html>


外部ファイル	説明
head.php	1〜9行目。head 要素の閉じタグ </head> はそれぞれのページで追加の要素を記述できるように読み込み元に残しています
header.php	13〜30行目。h1 要素やロゴ画像、グローバルナビゲーション
side.php	42〜47行目。サイドバー部分
footer.php	50〜55行目。フッターと全ページで共通の JavaScript

この例では head.php と header.php に分割していますが、例えば、1〜31行目までをまとめて header.php として外部ファイル化して、その中で特定のページの処理を分岐するなども考えられます。

head.php

head.php では、title 要素と meta 要素（name="description"）はそれぞれのページで値が異なるので、PHP の変数を使って出力するようにしています。

必要に応じて meta 要素などを更に別途外部ファイル化することもできます。

head.php

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php echo $title; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="<?php echo $description; ?>">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico">

header.php

header.php ではサイトのロゴとタイトルへのリンクをホーム（index.php）の場合は a 要素の href 属性を指定せず、その他のページではホームへのリンクとするため、$is_home というトップページの判定用の変数が設定（定義）されているかどうかで出力を変えています。

header.php

<header>
  <div class="container"> 
    <a <?php echo isset($is_home) ? '': 'href="index.php"' ?>> 
      <img class="logo" src="images/logo.svg" width="141" height="36" alt="logo">
      <h1>My Site</h1>
    </a> 
  </div>
  <nav class="global-nav">
    <div class="container">
      <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="news.php">News</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="contact.php">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>

side.php

side.php

<aside>
  <section>
    <h4>Side Bar</h4>
    <p>Recusandae nostrum cupiditate.</p>
  </section>
</aside>

footer.php

この例では、共通で使用する JavaScript を含めています。追加の JavaScript があればそれぞれのページで読み込みます。

footer.php

<footer>
  <div class="container">
    <p><small>&copy;Copyright</small></p>
  </div>
</footer>
<script src="js/main.js"></script>

以下はこの時点でのフォルダ構成です。

.
├── about.php
├── contact.php
├── css
│   └── style.css
├── favicon.ico
├── images
│   ├── logo.svg
│   ├── sample_01.jpg
│   └── sample_02.jpg
├── inc  //外部ファイルのディレクトリ
│   ├── footer.php
│   ├── head.php
│   ├── header.php
│   └── side.php
├── index.php //トップページ
├── js
│   └── main.js
└── news.php

インクルード

PHP の include や require を使って footer.php や head.php などの外部ファイルを読み込みます。

include と require の違いは、指定したファイルが読み込めなかった場合に処理を継続するかどうかで、ファイルが読み込めなくても処理を継続するには include を使い、エラーで処理を停止する場合は、requireを使います。（関連：外部ファイルの利用）

この例では include を使って、何らかの理由で外部ファイルが読み込めない場合でもそれ以降の部分は表示されるようにします。

指定したファイルが読み込めない場合は、include でもエラーは表示され、ファイルのパスなどが表示されてしまうので必要に応じて本番環境ではエラーメッセージを非表示にすると良いかも知れません。（関連：エラーメッセージの制御）

以下はトップページの index.php で inc フォルダに保存した外部ファイルを読み込む例です。

include や require に指定するファイルのパスは絶対パスまたはカレントディレクトリからの相対パスで指定できます。この例では相対パスで指定しています。

include や require は厳密には関数ではなく特別な言語構造であるため、引数を囲む括弧 () は不要です。

index.php

<?php
$title = 'My Site Top';
$description = '説明（トップページ）';
$is_home = true; //トップページの判定用の変数
include 'inc/head.php'; // head.php の読み込み
?>
<!-- 特定のページでのみ読み込むスタイルシートなどがあればここに追加 -->
</head>
<body>
<div class="wrapper">
  <?php include 'inc/header.php'; ?> <!-- header.php の読み込み -->
  <div class="container">
    <main>
      <section>
        <h2>Top page</h2>
        <p> <img src="images/sample_01.jpg" width="600" height="400" alt=""> Lorem ipsum dolor sit amet,... </p>
      </section>
      <section>
        <h3>Heading</h3>
        <p>Repellat nihil unde commodi soluta dignissimos dicta...</p>
      </section>
    </main>
    <?php include 'inc/side.php'; ?> <!-- side.php の読み込み -->
  </div>
</div>
<?php include 'inc/footer.php'; ?> <!-- footer.php の読み込み -->
</body>
</html>

上記の2〜3行目は、読み込む head.php で使用する変数を設定しています。

head.php

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- 読み込み元ファイル（index.php）の2行目の $title -->
<title><?php echo $title; ?></title> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 読み込み元ファイル（index.php）の3行目の $description -->
<meta name="description" content="<?php echo $description; ?>">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico">

index.php の4行目では、このページはトップページなので読み込む header.php で使用する変数 $is_home に true を設定しています。

header.php

<header>
  <div class="container"> 
    <!-- $is_home が定義されていれば何も出力せず、定義されていなければ href 属性を出力 -->
    <a <?php echo isset($is_home) ? '': 'href="index.php"' ?>> 
      <img class="logo" src="images/logo.svg" width="141" height="36" alt="logo">
      <h1>My Site</h1>
    </a> 
  </div>
  ・・・中略・・
</header>

同様に、about.php や news.php、contact.php でも外部ファイルをインクルードするように変更します。

以下は news.php の例です。

about.php や news.php、contact.php の場合は、$is_home という変数を定義していないので、header.php で読み込んだロゴとタイトルへのリンクの a 要素には href 属性が設定されます。

news.php

<?php
$title = 'News | My Site';
$description = '説明（News ページ）';
include 'inc/head.php'; // head.php の読み込み
?>  
</head>
<body>
<div class="wrapper">
  <?php include 'inc/header.php'; ?> <!-- header.php の読み込み -->
  <div class="container">
    <main>
      <section>
        <h2>News</h2>
        <p><img src="images/sample_02.jpg" width="600" height="400" alt="">Lorem ipsum dolor sit amet,...</p>
      </section>
      <section>
        <h3>Heading</h3>
        <p>Repellat nihil unde commodi soluta dignissimos dicta...</p>
      </section>
    </main>
    <?php include 'inc/side.php'; ?> <!-- side.php の読み込み -->
  </div>
</div>
<?php include 'inc/footer.php'; ?> <!-- footer.php の読み込み -->
</body>
</html>

階層が異なる場合

前述の例の場合、全てのページのファイルが同じ階層（ルートの直下）にありましたが、異なるディレクトリにページがある（ルートディレクトリ以外にある）場合は、インクルードするためのパスやリンクの値（ナビゲーションのリンクや CSS や JavaScript、画像などのパス）を変更する必要があります。

前述の例と同じ4ページの構成ですが、フォルダ構成とファイル名を以下のように変更します。

前述の About ページ（about.php）や Contact ページ（contact.php）、News ページ（news.php）はそれぞれフォルダを作成して配置し、ファイル名を index.php に変更してあります。

.
├── about
│   └── index.php
├── contact
│   └── index.php
├── css
│   └── style.css
├── favicon.ico
├── images
│   ├── logo.svg
│   ├── sample_01.jpg
│   └── sample_02.jpg
├── inc
│   ├── footer.php
│   ├── head.php
│   ├── header.php
│   └── side.php
├── index.php //トップページ
├── js
│   └── main.js
└── news
     └── index.php

インクルードするためのパスやリンクを変更します。

トップページの index.php

トップページの index.php は位置も変わっていないので外部ファイルのインクルードはこのままでも大丈夫ですが、他のファイルに合わせて以下のように変更します（ルートディレクトリのファイルの選択肢）。

この例ではインクルードなどは相対パスを使用しています。フォルダ構成を変更したことでトップページ以外のページでのインクルードのパスが変わるため、 $path という変数を作成して調整します。

トップページの場合は、元のままでもインクルードの部分は大丈夫ですが、リンクの調整などもあるため、$path にカレントディレクトリを表す ./ を設定します。

トップページ index.php

<?php
$title = 'My Site Top';
$description = '説明（トップページ）';
$is_home = true;  //ホーム（トップページ）の判定用の変数を定義（header.php で使用）
$path = './';  //追加（カレントディレクトリを表す ./ ）
include $path .'inc/head.php'; //変更（$path. を追加）
?>
</head>
<body>
<div class="wrapper">
  <?php include $path .'inc/header.php'; ?><!-- 変更（$path. を追加） -->
  <div class="container">
    <main>
      <section>
        <h2>Top page</h2>
        <!-- 変更（src 属性の値に $path. を追加） -->
        <p> <img src="<?php echo $path; ?>images/sample_01.jpg" width="600" height="400" alt=""> Lorem ipsum dolor sit amet,... </p>
      </section>
      <section>
        <h3>Heading</h3>
        <p>Repellat nihil unde commodi soluta dignissimos dicta...</p>
      </section>
    </main>
    <?php include $path .'inc/side.php'; ?><!-- 変更（$path. を追加） -->
  </div>
</div>
<?php include $path .'inc/footer.php'; ?><!-- 変更（$path. を追加） -->
</body>
</html>

トップページ以外

トップページ以外も同様に以下のように変更します。

トップページ以外の場合は、$path に1つ上のディレクトリを表す ../ を設定します。

news/index.php

<?php
$title = 'News | My Site';
$description = '説明（News ページ）';
$path = '../';  //追加（1つ上のディレクトリを表す ../ ）
include $path.'inc/head.php'; //変更（$path. を追加）
?>  
</head>
<body>
<div class="wrapper">
  <?php include $path.'inc/header.php'; ?>
  <div class="container">
    <main>
      <section>
        <h2>News</h2>
        <!-- 変更（src 属性の値に $path. を追加） -->
        <p><img src="<?php echo $path; ?>images/sample_02.jpg" width="600" height="400" alt="">Lorem ipsum dolor sit amet,...</p>
      </section>
      <section>
        <h3>Heading</h3>
        <p>Repellat nihil unde commodi soluta dignissimos dicta...</p>
      </section>
    </main>
    <?php include $path.'inc/side.php'; ?><!-- 変更（$path. を追加） -->
  </div>
</div>
<?php include $path.'inc/footer.php'; ?><!-- 変更（$path. を追加） -->
</body>
</html>

外部ファイルのリンクなども変更します。

head.php

head.php ではスタイルシートなどの読み込みのリンクに $path を出力する記述（echo $path;）を追加します。

これにより、例えば News ページの index.php では href の値は href="../css/style.css" になります。

head.php

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php echo $title; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="<?php echo $description; ?>">
<!-- $pathの出力を href 属性の値に追加 -->
<link rel="stylesheet" href="<?php echo $path; ?>css/style.css">
<!-- $pathの出力を href 属性の値に追加 -->
<link rel="shortcut icon" href="<?php echo $path; ?>favicon.ico">

filemtime() 更新時にキャッシュをクリア

スタイルシートや JavaScript の読み込みではクエリパラメータ（ファイル名の後に ? に続けて指定するパラメータ）で filemtime() を使ってファイルの更新日時を付与すれば、ファイルを更新するたびにクエリパラメータが変更されるので、ブラウザキャッシュが更新されるようになります。

filemtime() の引数は、ファイルへのパスを指定します。

head.php の CSS などの読み込み部分

<!-- クエリパラメータに filemtime() を使ってファイルの更新日時を付与 -->
<link rel="stylesheet" href="<?php echo $path; ?>css/style.css?<?php echo filemtime($path.'css/style.css'); ?>">
<link rel="shortcut icon" href="<?php echo $path; ?>favicon.ico?<?php echo filemtime($path.'favicon.ico'); ?>">

上記のように記述することで、例えば以下のような出力になり、ファイルを更新する度にクエリパラメータ（1622262843の部分）が変更され、キャッシュをクリアできます。

<link rel="stylesheet" href="./css/style.css?1622262843">
<link rel="shortcut icon" href="./favicon.ico?1367707887">

header.php

header.php にもパスやリンクの調整用の値 $path を追加します。

ナビゲーションのリンクではディレクトリを追加しファイル名も news.php などから index.php に変更します。

header.php

<header>
  <div class="container"> 
    <a <?php echo isset($is_home) ? '': 'href="' .$path .'index.php"' ?>> 
      <!-- <?php echo $path; ?> を src 属性の値に追加 -->
      <img class="logo" src="<?php echo $path; ?>images/logo.svg" width="141" height="36" alt="logo">
      <h1>My Site</h1>
    </a> 
  </div>
  <nav class="global-nav">
    <div class="container">
      <ul>
        <!--$pathの出力を追加し、ドップページ以外はディレクトリを追加＆ファイル名を変更 -->
        <li><a href="<?php echo $path; ?>index.php">Home</a></li>
        <li><a href="<?php echo $path; ?>news/index.php">News</a></li>
        <li><a href="<?php echo $path; ?>about/index.php">About</a></li>
        <li><a href="<?php echo $path; ?>contact/index.php">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>

footer.php

footer.php も JavaScript の読み込みに $path の出力を追加します。

footer.php

<footer>
  <div class="container">
    <p><small>&copy;Copyright</small></p>
  </div>
</footer>
<!-- $path の出力を src 属性の値に追加 -->
<script src="<?php echo $path; ?>js/main.js"></script>

JavaScript の読み込みではスタイルシート同様、クエリパラメータで filemtime() を使ってファイルの更新日時を付与して、ファイルを更新するたびにブラウザキャッシュが更新されるようにすることが多いです。

<script src="<?php echo $path; ?>js/main.js?<?php echo filemtime($path.'js/main.js'); ?>"></script>

この例の場合、side.php にはリンクや画像などの記述がないので変更はありません。

もう1つ深い階層の例

例えば以下のように news のディレクトリの中に events というディレクトリを作成した場合

.
├── about
│   └── index.php
 ・・・中略・・・
├── inc
│   ├── footer.php
│   ├── head.php
│   ├── header.php
│   └── side.php
├── index.php
├── js
│   └── main.js
└── news
     ├── events //追加
     │   └── index.php //追加
     └── index.php

この例の場合は $path の値を ../../ にします。階層に応じて $path の値の ../ の数を調整し適切にインクルードしたり画像などを読み込めるようにします。

news/events/index.php

<?php
$title = 'Events | My Site';
$description = '説明（Events ページ）';
$path = '../../';  //この値が階層により異なる
include $path.'inc/head.php';
?>  
</head>
<body>
<div class="wrapper">
  <?php include $path.'inc/header.php'; ?>
  <div class="container">
    <main>
      <section>
        <h2>Events</h2>
        <p><img src="<?php echo $path; ?>images/sample_03.jpg" width="600" height="400" alt="">Lorem ipsum dolor sit amet,...</p>
      </section>
      <section>
        <h3>Heading</h3>
        <p>Repellat nihil unde commodi soluta dignissimos dicta...</p>
      </section>
    </main>
    <?php include $path.'inc/side.php'; ?>
  </div>
</div>
<?php include $path.'inc/footer.php'; ?>
</body>
</html>

以下はナビゲーションに Events（news/events/index.php）を追加した例です。この例の場合はその他のメニュー項目と横並びにしていますが、必要に応じてドロップダウン（ul 要素をネスト）などにします。

header.php

<header>
  <div class="container"> 
    <a <?php echo isset($is_home) ? '': 'href="' .$path .'index.php"' ?>> 
      <img class="logo" src="<?php echo $path; ?>images/logo.svg" width="141" height="36" alt="logo">
      <h1>My Site</h1>
    </a> 
  </div>
  <nav class="global-nav">
    <div class="container">
      <ul>
        <li><a href="<?php echo $path; ?>index.php">Home</a></li>
        <li><a href="<?php echo $path; ?>news/index.php">News</a></li>
        <!-- Events を追加 -->
        <li><a href="<?php echo $path; ?>news/events/index.php">Events</a></li>
        <li><a href="<?php echo $path; ?>about/index.php">About</a></li>
        <li><a href="<?php echo $path; ?>contact/index.php">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>

ルートディレクトリのファイルの選択肢

ルートディレクトリ（正確にはサイトの一番上のディレクトリ）にあるファイル、この例ではトップページの index.php では、ファイルの最初の部分に$path = './'または$path = ''を指定するだけで、他のインクルードや画像のパスなどの部分に $path を追加しなくても大丈夫ですが、上記の例では他のファイルと同じ運用にするためにインクルードや画像のパスなどにも $path を出力するようにしています。

また、ルートディレクトリ（サイトの一番上のディレクトリ）にあるファイルでは $path を設定（記述）せずに、外部ファイル側で $path が定義されていない場合の判定を記述するという方法もあります。

例えば以下のように外部ファイルの echo $path; の記述を変更すれば機能するかと思います（$path が定義されていない場合は、./ または空文字を出力）。

//全ての echo $path; の記述を以下に変更

echo isset($path) ? $path: './';
//または
echo isset($path) ? $path: '';

※但し、ファイルの位置（$path の値）を必要とする処理は色々とあるので、全てのファイルで共通の書き方にしておく方が管理がしやすいと思います。

絶対パスと相対パス

今までの例ではインクルードする際のパスの指定は相対パスを使用しましたが、$_SERVER 変数を使って（絶対パスで）指定することもできます。

絶対パスと言ってもこの場合、環境に合わせてパスを取得できる $_SERVER['DOCUMENT_ROOT'] などの環境変数を使います（サーバー変数や関数）。

$_SERVER（環境変数）の1つ $_SERVER['DOCUMENT_ROOT'] はサーバーのコンフィグレーションファイル（httpd.conf）で定義されていて、ドキュメントルート（htdocs や public_html）へのパスを返してくれます（$_SERVER['DOCUMENT_ROOT'] の値は環境によっては異なる可能性もあります）。

例えば、inc フォルダの head.php をインクルードするには、ファイルの階層に関係なく以下のように記述することができます。

include $_SERVER['DOCUMENT_ROOT'] .'/inc/head.php';

但し、$_SERVER['DOCUMENT_ROOT'] を使ってパスを指定する場合は、サイトがサーバーのルートディレクトリにインストールされている必要があります。

本番環境（ドメインまたはサブドメイン直下）やローカル環境でバーチャルホストを設定してサイトがサーバーのルートディレクトリにインストールされていれば機能しますが、サイトのサブディレクトリやローカル環境の htdocs の中のディレクトリにインストールされている場合はうまく機能しません（もしかしたらよい方法があるかも知れませんが）。

例えばローカル環境（MAMP）で htdocs の中に作成したサイトの場合、$_SERVER['DOCUMENT_ROOT'] で取得される値は「/Applications/MAMP/htdocs」になってしまい、作成したサイトのルートディレクトリではなく、MAMP のルートディレクトリが返ります。

バーチャルホストを設定していれば問題ありません。

// http://localhost/example/ の場合
echo $_SERVER['DOCUMENT_ROOT'];  
// /Applications/MAMP/htdocs （MAMP のドキュメントルート）が出力される

// http://example.localhost/（バーチャルホスト）の場合
echo $_SERVER['DOCUMENT_ROOT'];  
// /Applications/MAMP/htdocs/example（期待通りの値）

制作環境はローカルであったり、本番サーバーのテストディレクトリ（サブディレクトリ）であったりと色々な場合があるので、個人的には相対パスを使用することがほとんどです。

以下は前述の例を絶対パス（$_SERVER['DOCUMENT_ROOT']）で書き換える例です。

この例では以下のような全体で利用する変数を定義したファイル（vars.php）を inc フォルダに保存して全てのページで読み込むようにします。

$doc_root は $_SERVER['DOCUMENT_ROOT'] を繰り返し記述するのを避けるため変数に値を代入しています。

$host_url はそのサイトのホームの URL で、ナビゲーションのリンクや画像などへの URL を絶対 URL で記述するのに使用します。$_SERVER['HTTP_HOST'] はアクセスされているページのホスト名を返します。

6〜8行目は SSL化されていても、サーバーが $_SERVER['HTTPS'] の値を返さない場合の対応で、サーバーが $_SERVER['HTTPS'] の値を返す場合は不要です（記述してあっても問題はないと思います）。

vars.php

<?php
//ドキュメントルートのパス
$doc_root = $_SERVER['DOCUMENT_ROOT'] ;

//サーバーが $_SERVER['HTTPS'] の値を返さない場合の対策
if(isset($_SERVER['HTTP_X_FORWARDED_PROTO']) and $_SERVER['HTTP_X_FORWARDED_PROTO'] === "https") {
  $_SERVER['HTTPS'] = 'on';
} 

//Home の URL の組み立て（例 http://exmaple.com または https://exmaple.com）
$host_url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://'). $_SERVER['HTTP_HOST'];

?>

以下はこの例のフォルダ構成です。

.
├── about
│   └── index.php
├── contact
│   └── index.php
├── css
│   └── style.css
├── favicon.ico
├── images
│   ├── logo.svg
│   ├── sample_01.jpg
│   ├── sample_02.jpg
│   └── sample_03.jpg
├── inc
│   ├── footer.php
│   ├── head.php
│   ├── header.php
│   ├── side.php
│   └── vars.php  //上記ファイル
├── index.php
├── js
│   └── main.js
└── news
     ├── events
     │   └── index.php
     └── index.php

以下はトップページの index.php の例です。

相対パスを使用する場合の $path の部分を $_SERVER['DOCUMENT_ROOT'] や $doc_root に置き換えます。

vars.php で定義した変数を使用するので vars.php を先にインクルードします（5行目）。

$_SERVER['DOCUMENT_ROOT'] や $doc_root の最後にはスラッシュ「/」がないのでスラッシュを追加します。

また、$host_url の最後にもスラッシュが付いていないので、スラッシュを追加します（$doc_root や $host_url の変数の定義の際に、スラッシュを付けておくという方法もありますが）。

トップページの index.php

<?php
$title = 'My Site Top';
$description = '説明（トップページ）';
$is_home = true;
include $_SERVER['DOCUMENT_ROOT'] . '/inc/vars.php';  //こちらを先に読み込む
include $doc_root .'/inc/head.php';
?>
</head>
<body>
<div class="wrapper">
  <?php include $doc_root .'/inc/header.php'; ?>
  <div class="container">
    <main>
      <section>
        <h2>Top page</h2>
        <p> <img src="<?php echo $host_url; ?>/images/sample_01.jpg" width="600" height="400" alt=""> Lorem ipsum dolor sit amet,... </p>
      </section>
      <section>
        <h3>Heading</h3>
        <p>Repellat nihil unde commodi soluta dignissimos dicta...</p>
      </section>
    </main>
    <?php include $doc_root .'/inc/side.php'; ?>
  </div>
</div>
<?php include $doc_root .'/inc/footer.php'; ?>
</body>
</html>

その他のページも同様に変更します。

以下は Events ページの例です。$_SERVER['DOCUMENT_ROOT'] （絶対パスを出力する変数）を使用ているので、階層が異なっていてもインクルードの記述は同じです。

news/events/index.php

<?php
$title = 'Events | My Site';
$description = '説明（Events ページ）';
include $_SERVER['DOCUMENT_ROOT'] .'/inc/vars.php'; 
include $doc_root .'/inc/head.php';
?>  
</head>
<body>
<div class="wrapper">
  <?php include $doc_root .'/inc/header.php'; ?>
  <div class="container">
    <main>
      <section>
        <h2>Events</h2>
        <p><img src="<?php echo $host_url; ?>/images/sample_03.jpg" width="600" height="400" alt="">Lorem ipsum dolor sit amet,...</p>
      </section>
      <section>
        <h3>Heading</h3>
        <p>Repellat nihil unde commodi soluta dignissimos dicta...</p>
      </section>
    </main>
    <?php include $doc_root .'/inc/side.php'; ?>
  </div>
</div>
<?php include $doc_root .'/inc/footer.php'; ?>
</body>
</html>

外部ファイル

$path を使用しないように変更しているので、外部ファイルの $path を使っている部分を vars.php で定義した $host_url を使った記述に変更します。※ $host_url には最後にスラッシュが付かないので追加します（または $host_url にスラッシュを含めるという方法もあります）。

head.php

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php echo $title; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="<?php echo $description; ?>">
<!-- $host_url に変更し / を追加  -->
<link rel="stylesheet" href="<?php echo $host_url; ?>/css/style.css">
<!-- $host_url に変更し / を追加 -->
<link rel="shortcut icon" href="<?php echo $host_url; ?>/favicon.ico">

header.php

<header>
  <div class="container"> 
   <!-- $host_url に変更し / を追加 -->
   <a <?php echo isset($is_home) ? '': 'href="' .$host_url .'/index.php"' ?>> 
      <!-- $host_url に変更し / を追加 -->
      <img class="logo" src="<?php echo $host_url; ?>/images/logo.svg" width="141" height="36" alt="logo">
      <h1>My Site</h1>
    </a> 
  </div>
  <nav class="global-nav">
    <div class="container">
      <ul>
         <!-- 以下も全て $host_url に変更し / を追加 -->
        <li><a href="<?php echo $host_url; ?>/index.php">Home</a></li>
        <li><a href="<?php echo $host_url; ?>/news/index.php">News</a></li>
        <li><a href="<?php echo $host_url; ?>/news/events/index.php">Events</a></li>
        <li><a href="<?php echo $host_url; ?>/about/index.php">About</a></li>
        <li><a href="<?php echo $host_url; ?>/contact/index.php">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>

footer.php

<footer>
  <div class="container">
    <p><small>&copy;Copyright</small></p>
  </div>
</footer>
<!-- $host_url に変更 -->
<script src="<?php echo $host_url; ?>/js/main.js"></script>

メニューなどのリンク

メニューなどのリンクの URL（href 属性の値）は相対 URL や相対パス、または絶対 URL や絶対パスで指定することができます。絶対パスで指定する方法は、サイトをドキュメントルートにインストールした場合とそうでない場合で調整しなければならないので省略します。

絶対 URL で指定

以下は絶対 URL で指定する例のフォルダ・ファイル構成です。

.
├── about
│   └── index.php
├── contact
│   └── index.php
├── css
│   └── style.css
├── favicon.ico
├── images
│   ├── logo.svg
│   └── sample.jpg
├── inc
│   ├── footer.php
│   ├── head.php
│   ├── header.php
│   ├── side.php
│   └── vars.php  //変数 $host_url を記述したファイル
├── index.php
├── js
│   └── main.js
└── news
     └── index.php

vars.php には環境に応じて絶対 URL を取得するように以下を記述してあります。

vars.php

<?php
//サーバーが $_SERVER['HTTPS'] の値を返さない場合で、SSL化されいる場合は $_SERVER['HTTPS'] に 'on' を設定
if(isset($_SERVER['HTTP_X_FORWARDED_PROTO']) and $_SERVER['HTTP_X_FORWARDED_PROTO'] === "https") {
  $_SERVER['HTTPS'] = 'on';
} 
//Home の URL の組み立て
$host_url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://'). $_SERVER['HTTP_HOST'];
?>

以下はメニュー部分を含む外部ファイル化した header.php です。vars.php で定義した $host_url（Home の URL）を使って href 属性に絶対 URL を指定しています。

ファイル名 index.php は省略できるので省略しています。

<header>
  <nav class="global-nav">
    <div class="container">
      <ul>
        <li><a href="<?php echo $host_url; ?>/">Home</a></li>
        <li><a href="<?php echo $host_url; ?>/news/">News</a></li>
        <li><a href="<?php echo $host_url; ?>/about/">About</a></li>
        <li><a href="<?php echo $host_url; ?>/contact/">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>

$host_url の値を取得するため、各ページで vars.php をインクルードしています。

以下は news.php の例です。

<?php
$title = 'News | My Site';
$description = '説明（News ページ）';
include $_SERVER['DOCUMENT_ROOT'] .'/inc/vars.php'; //vars.php をインクルード
include $doc_root .'/inc/head.php';
?>  
</head>
<body>
<div class="wrapper">
  <?php include $doc_root .'/inc/header.php'; ?><!-- header.php のインクルード -->
  <div class="container">
  ・・・中略・・・
</body>
</html>

相対 URL で指定

以下は相対 URL（相対パス）で指定する例のフォルダ・ファイル構成です。ここでは相対 URLと相対パスは同じ意味として扱っています（厳密には異なるかも知れません？）。

.
├── about
│   └── index.php
├── contact
│   └── index.php
├── css
│   └── style.css
├── favicon.ico
├── images
│   ├── logo.svg
│   └── sample.jpg
├── inc
│   ├── footer.php
│   ├── head.php
│   ├── header.php
│   └── side.php
├── index.php
├── js
│   └── main.js
└── news
     └── index.php

以下は各ページでインクルードする header.php です。ファイル名 index.php は省略しています。

変数 $path の値はそれぞれのページで異なり、相対的な URL（パス）を表す「./」や「../」が入ります。

header.php

<header>
  <nav class="global-nav">
    <div class="container">
      <ul>
        <li><a href="<?php echo $path; ?>">Home</a></li>
        <li><a href="<?php echo $path; ?>news/">News</a></li>
        <li><a href="<?php echo $path; ?>about/">About</a></li>
        <li><a href="<?php echo $path; ?>contact/">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>

以下は news.php の例です。

4行目で $path の値を設定しています。

そのページの階層により「../」などのホームディレクトリからの差分を適宜設定します。

例えば news ディレクトリの中に events というディレクトリを作成した場合、その中のページでは階層が1つ深くなるので「../../」を設定します。

<?php
$title = 'News | My Site';
$description = '説明（News ページ）';
$path = '../';  //$path の値を設定
include $path.'inc/head.php';
?>  
</head>
<body>
<div class="wrapper">
  <?php include $path.'inc/header.php'; ?> <!-- header.php のインクルード -->
  <div class="container">
  ・・・中略・・・
</body>
</html>

ホームでのリンク

サイトのトップページ（ホーム）はある意味で特別なページと考えることができます。

例えば、ページのロゴ画像はトップページにリンクされますが、トップページではロゴ画像にリンクは付けないなど、他のページと異なる処理を行う部分があります。

通常、トップページ（ホーム）は index というファイル名が使われ、サイトのトップディレクトリに配置されますが、PHP でのサイトのトップディレクトリの名前の取得方法は環境（インストールされているディレクトリ）により他のページと異なる場合があります。

以下はロゴ画像を含む header.php の例です。

この例では、$is_home という変数が定義していればリンクの href 属性は出力せず、定義されていなければ href 属性の値にホームへの URL を出力するようにしています。

<header>
  <div class="container"> 
    <a <?php echo isset($is_home) ? '': 'href="' .$path .'"' ?>> 
      <img class="logo" src="<?php echo $path; ?>images/logo.svg" alt="logo">
      <h1>My Site</h1>
    </a> 
  </div>
  <nav class="global-nav">
  ・・・中略・・・
  </nav>
</header>

以下は上記の header.php をインクルードするトップページですが、$is_home = true を設定（定義）しています。

<?php
$title = 'My Site Top';
$description = '説明（トップページ）';
$is_home = true;  //ホームの識別（判定）用の変数
$path = './';  
include $path.'inc/vars.php';
include $path .'inc/head.php';
?>
</head>
<body>
<div class="wrapper">
  <?php include $path .'inc/header.php'; ?>
  ・・・省略・・・

このため、トップページでのロゴ画像部分の出力は以下のようになり、リンクは付きません。

<a> 
  <img class="logo" src="./images/logo.svg" alt="logo">
  <h1>My Site</h1>
</a>

トップページ以外では $is_home = true を定義しないので、ロゴ画像部分の出力は以下のように href が出力され、トップページへのリンクが付きます。

<a href="../"> 
  <img class="logo" src="../images/logo.svg" alt="logo">
  <h1>My Site</h1>
</a>

ホームの判定用の変数

上記の例以外でも、異なる環境でホームのディレクトリの取得方法が他のディレクトリと異なるなど、ホームは他のページとは異なる処理が必要な場合があるので、ホームの判定用の変数を定義して、それを元に処理をすると便利な場合があります。

現在のページのメニューにクラスを追加

現在表示されているページのメニュー項目の要素に何らかのクラスを指定して、現在表示されている項目であることがわかりやすいようにスタイルを設定することがあります。

以下は現在どのページが表示されているかを判定して、メニュー項目の li 要素に current というクラスを追加する1つの方法です（色々な方法があり、メニュー構造などにより実装方法は異なると思います）。

また、以下の例ではインクルードする際のパスの指定は相対パスを使用し、メニューのリンクは相対 URL を使っています。

以下がページの構成です。この例の場合、メニューには Home、About、Contact、News、World を表示します。ディレクトリの構造では World は News の中にありますが、ドロップダウンではなくメニュー上はフラットに表示します。

.
├── about
│   └── index.php  //About ページ
├── contact
│   └── index.php  //Contact ページ
├── inc  //インクルードする外部ファイルのディレクトリ
│   ├── footer.php
│   ├── head.php
│   ├── header.php
│   ├── side.php
│   └── vars.php  //変数や関数を記述するファイル
├── index.php  //ホーム
└── news
     ├── index.php  //News インデックスページ
     ├── news1.php  //News 個別ページ
     └── world
         ├── index.php  //World インデックスページ
         └── world-news1.php  //World 個別ページ

以下は処理に必要な変数を定義したファイル vars.php で、全てのページでこのファイルを読み込みます。

$_SERVER['SCRIPT_NAME'] を使って表示されているページのパスを取得して、その値からページのファイル名やディレクトリ名を取得してそれぞれを変数に代入しています（サーバー変数や関数）。

ページのディレクトリ名（$scrip_directory）はホームディレクトリからのパスをスラッシュで区切った値の配列の[総数 -2]のインデックスの要素になります。

var_dump($script_name_exploded) などで確認できます（1番目[0]は空。最後[総数-1]はファイル名）。

表示されているページのディレクトリ名は $scrip_directory に入っていますが、ホームの場合はローカル環境やサブディレクトリにインストールしている場合（トップのディレクトリ名）と本番環境やバーチャルホストを設定している場合（空文字）とでは異なります。このため、ホームの場合はホームのみに定義されている変数（$is_home）を使って処理をします。

vars.php

<?php 
//このスクリプトを実行しているページのホームディレクトリからのパスを含むファイル名
$script_name = $_SERVER['SCRIPT_NAME'];  

//このスクリプトを実行しているページのファイル名
$script_basename = basename($script_name);  

//ページのホームディレクトリからのパスをスラッシュで区切った値の配列。
//1番目[0]は空。最後はファイル名。
$script_name_exploded = explode("/", $script_name); 

//パスをスラッシュで区切って生成された配列の数（総数）
$exploded_count = count($script_name_exploded);  

//このページのディレクトリ名
$scrip_directory = $script_name_exploded[$exploded_count - 2];

以下はトップページ（ホーム）の index.php です。

ホームは特殊なので判定用の変数を定義しておきます。また、変数などを定義したファイル（vars.php）を読み込みます。メニューは header.php に記述されています。

<?php
$title = 'My Site Top';
$description = '説明（トップページ）';
$is_home = true;  //ホームの判定用の変数
$path = './';  //ホームディレクトリからのパス 
include $path.'inc/vars.php';  //変数などを定義したファイルの読み込み
include $path .'inc/head.php';
?>
</head>
<body>
<div class="wrapper">
  <?php include $path .'inc/header.php'; ?> <!-- メニューの読み込み -->
  <div class="container">
  ・・・中略・・・
</body>
</html>

以下はメニュー部分を含む header.php の抜粋です。

現在表示されているページかどうかの判定は、ホームとその他のページでは異なります。

またメニュー項目の li 要素には navbar-item というスタイル用のクラスを付与してありますが、クラス名に意味はありません。実際のマークアップではこのようなクラスを指定することが多いので指定しています。そのため、この例では navbar-item という既存のクラスに current というクラスを追加することになるので、current の前に半角スペースを入れてあります。

li 要素に何もクラスが指定されていない場合は、クラスの追加ではなくクラス属性自体の追加にします。

header.php

<nav class="global-nav">
<ul>
  <li class="navbar-item<?php echo isset($is_home)?' current':''; ?>">
    <a href="<?php echo $path; ?>">Home</a>
  </li>
  <li class="navbar-item<?php echo $scrip_directory==='news'?' current':''; ?>">
    <a href="<?php echo $path; ?>news/">News</a>
  </li>
  <li class="navbar-item<?php echo $scrip_directory==='world'?' current':''; ?>">
    <a href="<?php echo $path; ?>news/world/">World</a>
  </li>
  <li class="navbar-item<?php echo $scrip_directory==='about'?' current':''; ?>">
    <a href="<?php echo $path; ?>about/">About</a>
  </li>
  <li class="navbar-item<?php echo $scrip_directory==='contact'?' current':''; ?>">
    <a href="<?php echo $path; ?>contact/">Contact</a>
  </li>
</ul>
</nav>

以下はホームへのリンク部分です。

ホームの場合はファイル（index.php）に $is_home = true; が定義されていて、その他のページでは定義されていないので、ホームの場合のみ current というクラスが追加され、それ以外では空文字列が追加されます（クラスは追加されません）。

<li class="navbar-item<?php echo isset($is_home) ? ' current' : ''; ?>">
  <a href="<?php echo $path; ?>">Home</a>
</li>

以下は News ページ（news/index.php）へのリンク部分です。

そのファイルのディレクトリ名（vars.php で定義してある $scrip_directory）が news の場合に current というクラスが追加され、それ以外では空文字列が追加されます（クラスは追加されません）。

<li class="navbar-item<?php echo $scrip_directory==='news' ? ' current' : ''; ?>">
  <a href="<?php echo $path; ?>news/">News</a>
</li>

サーバー変数や関数

以下は PHP でパスやファイル名、ディレクトリ名を取得する環境変数や関数の一部抜粋です。

PHP 変数・関数	説明
PHP 変数・関数	http://localhost/example/news/index.php での実行例
$_SERVER[ 'SCRIPT_NAME' ]	現在のスクリプトのパス（スクリプトを実行しているページへのパス）。ホームディレクトリからのパス（ファイル名を含む）
$_SERVER[ 'SCRIPT_NAME' ]	/example/news/index.php
$_SERVER[ 'HTTP_HOST' ]	アクセスされているページのホスト名
$_SERVER[ 'HTTP_HOST' ]	localhost
$_SERVER[ 'REQUEST_URI' ]	ページにアクセスするために指定された URL（※クエリ文字を含む）。クエリ文字の付かない URL などを作成する場合などは$_SERVER[ 'SCRIPT_NAME' ]を使います
$_SERVER[ 'REQUEST_URI' ]	/example/news/index.php /example/news/（index.php なしでアクセスした場合）
$_SERVER[ 'DOCUMENT_ROOT' ]	現在実行されているスクリプトが存在するドキュメントルートディレクトリ（ドメイン直下のパス）
$_SERVER[ 'DOCUMENT_ROOT' ]	/Applications/MAMP/htdocs
$_SERVER[ 'PHP_SELF' ]	現在実行しているスクリプトのファイル名。通常 $_SERVER[ 'SCRIPT_NAME' ]と同じ値。※出力時はエスケープが必要
$_SERVER[ 'PHP_SELF' ]	/example/news/index.php
__DIR__	カレントファイルの存在するディレクトリのパス
__DIR__	/Applications/MAMP/htdocs/example/news
__FILE__	カレントファイルのパスとファイル名
__FILE__	/Applications/MAMP/htdocs/example/news/index.php
dirname()	親ディレクトリのパスを返す関数
dirname()	dirname( $_SERVER[ 'SCRIPT_NAME' ] )の値： /example/news
basename()	パスの最後にある名前の部分を返す関数
basename()	basename( $_SERVER[ 'SCRIPT_NAME' ] )の値：index.php
realpath()	正規化された絶対パス名を返す関数。空の文字列を指定した場合はカレントディレクトリを指定したものとみなす。
realpath()	realpath( "" )の値： /Applications/MAMP/htdocs/example/news
pathinfo()	ファイルパスに関する情報を返す関数。dirname、basename、extension、filename をキーとして連想配列を返す

現在のページのリンク先を # に

現在表示されているページのリンク先を # にする方法です。

前述の現在のページのメニューにクラスを追加するのと同様、各ページで変数の定義されているファイル vars.php を読み込みます（vars.php の内容は前述の例と同じです）。

以下はメニュー部分を含む header.php の抜粋です。前述の例との違いは、a 要素の href 属性の部分です。

前述の例同様、ホームとその他のページでは異なります。

header.php

<nav class="global-nav">
<ul>
  <li class="navbar-item<?php echo isset($is_home) ? ' current' : ''; ?>">
    <a href="<?php echo isset($is_home) ? '#' : $path ; ?>">Home</a>
  </li>
  <li class="navbar-item<?php echo $scrip_directory==='news'?' current':''; ?>">
    <a href="<?php echo ($scrip_directory === 'news' && $script_basename === 'index.php') ? '#' : $path.'news/' ; ?>">News</a>
  </li>
  <li class="navbar-item<?php echo $scrip_directory==='world'?' current':''; ?>">
    <a href="<?php echo ($scrip_directory === 'world' && $script_basename === 'index.php') ? '#' : $path.'news/world/' ; ?>">World</a>
  </li>
  <li class="navbar-item<?php echo $scrip_directory==='about'?' current':''; ?>">
    <a href="<?php echo ($scrip_directory === 'about' && $script_basename === 'index.php') ? '#' : $path.'about/' ; ?>">About</a>
  </li>
  <li class="navbar-item<?php echo $scrip_directory==='contact'?' current':''; ?>">
    <a href="<?php echo ($scrip_directory === 'contact' && $script_basename === 'index.php') ? '#' : $path.'contact/' ; ?>">Contact</a>
  </li>
</ul>
</nav>

以下はホームへのリンク部分です。

ホームの場合はファイル（index.php）に $is_home = true; が定義されていて、その他のページでは定義されていないので、ホームの場合のみリンク先は # が出力され、その他のページではホームへのリンク（$path）が出力されます。

<li class="navbar-item<?php echo isset($is_home) ? ' current' : ''; ?>">
  <a href="<?php echo isset($is_home) ? '#' : $path ; ?>">Home</a>
</li>

以下は News ページ（news/index.php）へのリンク部分です。

そのファイルのディレクトリ名（$scrip_directory）が news の場合で且つファイル名（$script_basename）が場合のみリンク先は # が出力され、それ以外では News ページへのリンク（$path.'news/'）が出力されます。

<li class="navbar-item<?php echo $scrip_directory==='news'?' current':''; ?>">
  <a href="<?php echo ($scrip_directory === 'news' && $script_basename === 'index.php') ? '#' : $path.'news/' ; ?>">News</a>
</li>

aria-current="page"

現在のページのリンク（a 要素）に aria-current="page" を追加するには、リンク先を # にするのと同じ方法で行なえます。

以下はホームへのリンク部分です。

<li class="navbar-item<?php echo isset($is_home) ? ' current' : ''; ?>">
  <a href="<?php echo isset($is_home) ? '#' : $path ; ?>"<?php echo isset($is_home) ? ' aria-current="page"' : ''; ?>>Home</a>
</li>

以下は News ページ（news/index.php）へのリンク部分です。

<li class="navbar-item<?php echo $scrip_directory==='news'?' current':''; ?>">
  <a href="<?php echo ($scrip_directory === 'news' && $script_basename === 'index.php') ? '#' : $path.'news/' ; ?>"<?php echo ($scrip_directory === 'news' && $script_basename === 'index.php') ? ' aria-current="page"' : ''; ?>>News</a>
</li>

aria-current="page" はアクセシビリティ確保のための属性ですが、この属性を利用して以下のようにスタイルを設定すると、現在表示されているページのメニューにマウスオーバーするとカーソルを pointer から default にすることができます。

.current a[aria-current="page"] {
  cursor: default;
}

関数化

現在のページのメニューにクラスを追加したり、リンク先を # に変更するための記述などが増えてくるとメニューのマークアップが見づらくなってしまいます。

これらの記述の殆どの内容は同じなので、関数にすると見やすくなるのと同時に何らかの変更があった場合に関数部分の一箇所を変更すればよくなります。

以下は関数を使わない場合の header.php のメニュー部分の記述です。ごちゃごちゃしています。

header.php 一部抜粋

<ul>
  <li class="navbar-item<?php echo isset($is_home) ? ' current' : ''; ?>">
    <a href="<?php echo isset($is_home) ? '#' : $path ; ?>"<?php echo isset($is_home) ? ' aria-current="page"' : ''; ?>>Home</a>
  </li>
  <li class="navbar-item<?php echo $scrip_directory === 'news' ? ' current' : ''; ?>">
    <a href="<?php echo ($scrip_directory === 'news' && $script_basename === 'index.php') ? '#' : $path.'news/' ; ?>"<?php echo ($scrip_directory === 'news' && $script_basename === 'index.php') ? ' aria-current="page"' : ''; ?>>News</a>
  </li>
  <li class="navbar-item<?php echo $scrip_directory === 'world' ? ' current' : ''; ?>">
    <a href="<?php echo ($scrip_directory === 'world' && $script_basename === 'index.php') ? '#' : $path.'news/world/' ; ?>"<?php echo ($scrip_directory === 'world' && $script_basename === 'index.php') ? ' aria-current="page"' : ''; ?>>World</a>
  </li>
  <li class="navbar-item<?php echo $scrip_directory === 'about' ? ' current' : ''; ?>">
    <a href="<?php echo ($scrip_directory === 'about' && $script_basename === 'index.php') ? '#' : $path.'about/' ; ?>"<?php echo ($scrip_directory === 'about' && $script_basename === 'index.php') ? ' aria-current="page"' : ''; ?>>About</a>
  </li>
  <li class="navbar-item<?php echo $scrip_directory === 'contact'  ? ' current' : ''; ?>">
    <a href="<?php echo ($scrip_directory === 'contact' && $script_basename === 'index.php') ? '#' : $path.'contact/' ; ?>"<?php echo ($scrip_directory === 'contact' && $script_basename === 'index.php') ? ' aria-current="page"' : ''; ?>>Contact</a>
  </li>
</ul>

vars.php に以下のような3つの関数（addCurrent、printMenuURL、addAriaCurrent）を追加します。

関数内では定義した変数をグローバル変数として使用するため、例えば $scrip_directory は $GLOBALS['scrip_directory'] でアクセスしています。

printMenuURL() は少し分かりづらいですが、$path はこの関数を呼び出す際に指定する引数です。各ページのファイルに定義してある $path は関数内では $GLOBALS['path'] としてアクセスしています。

vars.php

<?php 
//このスクリプトを実行しているページのホームディレクトリからのパスを含むファイル名
$script_name = $_SERVER['SCRIPT_NAME'];  

//このスクリプトを実行しているページのファイル名
$script_basename = basename($script_name);  

//ページのホームディレクトリからのパスをスラッシュで区切った値の配列。
//1番目[0]は空。最後はファイル名。
$script_name_exploded = explode("/", $script_name); 

//パスをスラッシュで区切って生成された配列の数
$exploded_count = count($script_name_exploded);  

//このページのディレクトリ名
$scrip_directory = $script_name_exploded[$exploded_count - 2];

//★★★以下の関数を追加★★★
//現在のページに current を追加する関数
function addCurrent($dir) {
  $class = '';
  if($GLOBALS['scrip_directory'] === $dir){
    $class =' current';
  }
  echo $class;
}

//メニューのリンク（URL）を出力する関数（現在のページの場合は # ）
function printMenuURL($dir, $path, $file = 'index.php') {
  $url = $GLOBALS['path'] . $path;
  if($GLOBALS['scrip_directory'] === $dir && $GLOBALS['script_basename'] === $file){
    $url  ='#';
  }
  echo $url;
}

//現在のページに aria-current="page" を追加する関数
function addAriaCurrent($dir, $file = 'index.php') {
  if($GLOBALS['scrip_directory'] === $dir && $GLOBALS['script_basename'] === $file){
    echo ' aria-current="page"';
  }
}

上記で作成した関数を使用すると、header.php のメニュー部分は以下のように記述できます。

※ トップページ（ホーム）の部分は、他と異なるので関数は使用していません。

header.php 一部抜粋

<ul>
  <li class="navbar-item<?php echo isset($is_home) ? ' current' : ''; ?>">
    <a href="<?php echo isset($is_home) ? '#' : $path ; ?>"<?php echo isset($is_home) ? ' aria-current="page"' : ''; ?>>Home</a>
  </li>
  <li class="navbar-item<?php addCurrent('news'); ?>">
    <a href="<?php printMenuURL('news','news/'); ?>"<?php addAriaCurrent('news'); ?>>News</a>
  </li>
  <li class="navbar-item<?php addCurrent('world'); ?>">
    <a href="<?php printMenuURL('world','news/world/'); ?>"<?php addAriaCurrent('world'); ?>>World</a>
  </li>
  <li class="navbar-item<?php addCurrent('about'); ?>">
    <a href="<?php printMenuURL('about','about/'); ?>"<?php addAriaCurrent('about'); ?>>About</a>
  </li>
  <li class="navbar-item<?php addCurrent('contact'); ?>">
    <a href="<?php printMenuURL('contact','contact/'); ?>"<?php addAriaCurrent('contact'); ?>>Contact</a>
  </li>
</ul>

動作はサンプルページで確認できます。

ドロップダウンメニュー

前述の例では、異なる階層のメニューもフラットに表示していましたが、ドロップダウンメニューで表示する場合は親の階層のメニュー項目に特定のクラスを指定する場合があります。

以下はドロップダウンメニューで現在表示されているページの親の階層のメニュー項目に ancestor というクラスを追加する一例です（もっと良い方法があるかも知れません）。

以下はサンプルのフォルダ構成です。

tech や world ディレクトリのファイルが表示されている場合に、news の項目に ancestor というクラスを追加します。

.
├── about
│   └── index.php
├── contact
│   └── index.php
├── inc
│   ├── footer.php
│   ├── head.php
│   ├── header.php
│   ├── side.php
│   └── vars.php
├── index.php
└── news  //News
     ├── index.php
     ├── news1.php
     ├── tech  //Tech
     │   ├── index.php
     │   └── tech-news1.php
     └── world  //World
         ├── index.php
         └── world-news1.php

以下はドロップダウンメニューで、現在表示されているページのメニューに current というクラスを追加する例です。

この場合、World と Tech というメニューはマウスオーバーした際にドロップダウンで表示されるので、World と Tech のページが表示される際には News にはクラスが追加されないため、クラスを使ってスタイルを設定できません。

header.php

<ul class="navbar-navigation">
  <li class="navbar-item<?php echo isset($is_home) ? ' current' : ''; ?>"> 
    <a href="<?php echo isset($is_home) ? '#' : $path ; ?>"<?php echo isset($is_home) ? ' aria-current="page"' : ''; ?>>Home</a> 
  </li>
  <!--親メニュー項目-->
  <li class="navbar-item dropdown<?php echo addCurrent('news'); ?>"> 
    <a href="<?php printMenuURL('news','news/'); ?>"<?php addAriaCurrent('news'); ?>>News</a>
    <!--ドロップダウン-->
    <ul>
      <li class="navbar-item<?php addCurrent('world'); ?>"> 
        <a href="<?php printMenuURL('world','news/world/'); ?>"<?php addAriaCurrent('world'); ?>>World</a> 
      </li>
      <li class="navbar-item<?php addCurrent('tech'); ; ?>"> 
        <a href="<?php printMenuURL('tech','news/tech/');; ?>"<?php addAriaCurrent('world');; ?>>Tech</a> 
      </li>
    </ul>
  </li>
  <li class="navbar-item<?php addCurrent('about'); ?>"> 
    <a href="<?php printMenuURL('about','about/'); ?>"<?php addAriaCurrent('about'); ?>>About</a> 
  </li>
  <li class="navbar-item<?php addCurrent('contact'); ?>"> 
    <a href="<?php printMenuURL('contact','contact/') ; ?>"<?php addAriaCurrent('contact'); ?>>Contact</a> 
  </li>
</ul>

News の配下のディレクトリ（World と Tech）のページが表示されている場合は、News に ancestor というクラスを追加してスタイルを適用できるようにします。

vars.php に親メニュー項目に ancestor クラスを追加する関数 addMenuClasses() を追加します（45〜58行目）。

vars.php

<?php 
//このスクリプトを実行しているページのホームディレクトリからのパスを含むファイル名
$script_name = $_SERVER['SCRIPT_NAME'];  

//このスクリプトを実行しているページのファイル名
$script_basename = basename($script_name);  

//ページのホームディレクトリからのパスをスラッシュで区切った値の配列。
//1番目[0]は空。最後はファイル名。
$script_name_exploded = explode("/", $script_name); 

//パスをスラッシュで区切って生成された配列の数（総数）
$exploded_count = count($script_name_exploded);  

//このページのディレクトリ名
$scrip_directory = $script_name_exploded[$exploded_count - 2];

/現在のページに current を追加する関数
function addCurrent($dir) {
  $class = '';
  if($GLOBALS['scrip_directory'] === $dir){
    $class =' current';
  }
  echo $class;
}

//メニューのリンク（URL）を出力する関数（現在のページの場合は # ）
function printMenuURL($dir, $path, $file = 'index.php') {
  $url = $GLOBALS['path'] . $path;
  if($GLOBALS['scrip_directory'] === $dir && $GLOBALS['script_basename'] === $file){
    $url  ='#';
  }
  echo $url;
}

//現在のページに aria-current="page" を追加する関数
function addAriaCurrent($dir, $file = 'index.php') {
  if($GLOBALS['scrip_directory'] === $dir && $GLOBALS['script_basename'] === $file){
    echo ' aria-current="page"';
  }
}
          
//※ 現在表示されているページや親ページのメニュー項目にクラスを追加する関数
//$dir にはディレクトリ名を指定（必須）
function addMenuClasses($dir, $file = 'index.php') {
  $pattern = '/^' . $dir .'/';
  $class = '';
  //そのページのパスの値（スラッシュで区切って生成された配列）を調査
  foreach($GLOBALS['script_name_exploded']  as $name ) {
    if (preg_match($pattern, $name)) {
      $class =' ancestor';
    }
  }
  //現在表示されているページの場合は current クラスを追加
  if($GLOBALS['scrip_directory'] === $dir && $GLOBALS['script_basename'] === $file){
    $class .=' current';
  }
  echo $class;
}

addMenuClasses() では、そのページのパスの値（パスをスラッシュで区切って生成された配列）を調べてディレクトリと一致する場合は ancestor クラスを、指定されたディレクトリ名が現在表示されているページのディレクトリと一致する場合は current クラスを追加して出力します。

header.php では親メニュー項目のクラスの出力を addMenuClasses() を使うように書き換えます。以下の例ではその他の部分はネストしていない（ドロップダウンではない）ので変更はありません。

header.php

<ul class="navbar-navigation">
  <li class="navbar-item<?php echo isset($is_home) ? ' current' : ''; ?>"> 
    <a href="<?php echo isset($is_home) ? '#' : $path ; ?>"<?php echo isset($is_home) ? ' aria-current="page"' : ''; ?>>Home</a> 
  </li>
  <!--親メニュー項目 addMenuClasses() に変更-->
  <li class="navbar-item dropdown<?php addMenuClasses('news'); ?>"> 
    <a href="<?php printMenuURL('news','news/'); ?>"<?php addAriaCurrent('news'); ?>>News</a> 
    <!--ドロップダウン-->
    <ul>
      <li class="navbar-item<?php addCurrent('world'); ?>"> 
        <a href="<?php printMenuURL('world','news/world/'); ?>"<?php addAriaCurrent('world'); ?>>World</a> 
      </li>
      <li class="navbar-item<?php addCurrent('tech'); ; ?>"> 
        <a href="<?php printMenuURL('tech','news/tech/');; ?>"<?php addAriaCurrent('world');; ?>>Tech</a> 
      </li>
    </ul>
  </li>
  <li class="navbar-item<?php addCurrent('about'); ?>"> 
    <a href="<?php printMenuURL('about','about/'); ?>"<?php addAriaCurrent('about'); ?>>About</a> 
  </li>
  <li class="navbar-item<?php addCurrent('contact'); ?>"> 
    <a href="<?php printMenuURL('contact','contact/') ; ?>"<?php addAriaCurrent('contact'); ?>>Contact</a> 
  </li>
</ul>

動作はサンプルページで確認できます。

2ヶ国語言語リンク

例えば、日本語とそれに対応する英語のページのサイトを作成して、日本語と英語の構造が同じ場合、言語メニューを表示して英語と日本語を切り替えることができます。

以下がこのサンプルのフォルダ構成です。前述（ドロップダウンメニュー）の例に英語ページを追加したものです。

英語のページは en ディレクトリ内に同じ構造で配置され、同じ名前で1対1に対応しています。

.
├── about  //日本語 About
│   └── index.php
├── contact  //日本語 Contact
│   └── index.php
├── en  //英語ページ
│   ├── about
│   │   └── index.php
│   ├── contact
│   │   └── index.php
│   ├── index.php //英語トップページ
│   └── news
│       ├── index.php
│       ├── news1.php
│       ├── tech
│       │   ├── index.php
│       │   └── tech-news1.php
│       └── world
│           ├── index.php
│           └── world-news1.php
├── inc  //日本語と英語の共通の外部ファイル
│   ├── footer.php
│   ├── head.php
│   ├── header.php
│   ├── side.php
│   └── vars.php
├── index.php  //日本語トップページ
└── news  //日本語 News
    ├── index.php
    ├── news1.php
    ├── tech
    │   ├── index.php
    │   └── tech-news1.php
    └── world
        ├── index.php
        └── world-news1.php

サンプルページ

この例の場合、ローカル環境やサブディレクトリにインストールしている場合は、そのインストールした位置を記述する必要があります（4行目）。

ルートディレクトリにインストールしている場合は、空文字 '' を指定します。

例えば、http://localhost/example/test にサイトをインストールしている場合は '/example/test' を指定します。

このファイルを読み込む全ての英語ページには $is_en という変数を定義しておきます。

言語メニューのリンクを出力する関数 printLangLink() を追加します（65〜88行目）。

また、英語ページの場合は、リンクに en/ を追加するように printMenuURL() を修正しています（33行目）。header.php での使い方（引数の指定）には変更はありません。

その他は前述（ドロップダウンメニュー）の例と同じです。

vars.php

<?php 
//サイトをインストールしているディレクトリ（ルートディレクトリの場合は空文字 ''を指定）
//先頭にスラッシュ（/）を付け、最後はスラッシュなし（以下は http://localhost/example にインストールしている場合）
$intalled_dir = '/example';

//このスクリプトを実行しているページのホームディレクトリからのパスを含むファイル名
$script_name = $_SERVER['SCRIPT_NAME'];  

//このスクリプトを実行しているページのファイル名
$script_basename = basename($script_name);  

//ページのホームディレクトリからのパスをスラッシュで区切った値の配列。1番目[0]は空。最後はファイル名。
$script_name_exploded = explode("/", $script_name); 

//パスをスラッシュで区切って生成された配列の数
$exploded_count = count($script_name_exploded);  

//このページのディレクトリ名
$scrip_directory = $script_name_exploded[$exploded_count - 2];

//現在のページに current を追加する関数
function addCurrent($dir) {
  $class = '';
  if($GLOBALS['scrip_directory'] === $dir){
    $class =' current';
  }
  echo $class;
}

//メニューのリンク（URL）を出力する関数（現在のページの場合は # ）
function printMenuURL($dir, $path, $file = 'index.php') {
  //英語ページの場合は、en/ を追加
  $url = $GLOBALS['path'] . (isset($GLOBALS['is_en']) ? 'en/' : '') . $path;
  if($GLOBALS['scrip_directory'] === $dir && $GLOBALS['script_basename'] === $file){
    $url  ='#';
  }
  echo $url;
}

//現在のページに aria-current="page" を追加する関数
function addAriaCurrent($dir, $file = 'index.php') {
  if($GLOBALS['scrip_directory'] === $dir && $GLOBALS['script_basename'] === $file){
    echo ' aria-current="page"';
  }
}

//現在表示されているページや親ページのメニュー項目にクラスを追加（$dir にディレクトリ名を指定）
function addMenuClasses($dir, $file = 'index.php') {
  $pattern = '/^' . $dir .'/';
  $class = '';
  //そのページのパスの値（スラッシュで区切って生成された配列）を調査
  foreach($GLOBALS['script_name_exploded']  as $name ) {
    if (preg_match($pattern, $name)) {
      $class =' ancestor';
    }
  }
  //現在表示されているページの場合は current クラスを追加
  if($GLOBALS['scrip_directory'] === $dir && $GLOBALS['script_basename'] === $file){
    $class .=' current';
  }
  echo $class;
}

//追加
function printLangLink() {
  $path = $GLOBALS['path'];
  //$_SERVER[&#39;SCRIPT_NAME&#39;] のパスからインストールされたディレクトリまでの文字を削除
  $url_part = str_replace($GLOBALS['intalled_dir'], "", $GLOBALS['script_name']);
  if(isset($GLOBALS['is_en'])) {
    $url = $path. str_replace("/en/", "", $url_part);  //「/en/」を削除
    $class = 'ja-link';  //不要であれば空文字 '' を指定
    $lang = 'ja';
    $hreflang = 'ja';
    $menu_title = '日本語'; 
  }else{
    $url = $path. 'en'. $url_part;
    $class = 'en-link';  //不要であれば空文字 '' を指定
    $lang = 'en-US';
    $hreflang = 'en-US';
    $menu_title = 'English';
  }
  if($class !== '') {
    $link = '<a class="'.$class.'" lang="'.$lang.'" hreflang="'.$hreflang.'" href="'.$url.'">'.$menu_title.'</a>';
  }else{
    $link = '<a lang="'.$lang.'" hreflang="'.$hreflang.'" href="'.$url.'">'.$menu_title.'</a>';
  }
  echo $link;
}

68行目は $_SERVER['SCRIPT_NAME'] で取得したパスからインストールされたディレクトリまでの文字を削除して、リンクの URL の一部を作成しています。設定している変数に関数内からアクセスするには $GLOBALS['変数名'] を使っています。

英語の全てのページには $is_en = true; という変数を定義して、その変数が定義されているかどうかで英語・日本語用のリンクを生成しています（69〜81行目）。

82〜86行目ではリンクの a 要素を生成しています（クラスを設定するかどうかで分岐）。

以下は英語の About のページの例です。英語のページには $is_en = true; を記述する必要があります。

en/about.php

<?php
$title = 'About My Site';
$description = 'Description（About My Site）';
$path = '../../';
$is_en = true;  //英語ページには全てこの変数を定義（必須）
include $path.'inc/vars.php';
include $path .'inc/head.php';
?>
</head>  
</head>
<body>
<div class="wrapper">
  <?php include $path .'inc/header.php'; ?>
  <div class="container">
    <main>
      <section>
        <h2>About</h2>
        <p>Lorem ipsum dolor sit amet,...</p>
      </section>
      <section>
        <h3>Heading</h3>
        <p>Repellat nihil unde commodi soluta dignissimos dicta...</p>
      </section>
    </main>
    <?php include $path .'inc/side.php'; ?>
  </div>
</div>
<?php include $path .'inc/footer.php'; ?>
</html>

以下が言語リンクを出力する header.php の部分の抜粋です。

header.php 抜粋

<nav class="navbar-menu">
  <ul class="navbar-navigation">
    <li class="navbar-item<?php echo isset($is_home) ? ' current' : ''; ?>"> 
      <a href="<?php echo isset($is_home) ? '#' : (isset($is_en) ? '../' : $path ) ; ?>"<?php echo isset($is_home) ? ' aria-current="page"' : ''; ?>>Home</a> 
    </li>
    ・・・中略・・・
    <li class="navbar-item<?php addCurrent('contact'); ?>"> 
      <a href="<?php printMenuURL('contact','contact/') ; ?>"<?php addAriaCurrent('contact'); ?>>Contact</a> 
    </li>
    <!--言語リンク -->
    <li class="navbar-item"><?php printLangLink(); ?></li>
  </ul>
</nav>

Home へのリンクは、$is_home が定義されていれば # を出力し、$is_home が定義されていない場合は、$is_en が定義されていれば ../ を出力し、そうでなければ $path を出力するようにしています。上記では省略していますが、ロゴのリンクも同様です。

例えば、日本語のトップページでは以下のような英語トップページへのリンクが出力されます。

<li class="navbar-item">
  <a class="en-link" lang="en-US" hreflang="en-US" href="./en/index.php">English</a>
</li>

英語ページの en/news/world/world-news1.php では以下のようなリンクが出力されます。

<li class="navbar-item">
  <a class="ja-link" lang="ja" hreflang="ja" href="../../../news/world/world-news1.php">日本語</a>
</li>

テンプレート化

ob_start()や ob_get_contents() などを使って簡易的なテンプレートを作ることができます。

echo を実行すると記述してある位置（タイミング）で HTML に標準出力します。

ob_start() を使うと、標準出力を出力せずにバッファリング（バッファという領域に一時的に保存）することができます（ob は output buffer）。

バッファリングした値は任意のタイミングで取り出すことができ、ob_get_contents() を使って変数に代入して任意のタイミングで echo を使って出力したり、ob_end_flush() を使って出力することができます。

また、ob_start() でバッファリングを開始したら、ob_end_clean() を使ってバッファリングを終了してバッファをクリアする必要があります。または、バッファの内容を取得し、出力バッファをクリアする関数 ob_get_clean() を使うこともできます。

ob_start()

ob_start() は出力のバッファリングを有効にする関数です（output buffer start：出力バッファの開始）。

以下は ob_start() の基本的な使い方です。

<?php 
// バッファリング開始（以降は出力をせずバッファに保存）
ob_start(); 

echo 'foo'; //出力せずバッファに保存
echo 'bar'; //出力せずバッファに保存
        
// バッファの内容を変数に代入      
$buffer = ob_get_contents();  
        
// バッファをクリアしてバッファリングを終了       
ob_end_clean(); 
        
// 変数に代入したバッファの内容を出力
echo '$buffer は '.$buffer;
//「$buffer は foobar」と出力される      
 ?>

ob_get_contents() はバッファの内容を取得する関数です。バッファの内容はクリアしません。

<?php 
//バッファリング開始（出力をせずバッファに保存）
ob_start(); 

echo 'foo'; //出力せずバッファに保存
echo 'bar'; //出力せずバッファに保存
        
// バッファの内容を変数に代入（バッファの内容はクリアしない）     
$buffer = ob_get_contents();  
        
echo strtoupper($buffer); //出力せずバッファに保存
    
// バッファの内容を変数に代入（バッファの内容はクリアしない）   
$buffer2 = ob_get_contents();  
        
// バッファの内容をクリアしてバッファリングを終了       
ob_end_clean(); 
        
// 変数に代入したバッファの内容を出力
echo '$buffer は '.$buffer .'<br>';
//「$buffer は foobar」と出力される  
        
echo '$buffer2 は '.$buffer2 .'<br>';
//「$buffer2 は foobarFOOBAR」と出力される  
 ?>

ob_get_clean() という関数を使うと、現在のバッファの内容を取得して出力バッファをクリアすることができ、 ob_get_contents() と ob_end_clean() を同時に実行するのと同じことになります。

以下の場合、9行目の ob_get_clean() でバッファをクリアしてバッファリングが終了終了しているので、バッファリングを再開するには再度 ob_start() を実行します（12行目）。

$buffer2 に取得される内容は、12行目の2回目の ob_start() 以降の内容になります。

<?php 
//バッファリング開始（出力をせずバッファに保存）
ob_start(); 

echo 'foo'; //出力せずバッファに保存
echo 'bar'; //出力せずバッファに保存
        
// バッファの内容を変数に代入し、バッファをクリアしてバッファリングを終了      
$buffer = ob_get_clean();  
  
//バッファリング開始
ob_start();
        
echo strtoupper($buffer); //出力せずバッファに保存
         
// バッファの内容を変数に代入、バッファをクリアしてバッファリングを終了 
$buffer2 = ob_get_clean();  
         
// 変数に代入したバッファの内容を出力
echo '$buffer は '.$buffer .'<br>';
//「$buffer は foobar」と出力される  
        
echo '$buffer2 は '.$buffer2 .'<br>';
//「$buffer2 は FOOBAR」と出力される  
 ?>

include や require

include や require を使った外部ファイルを読み込む際にも出力をバッファリングすることができます。

echo と同様、include や require も記述したところで処理（出力）が実行されます。

include や require も以下のように ob_start() を使ってバッファリングすることで、読み込んだファイルを変数に格納して、任意のタイミングで必要に応じて出力することができます。

<?php
//出力バッファを有効に
ob_start();  

//ファイルをインクルード
include '/path/to/template.php';  

//インクルードした出力を変数に保存
$buffer = ob_get_contents(); 

//出力バッファをクリア
ob_end_clean();  

//インクルードした内容を出力
echo $buffer;  
?>

例えば、以下のようなパラメータの変数を記述すればインクルードするファイル（テンプレート）でその値を使用することができます。インクルードするファイルに渡すパラメータの変数（$attrs）の記述は include の前であれば、ob_start() の後でも問題ありません。

<?php
//インクルードするテンプレートファイルに渡すパラメータ
$attrs = ['foo', 'bar', 'baz']; 
ob_start();
//テンプレートファイルをインクルード
include '/path/to/template.php';
$buffer = ob_get_contents();
ob_end_clean();
echo $buffer;
?>

以下はインクルードするテンプレートファイル template.php です。

template.php

<?php 
foreach($attrs as $attr) {
  echo '<p>Hello, '. $attr . ' !</p>'."\n";
}

出力される $buffer の内容は以下になります。

<p>Hello, foo !</p>
<p>Hello, bar !</p>
<p>Hello, baz !</p>

簡易テンプレートの作成

以下のような関数を作成して簡単にテンプレートファイルにパラメータを渡して出力できるようにします。

$file：テンプレートファイル
$attrs：テンプレートファイルに渡すパラメータ

<?php 
function load_my_template($file, $attrs){
  ob_start();
  include $file; //テンプレートファイルのインクルード
  $html = ob_get_contents();
  ob_end_clean();
  echo $html; //出力
}

上記の関数 load_my_template() の定義を全てのファイルで読み込むファイルに記述しておくか、必要に応じてページごとに関数を記述したファイルを読み込みます。

このページの今までの例では、全てのページで使用する変数や関数を記述してあるファイル vars.php があるのでそこに記述するなど、環境に合わせて load_my_template() の定義を読み込みます。

vars.php 抜粋

<?php 
//このスクリプトを実行しているページのホームディレクトリからのパスを含むファイル名
$script_name = $_SERVER['SCRIPT_NAME'];  
//このスクリプトを実行しているページのファイル名
$script_basename = basename($script_name);  

・・・中略・・・

//テンプレートの関数
function load_my_template($file, $attrs){
  ob_start();
  include $file;
  $html = ob_get_contents();
  ob_end_clean();
  echo $html;
}

テンプレートを出力するファイルでは、テンプレートの関数を読み込み、パラメータを渡して関数を実行（呼び出し）します。以下の例ではパラメータを記述して渡していますが、別ファイルに記述して関数の前でインクルードするなども可能です。

<?php
$path = './';  
include $path.'inc/vars.php'; //テンプレートの関数の読み込み
include $path .'inc/head.php';
?>
</head>
<body>
<div class="wrapper">
  <?php include $path .'inc/header.php'; ?>
  ・・・中略・・・
  <?php
    //パラメータ（関数の引数に直接記述しても同じ）
    $attrs = ['foo', 'bar', 'baz']; 
    //テンプレートの関数を実行
    load_my_template( $path."templates/template.php", $attrs );
  ?>
  ・・・中略・
<?php include $path .'inc/footer.php'; ?>
</body>
</html>

templates/template.php（テンプレートファイル）

<?php 
foreach($attrs as $attr) {
  echo '<p>Hello, '. $attr . ' !</p>'."\n";
}

load_my_template() を記述した位置で以下が出力されます。

<p>Hello, foo !</p>
<p>Hello, bar !</p>
<p>Hello, baz !</p>

テンプレートのサンプル

以下は figure 要素を使って画像とキャプションを出力するテンプレートの例です。

$attrs は load_my_template() の第2パラメータで、この例では配列が渡されます。

for 文で配列の要素の数だけ figure 要素を出力し、画像の src やキャプションなどは渡されたパラメータから取得します。指定しているクラス属性は特に意味はありません。

image-gallery.php（テンプレートファイル）

<?php for($i = 0; $i < count($attrs); $i++){ ?>
<div class="col-lg-3 col-md-6">
  <figure class="image-gallery-figure"> 
    <img src="<?php echo $attrs[$i]['src']; ?>" 
         class="figure-img img-fluid" 
         width="400" height="300" 
         alt="<?php echo $attrs[$i]['alt']; ?>">
    <figcaption>
      <h4 class="figure-caption-h4"><?php echo $attrs[$i]['title']; ?></h4>
      <div class="caption">
        <p><?php echo $attrs[$i]['caption']; ?></p>
      </div>
    </figcaption>
  </figure>
</div>
<?php } ?>

この例ではテンプレートの関数に渡すパラメータは別途以下のようなファイルに記述しておきます。

$path はテンプレートを出力するファイルで定義されている変数（相対パスの値）です。

image-gallery-entries.php

<?php 
$attrs_image_gallery = [
  [
    'title' => 'タイトル1',
    'src' => $path.'images/sample_01.jpg',
    'alt' => 'ビーチの風景の写真',
    'caption' => 'カリブのビーチ'
  ],
  [
    'title' => 'タイトル2',
    'src' => $path.'images/sample_02.jpg',
    'alt' => '街の写真',
    'caption' => 'ニューヨークウェストビレッジ'
  ],
  [
    'title' => 'タイトル3',
    'src' => $path.'images/sample_03.jpg',
    'alt' => '床屋さんの写真',
    'caption' => 'ニューヨークの床屋さん'
  ],
];

テンプレートを出力するページ（ファイル）では、テンプレートの関数 load_my_template() を定義したファイルをインクルードしておきます。

テンプレートを出力するページ（ファイル）

<?php
$path = './';  
include $path.'inc/vars.php'; //テンプレートの関数が定義されているファイル
include $path .'inc/head.php';
?>
</head>
<body>
<div class="wrapper">
  <?php include $path .'inc/header.php'; ?>
  <div class="container">
    ・・・中略・・・
  <div class="row">
  <?php
  //関数に渡すパラメータ（$attrs_image_gallery）が記述されているファイルをインクルード
  include $path . 'templates/image-gallery-entries.php';
  //テンプレートファイルとパラメータを指定して実行
  load_my_template( $path."templates/image-gallery.php", $attrs_image_gallery );
  ?>
  </div>
    ・・・中略・・・
</body>
</html>

load_my_template() を記述した位置には以下が出力されます。

<div class="col-lg-3 col-md-6">
  <figure class="image-gallery-figure"> 
  <img src="./images/sample_01.jpg" class="figure-img img-fluid" width="400" height="300" alt="ビーチの風景の写真">
    <figcaption>
      <h4 class="figure-caption-h4">タイトル1</h4>
      <div class="caption">
        <p>カリブのビーチ</p>
      </div>
    </figcaption>
  </figure>
</div>
<div class="col-lg-3 col-md-6">
  <figure class="image-gallery-figure"> 
  <img src="./images/sample_02.jpg" class="figure-img img-fluid" width="400" height="300" alt="街の写真">
    <figcaption>
      <h4 class="figure-caption-h4">タイトル2</h4>
      <div class="caption">
        <p>ニューヨークウェストビレッジ</p>
      </div>
    </figcaption>
  </figure>
</div>
<div class="col-lg-3 col-md-6">
  <figure class="image-gallery-figure"> 
  <img src="./images/sample_03.jpg" class="figure-img img-fluid" width="400" height="300" alt="床屋さんの写真">
    <figcaption>
      <h4 class="figure-caption-h4">タイトル3</h4>
      <div class="caption">
        <p>ニューヨークの床屋さん</p>
      </div>
    </figcaption>
  </figure>
</div>

関連項目：独自テンプレートで出力（パンくずリスト）

Web Design Leaves