カテゴリー: HTML

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

デモサイトはコチラ

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

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

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

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

[php]
<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>

[/php]

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

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