目指せページ遷移で音楽が途切れないサイト。まずはpjax対応。

目指せ、ページ遷移で音楽が途切れないサイト！と思い立ち、手始めにpjaxに対応してみました。

表示が変な箇所があるかもしれませんので、その場合はご連絡いただけるとありがたいです。
どうぞよろしくお願いします。

pjaxとは？

pjaxは「PushState+Ajax」。
ページ遷移履歴を残したまま(PushState)非同期通信(Ajax)ができるという方法です。
これを使用することで、残したい部分はそのままに、変更したい部分だけを書き換えて、かつURLも書き換えることができます。
ですので、ヘッダやサイドバーに音楽プレイヤーを埋め込んでおけば、ページ遷移しても音楽が途切れないサイトが作れます。

実装時の参考サイト様はこちら。

WordPressにPjaxを実装してみる | かくれざとう

WordPressでPjaxの実装と、よくあるトラブルの解決方法

どうもありがとうございます！

実装時に詰まったあれこれ

対象外の指定

外部サイトを開くときにエラーが出たり、mp3やzipファイルのダウンロードができなかったりする現象が発生。
→

メールフォームがちゃんと動かない

メールフォームの送信ボタンを押すとundefinedなページに遷移される現象が発生。
→e.preventDefault()を呼ばなくてよいパターンのときに呼んでしまっていたのが原因の模様。呼ばれない場合単純にreturnするようにしました。

[javascript]
// Pjaxイベント設定
jQuery(document).on(‘click’, "a", function(e) {
var nextUrl = jQuery(this).attr(‘href’); //リンクのURLを変数に格納
if(nextUrl != null && nextUrl != ""){
// 外部リンク除外
if(nextUrl.indexOf("otowabi.com") < 0){
return;
}
// ファイルダウンロード除外
if(nextUrl.match(/mp3$/) || nextUrl.match(/ogg$/) || nextUrl.match(/zip$/)
|| nextUrl.match(/pdf$/) || nextUrl.indexOf("ddownload=") >= 0){
return;
}
e.preventDefault(); //デフォルトの動作を中止
}else{
return;
}

jQuery("#main").animate({opacity:0}, ‘fast’, function(){ //入れ替えたい部分をフェードアウトさせる
// 以下略
});
});
[/javascript]

とりあえずこんな感じで動いております…。差し当たりの課題は楽曲検索がpjaxになってないところと、ソーシャルボタンの記事タイトルがちゃんと取れてないことです。
近々対応したいと思います！