てくてくあるく

WordPress の テーマ とか プラグイン に ついて 勉強しています

Main Content

楽天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

WordPress の 公式ディレクトリ に プラグイン を 登録 してみた – No 4

詳細へ »

cakePHP 3 を 直接 触って 覚えてみることにした No.5

詳細へ »

ACF ( Advanced Custom Fields ) が 便利だから みんなにも使ってもらいたい!!

詳細へ »