ページが増えてくると、サイト内で共通している部分の変更があったときの書き換えが大変ですよね。
サイトを、CMSのように共通している部分を別々に管理出来たら便利だと思いませんか?
例えば、グローバルナビゲーションを共通ファイルとして読み込むと、
その共通ファイルを変更すれば、すべてのページに変更を反映させることができたりします。
そこで、PHPを使ってグローバルナビゲーションを共通ファイルにする方法をご紹介したいと思います。
今回のご説明に使わせていただく、基本的なサンプルコード。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="header">ヘッダー部分になります <!--▼共通化するグローバルナビゲーション部分--> <div id="menu"> <ul> <li><a href="index.php">TOP</a></li> <li><a href="about.php">ABOUT</a></li> <li><a href="product.php">PRODUCT</a></li> <li><a href="company.php">COMPANY</a></li> <li><a href="contact.php">CONTACT</a></li> </ul> </div> <!--//▲共通化するナビゲーション部分--> </div> <div id="contents">コンテンツ部分になります</div> <div id="footer">フッター部分になります</div> |
上記のグローバルナビゲーション部分を共通ファイル化してみたいと思います。
STEP1 グローバルナビゲーションをひとつのファイルに書き出す
サンプルコードのグローバルナビゲーションの箇所を、 global_menu.php として、ひとつのファイルで書き出します。
1 2 3 4 5 6 7 8 9 |
<div id="menu"> <ul> <li><a href="index.php">TOP</a></li> <li><a href="about.php">ABOUT</a></li> <li><a href="product.php">PRODUCT</a></li> <li><a href="company.php">COMPANY</a></li> <li><a href="contact.php">CONTACT</a></li> </ul> </div> |
global_menu.phpを以下の場所に設置します。
例えば、ルート階層がhtdocsフォルダの場合の設置例は以下になります。
STEP2 PHPインクルード関数を使って、共通ファイルを読み込む
PHPのinclude関数を使って、先程作成をしたglobal_menu.phpを外部ファイルとして読み込みます。
以下のコードを、サンプルコード内に書かれた <div id=”menu”>~</div> の箇所へ埋め込みます。
1 |
<?php include( $_SERVER['DOCUMENT_ROOT'] . '/global_menu.php'); ?> |
サンプルコードの書き換えを行った例が以下になります。
1 2 3 4 5 6 7 8 9 |
<div id="header">ヘッダー部分になります // ▼共通化するグローバルナビゲーション部分を、PHPのinclude関数を使って読み込み <?php include( $_SERVER['DOCUMENT_ROOT'] . '/global_menu.php'); ?> </div> <div id="contents">コンテンツ部分になります</div> <div id="footer">フッター部分になります</div> |
設置イメージとしては、青色の箇所に共通化したグローバルナビゲーションを読み込むような感じです。
補足として include関数で使っている $_SERVER['DOCUMENT_ROOT'] について少しご説明をさせていただきます。
この変数はPHPではじめから定義されている変数で、ドキュメントルート(URLでいうとドメイン直下)のパスを返してくれますので、以下のようなフォルダ構成であっても、$_SERVER['DOCUMENT_ROOT']を使うことによって、相対・絶対パス(/や../など)を意識することなく自動的にドキュメントルートから global_menu.php を読み込みが行われます。
また、include関数を使う際、以下のようにCSSや画像ファイルと同じように相対・絶対パスを記述することもできますが、この方法では階層ごとに記述を変えなければならず不便です。 $_SERVER['DOCUMENT_ROOT'] を使ってパスを自動取得することをオススメします。
1 2 3 |
// 以下の書き方では階層によってパスを変えなければならいので不便です。 <?php include('global_menu.php'); ?> ← global_menu.phpと同階層の場合 <?php include('../global_menu.php'); ?> ← 下層ページでglobal_menu.phpを読み込む場合 |
グローバルナビゲーションを例に、1つのファイルを共通ファイルとして管理する方法をご紹介させていただきましたが、その他にも、ヘッダーやフッター、サイドバーなどにも応用できますよね!