jQuery hashchange eventを使ったテーマ。

Date : 2011.02.10

Category : Ajax ・ jQuery ・ WordPress Tag : hashchange

jQuery hashchange eventを使ったWordPressテーマを作成してみました。

デモサイトはコチラ

一応HashLogなんていうそのまんまな名前です。
Ver0.1というアルファバージョンです。一応CSS周りはIE7までOKのはずです。
WordPress3以上対応です。

制作の元ネタにでもして頂けたらと思います。

ダウンロードはこちらからどうぞ。
hashlog

これだけではちょっとあれなのでJS周りのソースを張っておきます。

<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.easing.1.3.js"></script>

<script type="text/javascript">
var blogUrl = "<?php bloginfo( 'url' ); ?>";
</script>

<script type="text/javascript">

//ハッシュ付にリダイレクトさせる。
if ( location.href != blogUrl+"/") {
 var index = location.href.indexOf(blogUrl+"/#",0);
  if(index < 0){
  var goHash = location.href.replace(blogUrl, '');
  location.href =blogUrl+ '#' + goHash;
 }
}

jQuery(function($){

 //hrefをハッシュ付に変更
 function changeHref(){
 $("#contentsArea a,#siteId a,#widgetArea a").each(function(){
  var setHref = $(this).attr("href").replace(blogUrl, '#');
  if(setHref.match(/^\//)){
   setHref = "#"+setHref;
  }

  $(this).attr({href:setHref});
 });
 }
 changeHref();

 //Ajaxで変更する部分
 var contentsArea = $("#contentsArea");
 contentsArea.css({height:0,opacity:0,marginBottom:0});

 var nowHash = "";
 $(window).hashchange(function() {
  var setHash = location.hash.replace('#', '');
   //for Front Page
   if(!setHash){
    setHash = "/?p=0";
   }
   //ページ内リンク（コメントの返信は除く）
   if(setHash.indexOf("#",0)>-1 && setHash.indexOf("respond",0)<0){
    var sel = setHash.match(/(#.+)$/);
    var target = $(sel[1]).offset().top;
    $('html,body').delay(100).animate({ scrollTop: target }, 200,"easeOutQuart");

   }else{

    //コンテンツの削除
    contentsArea.animate({height:0,opacity:0,marginBottom:0},200,function(){
      //ロード
      $(this).hide().load(setHash+" #contents",function(){
       //表示
       $(this).delay(200).show().animate({height:$(this).find("#contents").height(),opacity:"1",marginBottom:"36px"},200,"easeOutQuart",function(){
        changeHref();
        //コメントの返信だった場合の処理
        if(setHash.indexOf("respond",0)>-1){
         var respondOffset = $("#respond").offset().top;
         $('html,body').delay(100).animate({ scrollTop: respondOffset }, 200,"easeOutQuart");

        }

       });
      });
    });
   }
   nowHash = setHash;

 });

 //検索フォーム
 $("form").submit(function(){
  var s = $("#s").val();
  location.href = '/#/?s='+s;
  return false;

 });

$(window).hashchange(); 

});
</script>

という感じでWordPressとの連携をとっています。トップページの記事はパラメーターにp=0を入れて表示しています。page_idやp等に存在しない値を放り込むとトップページの内容を表示することを利用しています。
空白だといまいちうまくいきませんでしたので、こんなおかしなことをやっています。

indexOfとmatchとか色々混在していて見づらいソースですが、そこはご愛敬ということで、ご勘弁下さい。徐々に直していこうと思いますので。