- tips, サイト製作
- 2008/03/06
- コメント (0)
- Trackback (0)
CSS着せ替えテンプレートプロジェクトのテンプレートを使用すると、デザインがCSS1つで変えられるのでとても便利です。しかし変えられるのはデザイン情報だけで、サイト内容を変更することは出来ません。サイトのページを100ページ作った後に、
「あー、新しくブログを設置したいなぁ、メニューにBLOGっていう項目を増やしたいなぁ」
「リンクのページを更新したから、メニューのリンクの横にnewのアイコンを表示させたいなぁ」
と思ったら100ページすべてのメニューを書き換えなければなりません。そんなときに（タブンおそらくきっと）役立つ！PHPを使ってメニューを管理する方法です。CSSでデザイン情報を他ファイルで設定するように、メニューだけ分離して、他のファイルを使って設定します。CDPだけでなく、普通のhtmlサイトでも利用できます。
wordpressに移行する前は、わたしもこれを使ってメニューを管理していました。
まずはじめに
この方法はPHPを使用できるサーバーでのみ利用できます。わたしが使用しているロリポップ！
などの有料サーバーではほぼ使えると思いますが、NINJA TOOLSやFC2などの無料サーバーではPHPが利用できません。ご自分のサーバーがPHPを使えるかどうか確認してください。
また、手を加えるファイルは一応バックアップを取っておいてください。
管理人はPHPについて、素人に毛が生えたくらいの知識しかありません。それでもこの記事を書いているのは多くのCDP利用者がサイト管理を楽にできるようになってほしいことと、CDPの利用者が増えてほしいからです。間違えは遠慮なくご指摘ください。説明が意味不明ならコメントください。多くの方が使えるように改善していきます。
メニューを分離する・基本編
まず、CDPファイル（もしくは自分のサイト）のメニューだけを切り取り、メモ帳などのテキストエディタに貼り付けます。
<div id="MENU">
<h2>menu</h2>
<ul>
<li id="MENU01"><a href="index.html">index</a></li>
<li id="MENU02"><a href="sample1.html">sample1</a></li>
<li id="MENU03"><a href="sample2.html">sample2</a></li>
<li id="MENU04"><a href="sample3.html">sample3</a></li>
</ul>
</div>
<hr>
これから説明しやすいようにsampleページに番号を振り、class="menu-on"を削除しました。そうしたらこのファイルを「menu.txt」という名前で保存します。
次にhtmlファイルの、メニューを切り取り空白になっていた部分に、次の文を挿入します。
<?php require("menu.txt"); ?>
OKですか？そしたらこのファイルを保存しますが、そのまま保存してはいけません。PHPを使っているので、拡張子をhtmlからphpにしなくてはなりません。手を加える前がsample.htmlというファイルだったのなら、sample.phpという名前で保存してください。また、menu.txtと同じ階層（同じフォルダの中）に保存してください。
あとはファイルをサーバにアップして、●●●.php（あなたがつけた名前）にアクセスしてみてください。（拡張子をphpに変更せずhtmlのままで動かす方法はこちら）
基本はこれで終了です。menu.txtに手を加えれば、変更されたメニューがすべてのページに反映されることでしょう。
うまく出来ない場合
上のサンプルでは●●●.phpとmenu.txtが同じ階層に保存することを前提としています。
- http://sample.com/●●●.php
- http://sample.com/menu.txt
ふたつは同じフォルダの中にあり、つまりは階層が同じです。この場合なら上の方法でうまくいきます。しかし、
- http://sample.com/main/●●●.php
- http://sample.com/menu.txt
ではうまくいきません。●●●.phpがmainのフォルダに入っているからです。上記の場合は、以下のようにhtmlに挿入する文を変更します。
<?php require("../menu.txt"); ?>
『menu.txt』から『../menu.txt』と変更することにより、ひとつ前のファルダ（つまり、http://sample.com/main/からひとつフォルダをさかのぼったhttp://sample.com/）の中にあるmenu.txtを探してくれます。このように、●●●.phpから見て、menu.txtがどこにあるのかを指定してください。
class="menu-on"を指定する
cdpでは#MENU内で『class="menu-on"』というクラスを指定します。これにより現在自分がいるメニューを違う形で表示することが出来ます。次はこの指定をmenu.txtに加えていきましょう。ちょっとめんどくさいかもです。
まず、menu.txtファイルの、本来なら『class="menu-on"』が表示される場所に次のような指定を施していきます。
<div id="MENU">
<h2>menu</h2>
<ul>
<li id="MENU01"<?php print "$menuindex" ?>><a href="index.html">index</a></li>
<li id="MENU02"<?php print "$menusample1" ?>><a href="sample1.html">sample1</a></li>
<li id="MENU03"<?php print "$menusample2" ?>><a href="sample2.html">sample2</a></li>
<li id="MENU04"<?php print "$menusample3" ?>><a href="sample3.html">sample3</a></li>
</ul>
</div>
<hr>
見るからにめんどくさくてやる気をそぐ感じですが、ようは<li id="MENU01">の部分が<li id="MENU01"<?php print "$menu01" ?>>と変わっただけです。$menuindexや$menusample1の部分は名前がダブらないように、すべて違う指定をしてください（先頭に$は忘れずに）。
menu.txtの変更点はこれで終了です、保存してください。
次にあなたが先ほど作った●●●.phpを開きます。そうしたらファイルの一番上に
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
という文がありますね？それよりも上に、
<?php $menuindex= ' class="menu-on"' ?>
を追加します。$menuindexは先ほどmenu.txtで指定した名前です。$menuindex= ' class="menu-on"' なので、menu.txtが呼び出された時、
<li id="MENU01"<?php print "$menuindex" ?>><a href="index.html">index</a></li>
の<?php print "$menuindex" ?>の部分にclass="menu-on"が入り、
<li id="MENU01" class="menu-on"><a href="index.html">index</a></li>
と表示されることになります。そのほかの$menusample1や$menusample2についてはこのhtmlファイルでは指定していないので何も表示されません。当然ながら、$menusample1と指定すれば、id="MENU02"の後ろにclass="menu-on"が表示されます。・・・まぁ、読むより自分でやった方が早いと思うので、指定をほどこした●●●.phpを保存し、menu.txtと一緒にサーバーにアップしてみましょう。
拡張子htmlでphpを動かす方法
上記で説明した方法を使うと、ファイルを●●●.htmlから●●●.phpに変更しなければなりません。しかしメニュー以外にもリンクを張っている場合や、検索サイトに登録していると修正がとても面倒です。なので拡張子を変更せず、●●●.htmlのまま上記の方法を実行させます。
まずあなたが上で作成した●●●.phpを●●●.htmlという名前で保存しておいてください（二度手間ゴメン、上では分かりやすいようにphpで製作したので、慣れたらそのままhtmlで保存してね）。
.htaccessはサーバーなどにより使用できないことがあります（特に無料サーバー）。あなたのサーバーで使用できるかご確認ください。
また.htaccessはサーバーによって指定が異なる場合があります。以下の例文はわたしが使っているレンタルサーバー、ロリポップ！で問題なく動作しました。
面倒だけどオススメな方法
メモ帳に次の文をコピーします。
<Files index.html>
AddType application/x-httpd-php .html
</Files>
<Files sample1.html>
AddType application/x-httpd-php .html
</Files>
<Files sample2.html>
AddType application/x-httpd-php .html
</Files>
index.htmlの部分はあなたが作った、phpが書いてあるんだけどｈｔｍｌで動かしたいファイル名を指定します。この場合だと、index.html、samle1.html、sample2.htmlに対して、拡張子htmlのままで<?php ~?>などのphpコードが使えるように設定しています。もっと多くのファイルを指定したい場合は3行ずつのくぐりをコピペして、ファイル名を書き換えてください。
ではこのファイルを保存します。名前は.htaccessです（一番最初のドットを忘れないでね）。これ以外の名前はダメです。拡張子もいりません。.htaccessで保存し、●●●.htmlと共にサーバーにアップ、●●●.htmlにアクセスしてみてください。
楽だけどあまりオススメしない方法
メモ帳に次の文をコピーします。
AddType application/x-httpd-php .html
すべてのhtmlファイルに対して拡張子htmlのままで<?php ~?>などのphpコードが使えるように設定しています。
ではこのファイルを保存します。名前は.htaccessです（一番最初のドットを忘れないでね）。これ以外の名前はダメです。拡張子もいりません。.htaccessで保存し、●●●.htmlと共にサーバーにアップ、●●●.htmlにアクセスしてみてください。
前記してありますが、これは楽ですがあまりオススメな方法ではありません。この指定は.htaccessよりも下の階層すべてのhtmlファイルに影響を与えるからです。仮に上記の設定がしてある.htaccessを
http://sample.com/.htaccess
にアップしたのなら、
http://sample.com/diary/1999/12/31/oomisoka.html
というすっごい遠いファイルまで影響が出ます。oomisoka.htmlにPHPコードが埋め込まれているかチェックされるのです。あるなら・・・まぁ、いいですけど、そうでないのならこれはサーバーに負担がかかってしまいます。PHPコードがあるのか訪問者が訪れるたびにhtmlファイルがチェックされるのですから、サーバーにいらぬ仕事をさせてしまっています。個人のサイトのhtmlファイルの数は多くても数百でしょうから、一度の苦労でサーバーに迷惑をかけないのならと、めんどくさがらずにオススメな方法を使っていただけるとありがたいです。
メニューだけじゃ物足りない！徹底的に管理してやるぜ！（完全に蛇足）
・・・というあなたは、こんな風にhtmlファイルを書いてはいかがでしょう。
<?php $menusample1= ' class="menu-on"' ?>
<?php $title = "サイトタイトル！" ?>
<?php $pan = '<li>sample</li>' ?>
<?php require("top.txt"); ?>
<h2>サンプルペーーーージ！！！！</h2>
<div class="text">
<p>さんぷるるん。</p>
<ul class="modori">
<li><a href="#PAGETOP">TOP</a></li>
</ul>
</div>
<hr>
<?php require("bottom.txt"); ?>
ちなみにtop.txtはこんな感じ
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<title><?php print "$title" ?></title>
<link rel="stylesheet" type="text/css" href="csstemplate/style.css">
</head>
<body<?php print "$index" ?>>
<div id="PAGETOP">
<div id="HEADER">
<h1>サンプル</h1>
<ul id="PAN">
<li><a href="index.html">index</a></li>
<?php print "$pan" ?>
</ul>
</div>
<hr>
<div id="MENU">
<h2>menu</h2>
<ul>
<li id="MENU01"<?php print "$menuindex" ?>><a href="index.html">index</a></li>
<li id="MENU02"<?php print "$menusample1" ?>><a href="sample.html">sample</a></li>
<li id="MENU03"<?php print "$menusample2" ?>><a href="sample.html">sample</a></li>
<li id="MENU04"<?php print "$menusample3" ?>><a href="sample.html">sample</a></li>
</ul>
</div>
<hr>
<div id="KIZI">
ちなみにbottom.txtはこんな感じ
</div>
<div id="FOOTER">
<h2>連絡先</h2>
<ul>
<li id="FOOTER01"><a href="#PAGETOP">TOP</a></li>
<li id="FOOTER02"><address><a href="mai.html">mail</a></address></li>
<li id="FOOTER03"><address><a href="http://css-designplate.info/">CSS Designplate</a></address></li>
</ul>
</div>
</div>
</body>
</html>
・・・蛇足すぎますね。これなら#FOOTERの表示をすぐに変えられるので、著作権表示が必要な素材屋さんの素材も使えますが、ここまでやるくらいならブログツールに移行したほうがいいと思う・・・でも応用として何か使いたい人のサンプルになるかなーと思い載せました。
最後に
説明下手な文章、ここまで読んでくださってありがとうございます。
Popularity: 98% [?]
