HTMLサイトで全ページを一括管理するインクルード(include)の方法!

include

HTMLでサイト作成している時に役立つ、サイドバー、ヘッダー、フッターを全ページを一括管理す方法。インクルードの使い方とは!

サイドバー、ヘッダー、フッターを一括管理!

私が初めて自作でサイト作成した時に、かなり面倒だと思ったのが、ヘッダー、フッター、サイドバーなど全ページ同じ内容をコピペする編集する作業でした。

ASP「サイドバーにある表記を修正してください\(^o^)/」

まじかよ・・・

何十ページも同じ作業の繰り返しが続きます。

「あ、・・・リンクタグ間違えてる・・・」途中で気づきます。

振り出しへ戻る

何度も何度も何度も何度もコピペ作業を繰り返していると、頭がおかしくなってきそうです・・・

そんな時に役立つのがインクルード(include)です。

インクルードでサイトを管理すれば1ページの編集だけで全てのページに反映されるので、編集や修正がとても楽になりますよ。

インクルードのやり方

①一括管理したい箇所のhtmlファイルを作る

まずはヘッダーやサイドバー等、一括で管理したい箇所だけのファイルを作ります。

このサイトで説明するとこんな感じになります。

サイドバー

サイドバーのタグ

ヘッダー

ヘッダーのタグ

フッター

フッターのタグ

HTML内の上の方にある<head>から</head>までの記述がないと、文字化けしたりレイアウトが崩れたりしますが、サーバーにアップロードすればちゃんと表示されます。

<head></head>内にある記述は、cssやjs等を参照して反映するという意味なので、それが無くなるとレイアウトが崩れるというわけです。

しかし、なくても大丈夫です。サーバーへアップロードした際はちゃんと反映されますので!安心してください。

②各ページから一括管理したい箇所を削除する&タグの挿入

トップページや下層ページなど全てのページからサイドバーやヘッダーなどの一括管理したい箇所を切り取ります。

切り取った場所に</!--#include virtual="○○.html" -->のタグを挿入します。

○○には、①で作ったファイルの名前を入れて下さい。

③.htaccess(ドットエイチティーアクセス)に記述を加える

Addhandler server-parsed html

上記の記述を.htaccess(ドットエイチティーアクセス)内に加えることで、インクルードが機能するようになります。

「.htaccessってなんだよ!そんなのどこにもないぞ!どうすりゃいいんだ!」

ごもっともな意見ですね。

.htaccess(ドットエイチティーアクセス)とは、認証・転送・制限などを管理する特殊なファイルです。

とは言え、ただのテキストファイルなのでメモ帳で作る事ができます。

メモ帳を開いて、保存するときに".htaccess"と名前を変更して保存するだけです。

ここで注意してほしいのが""←こいつ(ダブルクオーテーション)の存在です。

ダブルクオーテーションを付けて保存しないと、「.htaccess.txt」というファイルに変換されてしまうので、必ずダブルクオーテーションをつけて保存してください。

スポンサードリンク

アップロード

準備が整ったら、編集したファイルや新たに作ったファイルをサーバーへアップロードしてみて下さい。

成功していれば、ヘッダーやフッターなどが問題なく表示されているはずです。

失敗していると・・・

[an error occurred while processing this directive]と表示されて、本来表示されるべき内容が表示されません。

一応インクルードする時によくある失敗例をあげておきますと・・・

●インクルード元(①で作ったファイル)の名前とインクルード先(②で挿入した</!--#include virtual="○○.html" -->)の〇〇が食い違っている。

●.htaccess内に(Addhandler server-parsed html)を入れ忘れている。

●.htaccessをアップロードしていない。

●インクルード元のファイル(①で作ったファイル)をアップロードしていない

スポンサードリンク

まとめ

以上の内容を実施すれば、面倒なサイドバーやヘッダーなどのコピペを繰り返す作業から解放されます。

編集や修正をしたい場合は①で作ったファイルを1度の編集だけで、アップロードすればすべてのページに反映されます。

ちなみにページによってパターンを変えたい場合は①で複数のパターンを作っておけば、後は「各ページでどれを読み込ませるのか」だけなので、バリエーションを増やすことも可能です。

そして最後に、「このページだけは特殊な仕様にしたい(広告を入れたい等)」という場合は、インクルードタグを挿入せずに普通に作れば、インクルードは反映されないので個別のサイドバーやヘッダーを作る事も可能です。

関連記事

Comment Box is loading comments...

ページの先頭へ