BlogWeb制作の小さなテクニック集

【初心者Webデザイナーにおすすめ】全ページのhtml 共通部分を一箇所にまとめる(htmlのインクルード / 外部ファイル化)

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>



サンプル(zip形式)ダウンロード

 

htmlで作っている場合

htmlであっても、htaccessに3行追記するだけで、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の長いタグを全ページにベタ書きするのではなく、外部ファイル化させてインクルードさせましょう。

 

DreamWeaverのテンプレート機能は?

DWのテンプレート機能でも同様のことが実現可能ですが、おすすめしません。
使ってみればわかりますが、全ページ更新がやや簡素に行えるだけの機能で、結局は全ページアップロードしなければならず、つまり、たいへん面倒です。
個人的な感想ですが、挙動もやや不安定な感じがします。(更新されないページがある、など)

インクルードは初心者Webデザイナーやhtmlコーダーにおすすめなテクニックです

インクルードを使いこなせれば、更新管理において、Web制作が捗ること間違いなしです。
ヘッダーやフッターを、ページごと開いて修正して大変な思いをしていた方は、ぜひお試し下さい。

ちなみに私がインクルードを知ったのは、この仕事についてから5−6年経過してからです。早くから知っておきたかったと心から思います。
 

FAQよく頂くご質問

お客様の疑問にお答えします。

Contactお問合せ

ご不明点はお気軽にお問合せ下さい。