SSIで外部ファイルを読み込み共通部分を管理する方法

HTMLで作成したサイトの共通部分をSSIで管理している。
ところが、特定のディレクトリーでSSIの読み込みができない事態が発生。
半日以上、あれこれ調べてやってみたか分からない。
ところが、翌日、ひょんなことから解決した。
SSIとは?SSIで外部ファイルを読み込み共通部分を管理する方法、SSIを読み込まない原因と対処方法について。

SSIとは?

SSI(Server Side include)とは共通部分を外部ファイル化して読み込む方法である。
WordPress(ワードプレス)ならPost Snippets等のプラグインがあるので、SSIは必要がないが、プラグインを実装できないHTMLサイトにおいては、共通部分の管理に重宝する。

では、この「共通部分」とは何か?

アフィリエイト広告を例にとる。
Aというアフィリエイト広告をサイトの複数ページに記載する場合、各ページに広告タグを直接貼る方法が1つある。

しかし、そのアフィリエイト広告を終了した場合、複数のページを修正しなければならない。

どのページにどの広告を貼ったかを管理しておく必要があり、面倒。

その点、共通部分が外部ファイル化しておくと、外部ファイルを1つ修正するだけで、複数ページに反映される。

とても便利な代物だ。

SSIの具体的な方法

SSIというと、ファイルの拡張子をshtml(又はshtm)するのが一般的だが、拡張子が変わると色々と不都合だ。

というのは、そのページへのリンクがhtmlからshtmlに変わる事で、ページが存在しなくなる。

SSIには、htmlのまま使える方法があるのでこれを紹介する。

方法は簡単だ。

①外部ファイル「abc.html」を準備する。
アフィリエイト広告の場合、広告タグだ。
広告タグをそのまま、「abc.html」(例)というファイルに貼り付ける。
ファイル名は任意だ。

②共有部分を表示させたいページに以下のコメントを挿入する。
<!–#INCLUDE VIRTUAL=”/Aディレクトリ/ssi/abc.html”–>
※「<>」の実際の記述は半角の「<>」

上記のサイトの構造はこうだ。
ドメイン下に複数のディレクトリ(カテゴリー)がある。
ここではAというディレクトリを想定。
その下に「ssi」というディレクトリ(フォルダ)を作成。
「ssi」というフォルダに外部ファイル「abc.html」がある。

「ssi」というフォルダを設けなくても機能するのだが、外部ファイルがどこにあるかを明確にする為、私は「ssi」フォルダを設けている。

尚、「INCLUDE VIRTUAL」は小文字の「nclude virtual」でも構わない。

コメントの書き方は実は2種類ある。

i)絶対バス:上記の方法
<!–#INCLUDE VIRTUAL=”/Aディレクトリ/ssi/abc.html”–>
※「<>」の実際の記述は半角の「<>」

さらに、階層表示で外部ファイルを指定する方法もある。
「./」「../」といった表示を用いるものだ。

ii)同じディレクトリやサブフォルダに外部ファイルがある場合は以下のコメントになる。
<!–#include file=”abc.html” –>
<!–#include file=”ssi/abc.html” –>
※「<>」の実際の記述は半角の「<>」

③Aディレクトリ直下、「ssi」フォルダと同階層に「.htaccess」を置く。
ファイルには以下のソースを記述。
AddHandler server-parsed .html

これで外部ファイルを読み込み表示するはず。

ところが、私の所有するサイトで特定のディレクトリで外部ファイルの読み込みができないという事態が発生。

外部ファイルの読み込みができていない時の表示

共有部分が表示しない場合、2つのケースがある。

①全く何も表示しない。

②エラー表示
[an error occurred while processing this directive]

②の場合は、外部ファイルの中身を記述していない場合が考えられる。

また、外部ファイルを読み込むソースは<!– –>といったコメント記述の方法を取るのだが、「–」の個所が「-」となっているとエラーメッセージが出る。
※「<>」の実際の記述は半角の「<>」

さて、今回は①のケース。
コメントの書き方に問題がないかをチェック。
また、正しく表示している別のページのソースを共有部分にコピペ。
しかし、表示せず。

ひょっとして、プロパティの数字が異なるのか?
しかし、表示しているページもそうでないページも同じだった。

半日あれこれやったか分からず。
こういった時は翌日以降に再度やると解決できることが多い。

そして、翌日、特定のディレクトリだけ表示しないということは「.htaccess」の記述がおかしいのではないかと思い立った。
そこで調べてみた。

外部ファイルの読み込みができない原因と対処方法

きちんと表示しているディレクトリーの「.htaccess」の記述は以下の通り。
AddHandler server-parsed .html・・・①

それに対して、表示していないディレクトリーの「.htaccess」の記述は以下だった。
AddType text/x-server-parsed-html .htm・・・②

そこで、②を①に修正。
どうか?

表示した。

ところが、カテゴリーページでエラーメッセージが。
ソースを見ると、コメントの書き方が以下になっていた。
<!–#include file=”/Aディレクトリ/ssi/abc.html”–>
※「<>」の実際の記述は半角の「<>」

これは前日、あれこれやった時に「INCLUDE VIRTUAL」を「include file」と書き直した物。

元の「INCLUDE VIRTUAL」に戻すときちんと表示した。

これにて一件落着だ。

HTMLの関連記事

このページの先頭へ