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

このサイトも、最近話題のPjaxを実装し動的なページ遷移を実現することができました。
実際にやってみて色々と壁にぶち当たったので、そこら辺の解決方法を挙げていきたいと思います。

WordPressでPjaxを実装する

はじめに、実際にPjaxを実装します。
便利なjQueryプラグインのご使用をおすすめ。

GitHub defunkt / jquery-pjax

ここからファイルをダウンロードします。
落としたデータの中にあるjquery.pjax.jsをテーマフォルダの任意の場所にコピーし、WordPressで読み込みます。

header.php

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.pjax.js"></script>

次にPjaxの設定をjavascriptに記述します。

javascript

$(document).on('click', "#header a, #sidebar a", function(e) {
 e.preventDefault(); //デフォルトの動作を中止
 var nextUrl = $(this).attr('href'); //リンクのURLを変数に格納
 
 // ↓入れ替えたい部分を一旦フェードアウトさせてからpjaxを実行する
 $("#main_content").animate({opacity:0}, 'fast', function(){
 $.pjax({
 url: nextUrl,
 container: '#main_content', //入れ替える部分
 fragment: '#main_content', //入れ替え先
 timeout: 20000 //タイムアウトするまでの時間
 });
 });
});
// ↓Pjax完了後フェードイン
$(document).on('pjax:complete', function() {
 $("#main_content").animate({opacity:1}, "normal");
});

現在のページのid=main_contentの中身と、リンク先のid=main_contentの中身が入れ替わります。
複数指定する場合は、カンマで区切って追加します。

これで一応Pjaxは動きますが、リンク先のソースを全て読み込んでからid=main_contentを抜き出してきますので、ヘッダーやフッターなど必要のない部分は読み込みをスキップさせようと思います。

single.phpなどに記述してあるget_headerget_footer()などの読み込みを条件分岐させます。

<?php
$pjax = !($_GET['_pjax']); //http-requestヘッダに_pjaxがあるか判別

//X-PJAXが無かったら通常の読み込みと判断してサイトのヘッダも読み込む
if ($pjax) {
    get_header();
}
?>
<div id="main_content">
 
コンテンツ
 
</div><!-- #main_content -->

<?php
//同じく通常の読み込みだったらサイドバーもフッターも読み込む
if ($pjax) {
    get_sidebar();
    get_footer();
}
?>

これでWordPressでスムーズにPjaxを実装することができるはずです!

トラブル1:ソーシャルボタンが表示されない

動的に読み込んだ部分にツイッターやFacebookなどのソーシャルボタンがあり、ページ遷移した際に表示されなくなる不具合が起きました。
調べてみると、これらはページが直接読み込まれた時に処理されるものなので、Pjaxイベントが終わったらもう一度処理してあげる必要がありました。

javascript

$(document).on('pjax:end', function() {
	gapi.plusone.go(); //Google+1ボタンの読み込み
    twttr.widgets.load(); //Twitterボタンの読み込み
    FB.XFBML.parse(); //Facebookのいいねボタン読み込み
    Hatena.Bookmark.BookmarkButton.setup(); //はてなブックマークボタン読み込み
});

pjax:endPjax処理が終了したときに発生するイベントです。
まだ未確認ですが、他のソーシャルボタンにも再読み込みの関数があるはず。。。

各ボタンの設置方法については公式ページをご確認ください。(下記リンク)

ツイートボタンの設置方法
Facebookいいねボタンの設置方法
Google+1ボタンの設置方法
はてなブックマークボタンの設置方法

Pjaxの実装には、こちらのサイトを参考にさせて頂きました。

WordPressにPjaxを実装してみる
pjaxとflagmentの使い方(静的サイトでも手軽にpjax!)

トラブル2:SyntaxHighlighterが動かない

こちらもソーシャルボタンと同様にページ読み込み後に処理されるので、動的に表示させたら正常に動いてくれません。
まず、WordPressプラグインで実装している場合、プラグインの設定画面で、「SyntaxHighlighterのバージョン」をVersion3.xに設定し、「すべてのブラシを読み込む」にチェックを入れる必要があります。
pjax01
次に、プラグインファイルの中身を見てみます。

pluginsフォルダのsyntaxhighlighterフォルダを確認

syntaxhighlighter
├ localization
├ syntaxhighlighter2
├┬ syntaxhighlighter3
│└ scripts ←ここにshAutoloader.jsが入っているはず
└ third-party-brushes

このshAutoloader.jsfooter.phpで読み込みます。

<?php wp_footer(); ?>
<script type="text/javascript" src="/wp/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shAutoloader.js"></script>
</body>
</html>

wp_footer();の直後shAutoloader.jsの読み込みを記述します。

Pjax処理後に再読み込みをしたいので、先程のjavascriptにさらに追記します。

$(document).on('pjax:end', function() {
	gapi.plusone.go(); //Google+1ボタンの読み込み
    twttr.widgets.load(); //Twitterボタンの読み込み
    FB.XFBML.parse(); //Facebookのいいねボタン読み込み
    Hatena.Bookmark.BookmarkButton.setup(); //はてなブックマークボタン読み込み
    SyntaxHighlighter.autoloader( // SyntaxHighlighterプラグイン
     "bash                      /wp/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushBash.js"
     ,"css                      /wp/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushCss.js"
     ,"php                      /wp/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPhp.js"
     ,"diff                     /wp/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushDiff.js"
     ,"html xml xhtml           /wp/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushXml.js"
     ,"js jscript javascript    /wp/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushJScript.js"
     ,"perl pl                  /wp/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPerl.js"
     ,"plain                    /wp/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPlain.js"
     ,"python py                /wp/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushPython.js"
     ,"sql                      /wp/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushSql.js"
     ,"tt tt2                   /wp/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushTT2.js"
     ,"yaml yml                 /wp/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushYAML.js"
    );
    SyntaxHighlighter.all();  
});

SyntaxHighlighterの再読み込み関数については、こちらのサイトを参考にさせて頂きました。

javascriptのsyntaxhighlighterを使うとき、PJAXの遷移後のページで、ハイライトしたい場合、どうすればいいですか?
SyntaxHighlighter 3 設定方法