PHPのインクルードはラーメンの具？静的HTMLでサイトを制作するときに覚えておいた方が良いこと

こんにちは。
あなたに寄り添うITサポーターヒロ60です。

人様のサイトの制作を任せていただけるようになってから、はや１年近く経とうとしています。

当然のことですが、まだまだ知らないことや分からないことだらけだと感じる日々です。

まぁ、１年なんて小学生だったら、一桁の足し算・引き算ができるようになったくらいで、ときどき先生を”お母さん”と呼ぶレベルですからね。

それまでは全くやったことのなかったWeb制作ですが、それでも１年前に比べると知識も確実に増えており、以前にはできなかったことでも、どうにかこうにかできるようになっているのは成長を実感します。

今回は自動車学校向けの入校管理システムのサイトをイチから作成させていただきました。

SignDS

その中で学んだことをアウトプットするのと同時に、同じ問題に直面している人の参考になればと思い、この記事を残しておきたいと思います。

制作背景

いつもはWordPressを使ってサイト制作を行うのですが、今回は事情により静的HTMLで作成をすることになりました。

HTMLコードを書いて、CSSで見た目を整えて・・・という行程は、いつもと変わりはないのですが、やはりすべてのページをそうやって作成しなければいけないので、多少手間はかかります。

特に共通して使用するパーツ（ヘッダーメニューやフッター）を、毎ページに入れるのは非常に効率が悪いです。

単純にコピペで済む話ではあるのですが、もし内容に変更があった場合は、毎回すべてのページでコピペが発生することになります。

修正漏れやコピペミスにもつながることなので、このようなサイトの作り方はやめた方が良いです。

対処方法

この問題に対処するために、PHPのinclude（インクルード）という関数を利用します。

共通部分を別のファイルとして作成しておくことで、それをincludeで呼び出して使用することができます。

これにより、元となるファイルを作成しておくだけで、すべてのページで同じ内容を表示させることができるようになります。

つまり、includeとはラーメンの具のようなものですね。

ラーメンの具には、チャーシュー、メンマ、味玉、ほうれん草など、毎回決まった具材を乗せますよね。

普通は具材は朝の仕込みなどの段階で別途用意しておいて、すばやく乗せられるように準備しておきます。

つまり、具材（ヘッダー）を別に用意しておくことで、ラーメン（Webページ）ができたら、すばやくそれを乗せる（表示）ことができるようになるわけです。

どうです？分かりづらいでしょう？

設定例

まずは、ファイルを分割し、拡張子をphpで保存する必要があります。

例えば、通常「index.html」にはヘッダー（head、header）もフッター（footer）も含めて作成します。

これを、ヘッダーは「header.php」に、フッターは「footer.php」に分けて保存します。

そして、「index.html」は「index.php」に変名し、ヘッダーを表示させたい場所に以下のように記述します。※ファイルの場所によって記述は変わります。

<?php include(dirname(__FILE__) . '/header.php'); ?>

これで、「header.php」のコードが読み込まれ、わざわざページごとにコードを書かなくても済み、修正があった時は「header.php」の内容を変更するだけです。
※上記のコードはヘッダーを表示させるすべてのページに必要です。

フッターについてはも同様に、表示させたい場所に

<?php include(dirname(__FILE__) . '/footer.php'); ?>

と記述するだけです。

注意

PHPを使うことになりますので、サイトを設置するサーバーでPHPが使えなかったり、includeの使用が制限されている場合は使用できないです。

所感

WordPressで作成するときには、このようなことをしなくても大体テーマ側でヘッダー、フッターを設定できるようになっているので、改めて便利だなぁと感じます。

ただ、こういったことが自分でできるようになるのは大切なことだと思いますし、サイト制作を仕事にするなら知識として知っておく必要はあると思います。

いつか、どこかの、誰かのために参考になれば幸いです。

突然ですが、サイト制作承っております。

ITサポートで培ったホスピタリティで、あなたに寄り添った対応をお約束します。

▶ サービス対応範囲　

・ホームページの作成
・WordPress対応（静的HTMLも可）
・CSSやJavaアニメーション
・ブログ、お知らせ機能
・お問い合わせフォーム
・スマホ、タブレット対応
・SEO内部対策
・サイト表示速度対策
・GoogleMap、各SNS連携
・画像選定：画像がない場合はフリー素材で対応いたします
・SSL化（対応しているサーバーのみ）

Webサイト制作サービス | IT支援企業 株式会社アスタWebサイト制作サービス

個人向けのブログの立ち上げなどもお手伝い可能ですので、お気軽にご相談ください。

＞ メッセージを送る