静的な普通の 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 ファイルをアップロードした場合)。
挿入するファイルは、.html ファイルでも、.txt ファイルでも OK のようですが、できれば .inc ファイルが好ましいとのこと。
これで、menu.inc ファイルを変更するだけで、すべてのページのメニューに変更が反映されるようになります。
実際に SSI インクルードを使って共通部分を挿入した私のサイトのページ例はこちら。左サイドバーの「カテゴリーリスト」とページ下部の各種ブックマークや「関連記事」などをインクルード(挿入)しています。
参考にしたサイト:
外部ファイルを取込む方法(PHPまたはSSIインクルード)
- カテゴリー: HP/ブログの作成・カスタマイズ > ホームページ/ブログ全般
« ホームページ(ブログ)に「いいね!」ボタンを設置する | メイン(トップ)ページ | 水平線のスタイルを個別に指定する »
ツイート | |||
関連記事
trackbacks
trackbackURL:
comments