ネットと副業

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

日記

《ホームページ制作》共通部分を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

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

関連記事

no image

〈つづき〉Instagramの自分フィードをブログやホームページに設置する方法〈はてぶの場合〉

Instagramの自分のフィードをブログとかホームページにのっけたくないですか? Instagramの自分のフイードを取得するには、「SnapWidget」を使うと便利です。SnapWidgetから …

ヘンリー・フォードの諦めない気持ち

フォードという自動車メーカーをご存知でしょうか。 フォード社は1903年に、ヘンリー・フォードという人が創業しまし、2017年の売上高は17兆5,000億円で、世界自動車メーカー売上4位のアメリカの大 …

no image

Yahooのトップ画面のFlashディスプレイ広告がクリック再生式に。いよいよFlash終焉

かのスティーブジョブズさんが、Flashに三行半をつきつけてから、早5年が経ちました。 ブラウザがFlashへの対応を変更 過去、ちょっとでも動きがあったりリッチコンテンツだったりは、Flashを使っ …

no image

音楽聞き取りアプリShazamで調べた曲を振り返って整理

「だからなんだ」と言われればそれまでの内容ですが、音楽のご趣味が皆様のお口にあいましたら光栄です。 なにげなくもってるけどたまにしか使わないiPhoneアプリ、Shazam。Shazamっつうアプリは …

no image

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

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