WordpressでPjaxの実装後よくあるトラブルの解決方法

WordPressでPjaxを実装した後、色々な壁にぶち当たったので、その時の解決方法を紹介していきます。

WordPressでPjaxを実装する

「jquery-pjax」というjQueryプラグインを使います。

<!-- Pjax実装のコード例 -->
$(document).on('click', '#gnav a', function(e) {
    e.preventDefault();
    var nextUrl = $(this).attr('href');
    $("#main_content").animate({opacity:0}, 'fast', function(){
        $.pjax({
            url: nextUrl,
            container: '#main_content',
            fragment: '#main_content',
            timeout: 20000
        });
    });
});

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

動的に読み込んだ部分にソーシャルボタンがある場合、ページ遷移した後に表示されなくなる不具合が起きました。Pjax処理が終わったら再度読み込み処理を実行します。

$(document).on('pjax:end', function() {
    gapi.plusone.go();
    twttr.widgets.load();
    FB.XFBML.parse();
    Hatena.Bookmark.BookmarkButton.setup();
});

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

SyntaxHighlighterも読み込み後に処理が必要なため、動的な追加時には再実行が必要です。

プラグインの設定でVersion3.xを選択し、shAutoloader.jsをフッターで読み込んだ上で、Pjax終了イベントにオートローダーの設定を追記してください。