コーディング

htmlの共通部分をパーツに分けてPHPで読み込んだ話

  • このエントリーをはてなブックマークに追加
htmlの共通部分をパーツに分けてPHPで読み込んだ話
ご無沙汰しております制作の中村です。
私用で1週間ほどお休みを頂いたところ猛烈に風邪を引いてしまい、その風邪が旦那にうつり、形を変えて再び私に戻ってくるという仕打ちを受けました。
季節の変わり目、気合入れていかないと体も心もボロボロになってしまいますね(´・ω・`)!
あっという間に年末だし!
おせちの時期だし!今年はちゃんと作ろうかな!
おせちすきです。自分でつくるおせちが好きです。
好きなもの(海老)を好きなだけ!詰められる!!
そう、おせちならね!!
味付けも思いのまま!すばらしぃ。
嫁入り前におせちレシピは伝授してもらっていてよかったなぁとしみじみ思います。

この間ようやくhtmlサイトの共通部分をパーツ分けする方法を試しましたので備忘録にこちらに残しておきます( ˘ω˘ )
パーツ分けする方法としてjsを使う方法もあります。
最初はそっちを試したのですが、読み込んだ部分のソースが表示されないのと、読み込んだ部分に別のjsが当たらないという状態になってしまったので泣く泣くPHPで読み込む方法に切り替えました。知ってたらやらなかった。そう、知らないから、学べるのだ、にんげん。
以下はさくらインターネットでの手順(サーバにより違うみたいです)です。

①php.cgi作成

上記の名前を付けたファイルをwww直下に作成。
中身は以下をコピペ
#!/bin/sh
exec /usr/local/bin/php-cgi

②.htaccessに以下を加筆

Action myphp-script /php.cgi
AddHandler myphp-script .php .html
↑htmlをPHPとして読み込んでよ!というおまじないのようです。
この界隈(IT系)、「おまじない」と言えば何でも片付く風潮。
↑本番環境で「test」等のディレクトリを作成する場合はtestの中にhtaccessを作成し上記を記述しないとうまく動きませんでした。
(なぜか本番階層が真っ白けになっちゃった)
②共通部分をパーツ化する
共通する部分だけを分割「header.html」「footer.html」等ファイル名を付けて、抜き出して保存。
(incとか適当に名前つけたディレクトリを作成して突っ込んでおくと後々管理が楽かも)
例)
header.html
<header>
<h1>○○株式会社</h1>
<p>・・・</p>
</header>

③該当ファイルの該当箇所でパーツを読み込む

読み込む箇所に以下を記述
<?php include (‘header.html’); ?>
(incディレクトリを作成した場合は<?php include (‘inc/header.html’); ?>)
例)
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>test</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>
<body>
    <?php include (‘header.html’); ?>
</body>
</html>
■ファイル参照させる際
・共通部分のリンクや画像への参照
<?php $Path = “../”; include (‘../footer.html’); ?>
・画像の参照
<img src=”<?php print $Path; ?>test.png” width=”” height=”” alt=””>
↑$Pathって書くと「../」が省略できますよ、という感じだと思います。
そのまま../test.pngって書いてもちゃんと表示してました。
これでヘッダーにある○○株式会社を株式会社○○に変更するよ!って時も一つだけファイルを触れば良いので楽ですね!
  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
お問い合わせフォーム

お電話はコチラから↓
TEL:03-5363-2191

お問い合わせフォームへ