Webサイトには、ヘッダーやフッター、サイドカラムなど、多くの「共通部分」があります。
ヘッダーの文字をほんの少し直すだけでも、全てのファイルを開いて直す必要があります。
ページの少ないWebサイトであれば簡単ですが、100ページを超えるような中〜大規模のWebサイトの場合では苦労するはずです。
DreamWeaverなど専用ソフトを使えば、全部開かずとも一括置換できたりしますが「それにしても多すぎて面倒だ」と思ったことはありませんか？
そんなときにおすすめなのが、phpのインクルード(include)です。
ヘッダーなど、共通部分のhtmlソースを外部ファイル化し、それを全ページで共有できます。
つまり、1ファイルを直すだけで全てに反映されるようになります。
共通部分をインクルード（外部ファイル化）する方法
（1）抜き出したい部分のみを別のファイルに保存する
共通部分のhtmlソースをそのまま外部ファイル化し、header.phpなどとして保存します（ここの拡張子はphpでなくてもOKです）
（2）挿入したい部分に下記のphpコードを挿入
書き方はいくつかあるのですが、弊社では下記のようにしています。
<?php include($_SERVER['DOCUMENT_ROOT']."/header.php"); ?>
“/header.php”の部分は、スラッシュで始まる絶対パスで書く必要があります。
header.phpの設置場所に応じて書き換えてください。
例えばheader.phpを「include_files」フォルダに入れた場合は
<?php include($_SERVER['DOCUMENT_ROOT']."/include_files/header.php"); ?>
となります。
「絶対パス」と「相対パス」は、使い分けるととても便利です。
そのうち記事にする予定です。
ちなみに、相対パスでの書き方
<?php include("test.php"); ?>
<?php include("../test.php"); ?>
など。
本体ページサンプル（これは拡張子phpである必要があります）
<body>
<!-- header挿入 -->
<?php include($_SERVER['DOCUMENT_ROOT']."/header.php"); ?>
本文
<!-- footer挿入 -->
<?php include($_SERVER['DOCUMENT_ROOT']."/footer.php"); ?>
<body>
htmlで作っている場合
htmlであっても、htaccessに3行追記するだけで、phpを動かすことが出来ます。
関連リンク：htmlでphpを動かす方法
それができなければ「SSI」という書き方もあります。
SSIでのインクルード記述方法
<!--#include file="/header.html" -->
headタグ内 JSファイルのリンクやOGP設定にも便利
あとからJSファイルをリンクさせる場合や、Googleアナリティクスのコード・OGP情報等を挿入するときにもインクルードは威力抜群です。
<head>内にファイルを1つ、js.php などインクルードしておくと、あとからでも簡単にjsを追加することができます。
<?php include($_SERVER['DOCUMENT_ROOT']."/js.php"); ?> </head>
Googleアナリティクスのタグを外部ファイル化して、インクルードさせる
GAの長いタグを全ページにベタ書きするのではなく、外部ファイル化させてインクルードさせましょう。
関連リンク：Googleアナリティクスの計測タグを、サイト全体に一気に入れる方法（一括置換）
DreamWeaverのテンプレート機能は？
DWのテンプレート機能でも同様のことが実現可能ですが、おすすめしません。
使ってみればわかりますが、全ページ更新がやや簡素に行えるだけの機能で、結局は全ページアップロードしなければならず、つまり、たいへん面倒です。
個人的な感想ですが、挙動もやや不安定な感じがします。（更新されないページがある、など）
インクルードは初心者Webデザイナーやhtmlコーダーにおすすめなテクニックです
インクルードを使いこなせれば、更新管理において、Web制作が捗ること間違いなしです。
ヘッダーやフッターを、ページごと開いて修正して大変な思いをしていた方は、ぜひお試し下さい。
ちなみに私がインクルードを知ったのは、この仕事についてから5−6年経過してからです。早くから知っておきたかったと心から思います。
コメント