XAMPPでSSIを使う

ローカル環境でSSIを使う機会があったので、XAMPPでSSIを使う方法を調べました。

サンプルコード

拡張子がshtmlの場合、特に設定しなくてもSSIを使えます。
例として、ヘッダーをSSIで読み込むようにしてみます。

includes/header.html

<header class="header">
	<p class="header_sitename">サイト名</p>
</header>

ヘッダーを読み込むファイルの拡張子をshtmlにします。

index.shtml

<!--#include file="includes/header.html" -->
<div class="contents">
	<p>コンテンツ</p>
</div>

ブラウザで確認すると、以下のようにヘッダー部分がインクルードされました。

index.shtml

<header class="header">
	<p class="header_sitename">サイト名</p>
</header>
<div class="contents">
	<p>コンテンツ</p>
</div>

拡張子がhtmlのファイルでSSIを使う場合、「C:\xampp\apache\conf」にあるhttpd.confを変更する必要があります。
Cドライブ直下以外にXAMPPをインストールしている場合、適宜パスを変更してください。

以下の部分を書き換えます。(文末に .htmlを追加。)

httpd.conf

AddType text/html .shtml
AddOutputFilter INCLUDES .shtml

↓以下に変更

AddType text/html .shtml .html
AddOutputFilter INCLUDES .shtml .html

これで変更は完了なので、先ほどのindex.shtmlをindex.htmlに変更して、Apacheを起動し直します。

index.html

<!--#include file="includes/header.html" -->
<div class="contents">
	<p>コンテンツ</p>
</div>

ブラウザで確認すると、htmlでもSSIが使用できていることを確認できました。

index.html

<header class="header">
	<p class="header_sitename">サイト名</p>
</header>
<div class="contents">
	<p>コンテンツ</p>
</div>

【参考サイト】

• xamppでinclude(SSI)を使う – Qiita