jQuery を 用いて ヘッダー や フッター の 共通パーツ を 読み込む

楽天GOLD や ヤフーショッピングトリプル では PHP が 使えないので ヘッダー や フッダー の 共通化 が 難しいのですよね…

なので jQuery で できないか ということで 調べてみました

調べてみると 単純に load を 使って 読み込んだるだけで リンク先 や 画像の参照先 の 事まで 考えられているものが 少なくて 自分の思っているものにたどり着くには 時間がかかりました…

多分 こういう事を 行いたいって人が 少数なのだと思いますが 決して ゼロ ではないと思いますので 簡単にですが ソース を 残しておこうと思います

---

get_template_part

---

いろいろな情報をもとに 作成したので もっと良いコードが 存在するかもしれませんが 今の最終型は こんな感じなりました

これは get_template_part という 新しい関数 の プロパティ を 追加 しています

(function( $ ) {
  $.fn.get_template_part = function( options ){
    
    // オプション
    options = $.extend({
      fileDir    : '.',
      fileName   : '',
      defaultDir : '/resources/template/'
    }, options);
    
    // オプションが無い場合
    if( ! options.fileName ) return true;
    
    var target = this;
    
    // データを取得後 置換
    $.ajax({
      type: 'get',
      url: options.fileDir + options.defaultDir + options.fileName + '.html',
      dataType: 'html',
      success: function( data ) {
        data = data.replace( /\{\$fileDir\}/g, options.fileDir );
        $(target).append(data);
      }
    });
    
  }
})( jQuery );

---

template

---

共通パーツ となる テンプレート は こんな感じです

<div class="container">
  <div class="clearfix">
    <h1>ヘッダーサンプル</h1>
  </div>
  <div class="clearfix">
    <nav>
      <ul>
        <li><a href="{$fileDir}/">トップ</a></li>
        <li><a href="{$fileDir}/parts/sample-1.html">サンプル1</a></li>
        <li><a href="{$fileDir}/parts/sample-2.html">サンプル1</a></li>
        <li><a href="https://www.google.co.jp/" target="_blank">Google</a></li>
      </ul>
    </nav>
  </div>
</div>

---

呼び出し

---

こちらで 対象の ファイル を 読み込みます

jQuery(function($){
  var fileDir = '.';
  $('#header').get_template_part({
    'fileDir'  : fileDir,
    'fileName' : 'header',
  });
  $('#footer').get_template_part({
    'fileDir'  : fileDir,
    'fileName' : 'footer',
  });
});

---

ざっくりと 説明しますと fileDir を ‘..’ とか ‘../..’ とかにして 自分の階層から見て root の index までの 階層を 書けば そこに defaultDir である ‘/resources/template/’ と fileName と ‘.html’ を くっつけて ajax で 取ってきます

その データ の {$fileDir} を fileDir に replace します

で 最後に append する と言うものですね

---

最後に

---

エラー処理 だとか 色々省いているので 安全ではないかもしれません

詳しい方 こうしたら良いとか 助言を ください

よろしくお願いします!!

---

jQueryでWEBサイトの共通部分をインクルードする方法(相対パスVer.もアリ) - ENUM blogを参考にさせていただきました。
http://enum-kabu.com/blog/post-1723/

プラグイン作成 · maeponを参考にさせていただきました。
https://gist.github.com/maepon/4754210