ネットと副業

副業が本業の収入を大きく超えたので会社やめました

日記

《ホームページ制作》共通部分をphpで読み込む

投稿日:

f:id:nekonkeo:20150506131237j:plain

「共通してる部分を全ページいちいちベタ書きコーディングするの!!?」

ホームページを制作していると、こういう悩みに必ずぶち当たります。メインのナビゲーションだったりフッターだったり、全部のページで同じ部分をベタ書きのhtmlにしておくのか…修正が入った場合、1ページ1ページ修正しないといかんのか!?

サイト全体のページ数が少なかったり、共通部分がページによって微妙に違う部分をもたせたかったりすると状況は違うかもしれませんが、後々の修正・更新を考えると、共通部分を別ファイルにしてリンクする方法の方がよかですよね。

 

わたくしは、共通部分をphpで読み込むことにしています。

〈共通部分の作成〉共通phpの作成

たとえば、お店のホームページで、トップページ以外に、「お店の紹介」「交通アクセス」「メニュー紹介」3ページがあるとします。どのページにもメインナビゲーションがあり、この3ページへのリンクを貼りたいです。

まず元になるメインナビゲーションの部分(共通にしたい部分)を下のようにつくります。

gista80da0cfaaa449817f7d

この共通部分であるメインナビゲーションだけ記述したファイルをphpファイルとして保存します。仮にファイル名をmainnavi.phpとしましょう。このとき、拡張子を.phpにするのをお忘れなく。

class指定だったり使うコードは任意でなんでもいいです、お好きなように。
しかし、画像やリンクのパスは「相対パス」ではなく「絶対パス」にしておくと、共通部分を設置するページの階層がバラバラになっても、リンク先がエラーにならずに安心です。たとえば「トップページ」と「お店の紹介」ページは階層が違ってて、ナビゲーションは1つのファイルにしたいので、それぞれのページに読み込んだときに、違う階層からリンクするので「相対パス」だと設置するページによってリンク先が変わっちゃうわけです。

共通部分を設置したいページへの呼び出し

共通部分を設置したいページに、上記で作成したphpファイルへのリンクを貼ります。設置したい箇所に以下のコードを記述します。

<?php include(“(共通ファイルまでのパス)/mainnavi.php“); ?>

設置したページもphpファイルにしないと動かないので、設置したページの拡張子もphpに変更します。

この作業を設置する全ページにおこないます。

設置する全部のページに作業が発生するのでメンドイかもしれませんが、最初にこれをやっておけば、共通部分に修正が発生した場合でも、phpファイル1つを修正するだけで全部のページに反映され、将来的に楽できるので設定しておいたほうがいいでしょう。

「いやいや、拡張子htmlのままがいいんですけど..」という方には、phpを読み込む方法でも、htmlのままいける手があるので、こちらをどうぞ。

www.aveit.biz

-日記

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

お金

お金を払う作業がめんどくさくなってきた

どちらかというと、既存のやり方から抜け出せない、頭固い方です。 クレジットカードや電子マネーも持ちつつも、ずっと現金主義だったのですが、2017年のここにきて、現金で支払うのがめんどくさくなってきま …

no image

フォルダ内にあるファイル名一覧をテキストにしたい!

何百枚とある写真のコンタクトシート的なものをHTMLでつくりたいということが発端でして。 写真のほんの一部です。。。。。。 JuiceBoxとか試したんですけど、無料版だと一度に50枚しか処理できない …

『億男』観て号泣してしまいました

億男見てきました。感動しました。 友人に「億男」になるなら見てこいとすすめられて観てきましたので、感じたことをまとめておきたいと思います。なるべくネタバレのないようにしますが、ネタバレが気になる方は読 …

リスクをとらないと大きく稼げないことがわかる図

昨年も美味しい儲けばなしにのっかって、騙された人が多数でたニュースが話題になりました。 「スマホで写真を撮るだけで、簡単に楽して月数万円儲かる」というようなふれこみでした。で、その儲けるためにシステム …

no image

TSUTAYAの映画ネットレンタルに申し込んだんですが、失敗でした。《解約編》

観ると決めたらすぐ観たいという思いがアダになりまして、ミスりました。 前回の… &lt;a href=”http://nekonkeo.hatenablog.com/entry/2 …