共通メニュー簡単作成

PHPを使って共通部分を表示する

Webサイトの各ページにある共通のメニュー、このページでいうと左にあるメニュー、各ページに表示するのって面倒だと思いませんか?

↑これのことです。
2〜3ページならコピー&ペーストしようかと思いますが、何ページもあるとうんざりします。
1ページずつ新しく作っているときはそこまで面倒だとは思わなくても、一括して変更したいときはある程度のページができているので全てのページを変更するのは本当に大変です。経験がありますが、腱鞘炎になるかと思いました。
私と同じようになんとか簡単にできないものかと思っておられる方に、次の方法をお薦めします。この方法を使えば、メニューだけでなく、ヘッダタグやコピーライトなどの共通する部分にも応用できます。
メニューを変更するときも、1つのファイルを変更すれば全てのページに即時反映されます。便利です。もう腱鞘炎にならなくてすみます。

1.共通メニュー部分を抜き出す

まずは、htmlの中で、共通のメニューをブラウザに表示している部分を探します。Webページをテキストエディタで見てください。
このページの場合、

↑です。このファイル名が【sample.html】だとして、これ以降の話を進めます。
もし、文字化けして表示されたら、エディタを替えてみましょう。Windowsのメモ帳など、化ける確率大です。
有名どころでは、秀丸エディタがあります。 私はサクラエディタを使っています。
では、赤枠部分をコピーしましょう。そして、もう1つテキストエディタを立ち上げ、貼り付けて保存します。文字コードはWebページと同じにしてください。ファイル名は【left_menu.html】としておきます。
第1段階はこれで終了です。

2.共通メニューを取り込む

次に、元のページ【sample.html】に【left_menu.html】を取り込んで表示します。【sample.html】の中の先ほどコピーした部分を、
<?php include 'left_menu.html'; ?>
に変更して、保存します。

【left_menu.html】は先ほど作成したメニューを保存したファイル名にしてください。
【sample.html】と【left_menu.html】を異なるディレクトリにおくのなら、パスも変更してください。
これで第2段階は終了です。

3.ファイルの拡張子の設定

このままサーバーにアップロードしたのでは動きません。動かすには2つの方法があります。
  1. ファイルの拡張子を【php】にする。
    ファイルの拡張子を【html】や【htm】ではなく、【php】にします。今まで【sample.html】だったので、【sample.php】とします。
  2. サーバーの設定を変更する。
    【html】ファイルの中で、phpを動かすには、サーバーの設定を変える必要があるかもしれません。サーバーによって違うので、詳しくはレンタルサーバー会社に問い合わせてください。
    Apacheの場合、【httpd.conf】か【.htaccess】に
    【AddType application/x-httpd-php .php .html】
    と書き加えれば動くかもしれません。
都合のいい方でどうぞ。

4.アップロードしてテストする

最後に、サーバにアップロードしてきちんと表示できるかテストしてください。
動かないといけないので、テスト用のディレクトリを作ってそこでテストしましょう。
もし表示できないようであれば、ファイル名(大文字小文字は区別されます)、パス、文字コードが正しいかどうかもう一度チェックしてください。
全て正しいのに動かないようであれば、WebサーバーがPHPをサポートしているかもう一度確かめてください。

5.各ページの変更

【left_menu.html】と同じ内容を表示したい箇所に、
<?php include 'left_menu.html'; ?>
を貼り付ければ、各ページで同じメニューが表示されます。
メニューを変更したい場合、【left_menu.html】を書き換えれば、全てのページのメニューが変わります。

ちなみに、
<?php include 'left_menu.html'; ?>
の意味は、
PHP(プログラミング言語の1つ)を書き始めることを知らせる。
left_menu.htmlファイルの全てを読み込んで表示しなさい。
PHP終了。
ということです。

6.注意点

気をつけなければいけないのは、この方法は、xml形式では動かないことです。
<?xml version="1.0" encoding="EUC-JP"?>
があると、エラーにななります。【<?xml】と【<?php】を区別してくれればいいのですが、同じとみなすようです。【<?】でphpスクリプトとみなしてしまうようなのです。
このように、きちんとxml宣言を行っている場合、
<?xml version="1.0" encoding="EUC-JP"?>

<?php echo("<?xml version=\"1.0\" encoding=\"EUC-JP\"?>\n"); ?>
へ変更してください。【EUC-JP】はお使いの文字コードへ変更してください。

PHPを使うと、サーバーにアップロードしないと画面が確認できないから不便と思われるのであれば、ローカルマシンにPHPの環境を作ることもできます。Yahoo!やGoogleで、【PHP ローカル 環境】などで検索してみてください。
メニューくらいならローカルに環境を構築しなくても、そんなに不便ではないと思いますが。興味があればどうぞ。



SSIを使って共通部分を表示する

方法はPHPとほぼ同じです。
SSIを使うには、WWWサーバーがSSIをサポートしていて、かつSSIを許可している必要があります。セキュリティの関係で使用不可のサーバーもあります。

使うことができても、
拡張子を .shtml にしなければならない、
SSIを置くディレクトリが決まっている、
自分で .htaccess の設定を行わなければならない、
など、制約がある場合があります。どのような設定になっているかはサーバーによって異なるので、詳しくはレンタルサーバー会社にお問い合わせください。

1.共通メニュー部分を抜き出す

これはPHPの場合と全く同じです。

2.共通メニューを取り込む

次に、元のページ【sample.html】に【left_menu.html】を取り込んで表示します。【sample.html】の中の先ほどコピーした部分を、
<!--#include file="left_menu.html" -->
に変更して、保存します。
【left_menu.html】は先ほど作成したメニューを保存したファイル名にしてください。
【sample.html】と【left_menu.html】を異なるディレクトリにおくのなら、パスも変更してください。ただ、【file="〜"】には絶対パスが指定できないことがあります。その場合は、【virtual="〜"】にURLを指定します。
<!--#include virtual="http://www.sanmple.com/left_menu.html" -->

3.ファイルの拡張子の設定

phpの場合と同じで、このままサーバーにアップロードしたのでは動きません。動かすには2つの方法があります。
  1. ファイルの拡張子を【shtml】にする。
    ファイルの拡張子を【html】や【htm】ではなく、【shtml】にします。今まで【sample.html】だったので、【sample.shtml】とします。
  2. サーバーの設定を変更する。
    【html】ファイルの中で、SSIを動かすには、サーバーの設定を変える必要があるかもしれません。サーバーによって違うので、詳しくはレンタルサーバー会社に問い合わせてください。
    Apacheの場合、【.htaccess】に
    【AddHandler server-parsed html】

    【AddType text/x-server-parsed-html .html】
    のいずれかを書き加えれば動くかもしれません。
都合のいい方でどうぞ。

4.アップロードしてテストする

最後に、サーバにアップロードしてきちんと表示できるかテストしてください。

5.各ページの変更

【left_menu.html】と同じ内容を表示したい箇所に、
<!--#include file="left_menu.html" -->
を貼り付ければ、各ページで同じメニューが表示されます。

ちなみに、
<!--#include file="left_menu.html" -->
の意味は、PHPの場合と同じで、
left_menu.htmlファイルの全てを読み込んで表示しなさい。
ということです。

便利ツール
お役立ち情報・小技
読者に好かれるセールス
ネットビジネスのあれこれ
自分で行う無料SEO対策
ネットビジネスの確定申告
更新情報
オンラインマニュアル
連絡先