サイト開発時やサイト運用時など効率を良くするために共通パーツ等をインクルードして対応することが多いです。ただし、サーバの仕様等によってインクルード方法を変えたりしなければいけません。
インクルードの方法として、
・.htaccess
・php
・ajax
の利用頻度が高いため、その方法をメモしておきます。
下記の例ではヘッダーを共通パーツとして、ヘッダーのソースコードのみが記述されているHTMLファイルを作成し、それをインクルードしています。
.htaccessの場合
まず前提条件として、「.htaccess」が利用可能なサーバであること。
.htaccessファイルを作成し下記を記述します。
Options +Includes
AddHandler server-parsed html次にインクルードしたいHTMLファイルに下記を記述します。
<!--#include virtual="/inc/header.html" -->
phpの場合
こちらも前提条件として、phpが利用可能なサーバであること。
インクルードしたいphpファイルの該当箇所に下記を記述します。
<?php
if(file_exists($_SERVER['DOCUMENT_ROOT']."/inc/header.php")){
include_once($_SERVER['DOCUMENT_ROOT']."/inc/header.php");
}
?>
ajaxの場合
こちらはjQueryを読み込んでおく必要があります。ajaxでjQueryを使わない方法もありますが、ここではjQueryを使った方法のみとなります。
共通のjsファイルに下記を記述します。
function writeHTML(url){
$.ajax({
url: url,
cache: false,
async: false,
success: function(html){
document.write(html);
}
});
}インクルードしたいHTMLファイルの該当箇所に下記を記述します。
<script type="text/javascript">writeHTML('/inc/header.html');</script>
まとめ
上記の他にもインクルード方法はあるかと思いますが、私はよくphpを使ってインクルードしています。
その理由としては、
・Wordpressを使う案件が多くphpが利用可能なサーバである
・Wordpressでも結局phpファイルになるので、phpで作ってしまおうと思う
・他のファイルを作成しなくて済む
などなど、手間が省けることがちょこちょことあるということです。
ヘッダーやフッター等共通パーツに変更が入った場合に修正するファイルが1ファイルで済むため、開発・運用がうんと楽になると思いますので参考になれば一度使ってみてください。
