PC Bibo 6 top > ホームページ/ブログ全般 > 静的な普通の Web サイトで、メニューなどの共通パーツをモジュール化して挿入する

静的な普通の Web サイトで、メニューなどの共通パーツをモジュール化して挿入する

ブログではない普通の静的な Web サイトで各ページにメニューなどを設置すると、メニューを変更したい場合に大変です。そこで、ブログのようにメニューなどの共通部分をモジュール化して各ページに挿入し、モジュールを変更するだけですべてのページに反映させることができないか調べてみました。

php を使う方法と SSI を使う方法があるようです。どちらの場合もサーバーがサポートしている必要があります。チェックしてみたところ、私がレンタルしているさくらインターネットでは、php と SSI の両方をサポートしていることが判明しました。php を使う方法は若干ややこしそうだったので、SSI を使うことにしました。設定はいたって簡単でした。

1. サーバーの任意の場所に、インクルード(挿入)ファイル用のフォルダ(たとえば、inc など)を作成します。

2. .txt ファイルに、メニューなどのインクルードしたい部分の HTML を記述し、適当な名前を付けます(たとえば menu.txt)。

3. 作成した .txt ファイルの拡張子を .inc に変更して(たとえば、menu.inc)、2. で作成したフォルダにアップロードします。

4. 既存の html ファイルの拡張子を .html (または .htm)から .shtml(または .shtm)に変更します。

5. .shtml ファイルの任意の箇所(ファイルをインクルードしたい箇所)に以下の記述を挿入します(ルートに inc フォルダを作成し、そこに menu.inc ファイルをアップロードした場合)。

<!--#include virtual='/inc/menu.inc' -->

挿入するファイルは、.html ファイルでも、.txt ファイルでも OK のようですが、できれば .inc ファイルが好ましいとのこと。

これで、menu.inc ファイルを変更するだけで、すべてのページのメニューに変更が反映されるようになります。

実際に SSI インクルードを使って共通部分を挿入した私のサイトのページ例はこちら。左サイドバーの「カテゴリーリスト」とページ下部の各種ブックマークや「関連記事」などをインクルード(挿入)しています。

参考にしたサイト:
外部ファイルを取込む方法(PHPまたはSSIインクルード)


« ホームページ(ブログ)に「いいね!」ボタンを設置する | メイン(トップ)ページ | 水平線のスタイルを個別に指定する »


あとで読む




trackbacks

trackbackURL:

comments

comment form

(PC Bibo 6 にはじめてコメントされる場合、不適切なコメントを防止するため、掲載前に管理者が内容を確認しています。適切なコメントと判断した場合コメントは直ちに表示されますので、再度コメントを投稿する必要はありません。)