この記事では、ヘッダー、フッターを共通化するにあたりおすすめの方法をご紹介します。
この度webの制作案件で100ページ超の案件を受注し、全てのヘッダー、フッターをいちいち更新していては死ぬ未来が見えたので、どのような環境下でも機能するヘッダー、フッターの共通化方法を探し回りました。
方法としては、以下4つぐらいが候補として挙がりました。
- phpでincludeしてヘッダー、フッターパーツを読み込む
- JSのajaxとかでパーツを読み込んでくる
- Adobe Dreamweaverのテンプレート機能で読み込む
- Server Side Include(SSI)で読み込む
今回の私のクライアントさんは古いバージョンのJSをお使いになられていて、ajaxが環境的に動くか不安だったことに加えて、JSで吐き出されるヘッダー、フッターはSEO的に大丈夫か?という懸念からJSでの共通化は早々に選択肢から削除。
DreamweaverはAdobe必須で面倒、SSIはサーバー依存で若干不確定要素があり怖いということでphp includeの方法を採択しました。
(※厳密にはphp includeもサーバーのバージョンには影響されますが、軽微と判断)
他のweb制作会社のエンジニアさんもphp includeが無難な上、設定をしやすいと仰っていたので、よほどのことがない限りこの方法をデフォルトでいこうと思います。
php includeでヘッダー/フッターを共通化する準備
では、早速共通化の準備を進めていきましょう。
用意するファイルは4つ。
- htmlファイル(index.html)
- .htaccessファイル
- ヘッダーファイル(header.html)
- フッターファイル(footer.html)
をそれぞれ用意します。
index.htmlと.htaccessは同階層に配置し、includeしたいヘッダー、フッターファイルは別途フォルダを作って分けておきましょう。
私は/assets/_inc/内にいつも格納しています。
htmlファイル(index.html)の記述
まずは、html側の記述から。
includeしたい箇所に以下の記述をします。私の場合はincludeするファイルを/assets/_inc/内においているので、そのパスを指定しています。
<?php include(dirname(__FILE__).'/assets/_inc/header.html'); ?><?php include(dirname(__FILE__).'/assets/_inc/footer.html'); ?>
あれ?phpでhtmlこのままじゃincludeできないよ?と思われた方はさすがです!
後ほど.htaccessでその旨を記述するので、一旦このまま書いてください。
.htaccessファイルの記述
.htaccessに以下の記述を施します。
AddType application/x-httpd-php .php .htmlAddHandler application/x-httpd-php .php .html
これは、拡張子が.htmlのままでphpが動くように設定するための記述です。
通常であれば、htmlファイルに対してphpを指定してもエラーが起きて終了ですが、この2行を入れておくだけでhtmlファイルもphp includeできちゃいます。
クライアントさんでphpが混ざっているのを嫌う不思議な方も多いので、htmlにしておいてあげると親切かなという謎の配慮ができます。
ヘッダー、フッターファイルの記述
読み込みができているかチェックのために、ヘッダーファイルにはheaderと、フッターファイルにはfooterと書いて出力してみてください。
▼出力図(各ファイルincludeして出力)
こんな感じで出力されて入れば共通化完了です。
ローカルで、ページを立ち上げてもincludeできていないケースがあるみたいです。
なので、ローカルで確認する際はMAMP(php対応の仮想ローカルサーバー的なもの)とかで立ちあげるのが絶対にいいです。
設定も簡単なので、ぜひ。
MAMPでもphp includeできない時の対処法
MAMPで立ち上げたけど、一向にphp includeされないし共通化もできないという方はMAMP側に原因がある可能性が高いです。
MAMPの以下階層を直接編集して、php includeができるようにしましょう。
対象ファイル:/Applications/MAMP/conf/apache
1箇所目 /Applications/MAMP/conf/apache
▼編集箇所
#AddType text/html .shtml
#AddOutputFilter INCLUDES .shtml
▼編集後
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml .html .htm .php
2箇所目 /Applications/MAMP/conf/apache
▼編集箇所
<Directory />
Options Indexes FollowSymLinks
AllowOverride None
</Directory>
▼編集後
<Directory />
Options Indexes FollowSymLinks
AllowOverride All
AddType application/x-httpd-php .htm .html
</Directory>
おそらくこれでphp includeできるはずです。
それでも、うまくphp includeされない場合はMAMPを再起動したり、phpのバージョンをチェックしてみたりしてください。
そろそろ新しい技術を身に着けなきゃな…という方は思い切って働く環境を変えてみるのも良いかもしれません。
自身の学びたい言語やフレームワークを伝えることで、最適な企業を一緒に見つけてくれるTech Stars Agentに相談してみるのがおすすめです。
現役エンジニアのエージェントが多数所属しているので、深く相談できるのが嬉しいポイントです。