PHPを使ってHTMLの要素を共通化する方法 | Web初心者メモ
HTMLを使ってHPを作っている時
ヘッダー部分や、ナビバー、サイドバーなど 各ページで共通で使うものをまとめたりしたくありませんか?
現在、HPの整理を頼まれていて、 すべてHTMLで作られたHPの要素をPHPを使って共通化しようとしているので、 メモも兼ねて紹介です。
まず、今回改造するHPを宣伝がてらしょうかさせてください。
披露宴、余興スライドショーが20,000円。お急ぎプランもあります。
このヘッダー部分とサイドバー部分を共通化します。
PHPを使ったHTML要素の共通化
まずは、、
phpを使う前に、htmlファイルでは動きませんので、
PHPに変更します。
(んん?)
大丈夫です。PHPを使ったことがない方でも大丈夫です。安心してください。
1. htmlファイルをphpへ変更する。
index.html -> index.php
そして新しく作ったファイルindex.phpが動作するか確認してください。
もしうまく動作しなかった場合
- サーバーのパーミッションの設定
- お名前.comだと700
- fc2.comだと***
- 404エラー
さて。
動きましたでしょうか?
もし成功であればindex.htmlと同じ状態となっていると思います。
php内部に書かれたHTML要素は.htmlと同様に出力されます。
PHPの処理を書く場合は、下のように<?php ?>
で囲むことでPHPを書けます。
<?php // 処理を書く // (<?php ?>内部では、先ほどのようにHTML要素を書くとエラーになってしまいますので注意してください。) ?> <p>(ここならHTMLを描いてもOK)</p> 基本的に<?php ?>の外はHTMLと同じ扱い。
さてそれでは、共通部分を呼び出したいと思います。 (ここらへんでバックアップを取っておいてください。念のため。。)
2. 外部PHPファイル(共通要素)の読み込み
それでは共通化したい部分を別のphpファイルとして保存しましょう。
ここでは、index.php内のヘッダー部分を外部ファイルとして、共通に使用したいと思います。
// index.php <!HTML> <body> <!-- 省略 --> <!-- 共通化する部分 --> <!-- header--> <div id="header"> <h1>披露宴や結婚式の余興スライドショーを制作しています。</h1> <a href="index.html"><img src="images/logo.gif" alt="" width="259" height="164" id="logo" /></a> <p class="eigyou"> WeddingMovie<br> 披露宴、結婚式の生い立ちムービー、余興スライドショーの制作<br> 営業時間: 10:00〜21:00<br> 休業日: 土日祝日 </div> <!-- header--> <!-- 共通化する部分 (ここまで) --> <!-- 省略 --> </body> </html>
それでは
ヘッダー部をheader.phpとして保存します。
// header.php // 共通ヘッダー <!--/header--> <div id="header"> <h1>披露宴や結婚式の余興スライドショーを制作しています。</h1> <a href="index.html"><img src="images/logo.gif" alt="" width="259" height="164" id="logo" /></a> <p class="eigyou"> WeddingMovie<br> 披露宴、結婚式の生い立ちムービー、余興スライドショーの制作<br> 営業時間: 10:00〜21:00<br> 休業日: 土日祝日 </div> <!--/header-->
index.php内のヘッダーの変わりにheader.phpを読み込みます。
// index.php // 共通部分(header)はinclude(header.php)で読み込む。 <!HTML> <body> <!-- 省略 --> <!-- 共通化する部分 --> <!-- header--> <?php include(header.php); ?> <!-- header--> <!-- 共通化する部分 (ここまで) --> <!-- 省略 --> </body> </html> </HTML
以上です!!
簡単!
今後はheader.phpを変更することで全体に反映されます!!
あとは、他のHTMLにも同じコトをしていくと良いと思います。
それでは。
HTMLをつかってiphoneのカメラを起動し、撮影した画像をサーバに保存したいなら。 - Hope is a Dream. Dream is a Hope.
HTMLをつかってiphoneのカメラを起動し、撮影した画像をサーバに保存できた。 - Hope is a Dream. Dream is a Hope.