Hope is a Dream. Dream is a Hope.

非公開ブログは再開しました。

トップ > 数値計算 > PHPを使ってHTMLの要素を共通化する方法 | Web初心者メモ

PHPを使ってHTMLの要素を共通化する方法 | Web初心者メモ

数値計算 PHP WEB

HTMLを使ってHPを作っている時

ヘッダー部分や、ナビバー、サイドバーなど 各ページで共通で使うものをまとめたりしたくありませんか？

現在、HPの整理を頼まれていて、 すべてHTMLで作られたHPの要素をPHPを使って共通化しようとしているので、 メモも兼ねて紹介です。

まず、今回改造するHPを宣伝がてらしょうかさせてください。

披露宴、余興スライドショーが20,000円。お急ぎプランもあります。

f:id:hope_is_dream:20141016194459p:plain

このヘッダー部分とサイドバー部分を共通化します。

PHPを使ったHTML要素の共通化

まずは、、

phpを使う前に、htmlファイルでは動きませんので、

PHPに変更します。

(んん？)

大丈夫です。PHPを使ったことがない方でも大丈夫です。安心してください。

1. htmlファイルをphpへ変更する。

ファイルの拡張子を.htmlから.phpに変更します。

index.html -> index.php

そして新しく作ったファイルindex.phpが動作するか確認してください。

もしうまく動作しなかった場合

  • サーバーのパーミッションの設定
    • お名前.comだと700
    • fc2.comだと***
  • 404エラー
    • .htaccessの設定を確認してみてください。
    • index.htmlへリンクがされている場合はindex.phpへ変更してください。

さて。

動きましたでしょうか？

もし成功であれば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.

いまさらながらEmmetを使ってみる。 - Hope is a Dream. Dream is a Hope.

Kaori-sanにお願いしてみる。 - Hope is a Dream. Dream is a Hope.