SSI(Server Side Include)でホームページに新着情報を表示する方法

SSI(Server Side Include)でホームページ(Webサイトトップページ)に「すぐ使えるCMS」の新着情報(短い一覧)を表示する方法をご紹介します。

ホームページに新着情報を表示するSSI(Server Side Include)コマンド

ホームページに新着情報を表示するには、ホームページ(※)の新着情報を表示したい位置に、以下の SSI コマンドを追加して下さい。

※「ホームページ」は、元々あるサイトの /index.shtml などのファイルの事です。

コピー
<!--#include virtual="sugu/webdir/index_short.html" -->

青字の「sugu/webdir/index_short.html」の部分は書き出した「すぐ使えるCMS」の短い一覧までのパスを指定して下さい。

アップロード

編集したファイルを上書きアップロードして下さい。これで新着情報がひとまず表示されます。

表示がうまくいったら、引き続き 後述の『「すぐ使えるCMS」側の調整』を行って下さい。

新着情報が表示されない場合

SSIコマンド組み込み後も新着情報が表示されない場合は、以下の点を確認して下さい。

何も表示されない場合

SSIコマンドを追加したのにホームページに何も表示されない場合は、以下の点を確認して下さい。

  • 表示させたい記事が「すぐ使えるCMS」の管理画面から登録してあるか
  • 「短い一覧」に管理画面の確認用のリンクからアクセスできるか
  • 管理画面からのリンクで表示された「短い一覧」のURLと、SSI コマンドに指定したパスが同じファイルを指しているか
  • ホームページで SSI が有効になっているか

ホームページで SSI が有効になっているか分からない場合

最後の確認点である「ホームページで SSIが有効になっているか」が分からない場合、ご利用中のサーバのマニュアル等をご確認下さい。サーバによってはSSIの利用を許可していなかったり、使用前に追加の設定や拡張子の変更が必要な場合があります。

「an error occurred while processing this directive」というエラーが出る場合

新着情報を表示させたかった位置に「an error occurred while processing this directive」という表示が出る場合は、SSIコマンドの設定に何か問題がある可能性があります。下記のサポート情報をご覧の上、設定を修正して下さい。
SSI のエラー 「an error occurred while processing this directive」の原因と解決方法

「すぐ使えるCMS」側の調整

SSI の表示がうまくいったら、引き続き以下のように「すぐ使えるCMS」のファイルを編集して下さい。

1. templates/article/short_list.html の編集

templates/article/short_list.html を開き、<body> や <html> タグを削除してテンプレート変数「%_article_list_%」のみ残して上書き保存して下さい。これは、SSIであれば不要になるHTMLタグを削除する作業です。

templates/article/short_list.html 編集例(全体、編集後)

コピー
<!-- article list : generate from short_list.txt -->
%_article_list_%

2. templates/article/short_list.txt の編集

次に、templates/article/short_list.txt を編集します。

このファイルには、新着情報から詳細表示へのリンクやアップロードした画像の <img>タグ、ファイルへのリンクなどが記載されています。含まれている要素の href 属性と src属性に、「すぐ使えるCMS」を設置した書き出しディレクトリまでのパスを追加して下さい。

templates/article/short_list.txt 編集例

元からファイルに含まれる要素の種類と数、初期設定の href 属性や src属性も、製品やバージョンによって異なりますので、赤字の部分のみ追加して下さい。

詳細ページへのリンク例
コピー
<a href="/sugu/webdir/%_to_article_%">
コピー
<a href="/sugu/webdir/%_d_%.html">
全一覧ページへのリンク例
コピー
<a href="/sugu/webdir/%_to_index_%#e%_d_%">
コピー
<a href="/sugu/webdir/index.html#%_d_%">
画像タグ例
コピー
<a href="/sugu/webdir/%_d_%/%_imagename_escaped_1_%" title="拡大: %_imagetext_1_%">
<img src="/sugu/webdir/%_d_%/%_thumbnail_escaped_1_%" alt="%_imagetext_1_%"></a>
コピー
<img src="/sugu/webdir/%_d_%/%_imagename_escaped_1_%" alt="%_imagetext_1_%">

ファイルへのリンク例
コピー
<a href="/sugu/webdir/%_d_%/%_imagename_escaped_1_%">%_imagetext_1_%</a>

3. アップロード

変更したファイルをサーバの同じ位置に上書きアップロードして下さい。

  • templates/article/short_list.txt
  • templates/article/short_list.html

4. 再構築

管理画面の一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。最新のテンプレートを反映したファイルが書き出されます。

5. 確認

ブラウザのキャッシュをクリアしてから再読み込みし、表示が変わったことを確認して下さい。

関連記事

新着情報(短い一覧)の表示件数を変更する方法

基本のマニュアル 新着情報の表示
「すぐ使えるCMS」で書き出した新着情報を、初期設定の3件から変更する方法。ホームページのお知らせ欄等に表示する新着情報の件数を変更できます。
SSI(Server Side Include)を 拡張子 .html のままで使う方法。

SSI と iframe の比較

応用マニュアル CMSサイト設計
ホームページ(トップページ)に新着情報を表示する際に、SSI(Server Side Include)とインラインフレーム(<iframe>)はどちらがいいのかを考えます。

新着情報の表示に関する総合的なご案内

基本のマニュアル 新着情報の表示
ホームページ(トップページ)に新着情報(更新情報、News、お知らせ欄)を表示する方法。表示のための <iframe> や SSI、WordPress 用のコードサンプル、CSSの設定サンプルをご紹介します。

関連コンテンツ