PHPとjQueryでヘッダーとフッダーを共通化

PHPとjQueryでヘッダーフッダーを共通化する

たくさんのhtmlファイルがページで共通になる部分は、その該当ファイルを部分化します。
それぞれをパーツをして扱って、修正する際もわかりやすく作業効率のUPにつながります。

PHPとjqueryで共通化していきます。(今回はヘッダーとフッダーを共通になるパーツ)

htmlの共通になる部分をインクルードする時は、htmlの共通化となる箇所をパーツ化していきます。
なので、今回はヘッダーとフッダーが対象となります。

見てわかる通り、ヘッダー要素は上部にフッダー要素は下部に配置してあります。
そしてそれぞれのページの内容が真ん中のセクション部分にくるようになります。
ヘッダーとフッダーの共通部分は新しくファイルを用意して、それぞれパーツをコーディングして作成します。

共通パーツをPHPを用いてインクルードで呼び出します。

include関数を使用して、元々ヘッダー要素/フッダー要素として記述していた部分にくるようになります。引数に共通パーツのパスを記述して、

PHPでインクルードするときにはinclude関数を使用します(以下参照) PHP DOCUMENTATION

共通パーツをjqueryを用いてインクルードで呼び出します。

jqueryはクライアント側でHTMLの共通部分を読み込むことがで切るので、PHPでインクルードするときのようにWebサーバーの環境を確認する必要はありません。
headでjqueryを読み込んでおくことを忘れないようにご注意ください。

まずHTMLの共通化させたい部分にid属性を記述してid名を指定します。

次に1番大切なJavaScriptの要素を直上にきすつして、共通パーツを要素とidを紐付けます。

アウトプットは　PHPのインクルードの機能と同じ結果になるはずです。

いかがだったでしょうか。
javascriptは今回HTML内に記述しましたが、別途ファイルを用意した方が管理はしやすいと思われます。