HTMLインクルードを使用すると、サイトの管理を大幅に簡素化できます
任意のウェブサイトに移動し、ページ間を移動すると、それらのページのそれぞれがさまざまな方法で異なる可能性がありますが、他のページでも非常に似ていることをすぐに認識します。 ほとんどすべてのWebサイトには、サイトの各ページに繰り返し表示されるデザイン要素が含まれています。 すべてのページで見つかるサイト要素の例は、ロゴが置かれているヘッダー領域、ナビゲーション、およびフッター領域です。
サイト上の繰り返し要素は、ユーザーエクスペリエンスの一貫性を可能にします。 訪問者は、すべてのページ上でナビゲーションを見つける必要はありません。一度見つけたら、訪問したサイトの他のページにどこがあるかを知るためです。
Webデザインをより効率的にする方法
ウェブサイトの管理を担当する人物として、このような繰り返しの領域は難題です。 もしあなたがその地域の何かに変更を加える必要があれば？ たとえば、フッター（サイトの各ページにあります）に1年の著作権に関する声明が含まれている場合、その年が変更され、日付を編集する必要がある場合はどうなりますか？ そのセクションはすべてのページにあるので、変更するためにサイトのすべてのページを個別に編集する必要がありますか？
含まれているコンテンツは、この繰り返しの内容のためにサイトのすべてのページを編集する必要がなくなります。 代わりに、1つのファイルを編集するだけで、サイト全体が更新されます。
この機能をサイトに追加して複数のHTMLファイルを複数の方法で追加する方法をいくつか見てみましょう。
コンテンツ管理システムにおける反復コンテンツ
サイトでCMSを使用している場合は、特定のテンプレートを使用する可能性が高く、テーマはそのソフトウェアの一部です。 これらのテンプレートを最初からカスタムビルドしても、このフレームワークはまだこのフレームワークをページに活用しています。
したがって、これらのCMSテンプレートには、すべてのページに繰り返し表示されるサイトの領域が含まれます。 CMSのバックエンドにログインし、必要なテンプレートを編集するだけです。 そのテンプレートを使用するサイトのすべてのページが更新されます。
サイトのコンテンツ管理システムを持っていなくても、インクルードファイルを利用できます。 HTMLには、サイトのこれらのテンプレート領域を簡単に管理できるようにするためのインクルードが含まれています。
HTMLには何が含まれていますか？
インクルードはHTMLのセクションで、完全なHTMLドキュメントではありません。 代わりに、それは完全なウェブページプログラミングに挿入することができる別のページの一部です。 ほとんどのインクルードファイルは、Webサイトの複数のページで繰り返される上記の項目です。 例えば：
- ナビゲーション
- 著作権情報
- ヘッダー領域
- フッターエリア
これらの繰り返し領域をページに含めることには利点があります。 残念なことに、ファイルを挿入するプロセスは、HTMLだけで起こることではないため、インクルードファイルをWebページに追加するプログラムやスクリプトを用意する必要があります。
サーバーサイドインクルードの使用
SSIとも呼ばれるServer Side Includesは、Web開発者がHTMLドキュメントを他のページに「インクルード」できるようにするために開発されました。
基本的に、1つのドキュメントにあるスニペットは、ページがサーバーで実行され、Webブラウザに送信されるときに別のドキュメントに含まれます。
SSIはほとんどのWebサーバーに含まれていますが、有効にするには有効にする必要があります。 ご使用のサーバーがSSIをサポートしているかどうかわからない場合は、 ホスティングプロバイダにお問い合わせください。
SSIを使用してすべてのWebページにHTMLスニペットを含める方法の例を次に示します。
- サイトの共通要素のHTMLを別々のファイルとして保存します。 たとえば、ナビゲーションセクションはnavigation.htmlまたはnavigation.ssiとして保存されます。
- 次のSSIコードを使用して、HTMLドキュメントのコードを各ページに含めます（ ファイルのパスとファイル名を引用符で置き換えます ）。 {C}
- ファイルを含めるすべてのページにこのコードを追加します。
PHPインクルードの使用
PHPはサーバーレベルのスクリプト言語です。 これはさまざまなことを行うことができますが、よく使われる方法の1つは、SSIでカバーしたのと同じように、ページ内にHTMLドキュメントを含めることです。
SSIと同様に、PHPはサーバーレベルの技術です。 あなたのウェブサイトにPHPの機能があるかどうか不明な場合は、ホスティングプロバイダにお問い合わせください。
以下は、PHPが有効なWebページにHTMLのスニペットを含めるために使用できるシンプルなPHPスクリプトです：
- ナビゲーションなど、サイトの一般的な要素のHTMLを別々のファイルに保存します。 たとえば、ナビゲーションセクションはnavigation.htmlまたはnavigation.ssiとして保存されます。
- 次のPHPコードを使用して、HTMLを各ページに含めます（ ファイルのパスとファイル名を引用符で置き換えてください ）。 navigation.php "）;？>
- ファイルをインクルードするすべてのページに同じコードを追加します。
JavaScriptを含む
JavaScriptは、サイトのページにHTMLを含める別の方法です。 これは、サーバーレベルのプログラミングを必要としないという利点がありますが、もう少し複雑です.JavaScriptを使用できるブラウザではうまく動作します。
JavaScriptを使用してHTMLのスニペットを挿入する方法は次のとおりです。
- サイトの共通要素のHTMLをJavaScriptファイルに保存します。 このファイルに書き込まれたHTMLは、document.write関数を使用して画面に出力する必要があります。
- そのファイルをあなたのウェブサイトにアップロードします。
- JavaScriptファイルをページに含めるには、