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

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

WordPressでPjaxを実装する


jquery-pjaxjQuery使

GitHub defunkt / jquery-pjax

 
<?php get_header(); ?>

<nav id="gnav">
<ul>
<li><a href="">nav1</a></li>
<li><a href="">nav2</a></li>
<li><a href="">nav3</a></li>
<li><a href="">nav4</a></li>
<li><a href="">nav5</a></li>
</ul>
</nav>

<div id="main_content">

<!-- コンテンツが入れ替わる部分 -->

</div>

<?php
get_sidebar();
get_footer();
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.pjax.js"></script>

Pjax
$(document).on('click', '#gnav 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 //タイムアウトするまでの時間
});
});
});

$(document).on('pjax:complete', function() { // Pjax完了後
$("#main_content").animate({opacity:1}, "normal"); // フェードイン
});

 

div#main_contentdiv#main_content


Pjaxdiv#main_content


get_headerget_footer()
<?php // http-requestヘッダに「_pjaxが無い場合」ヘッダーをロード
$pjax = !($_GET['_pjax']);
if ($pjax) {
get_header();
}
?>
<div id="main_content">

<!-- コンテンツが入れ替わる部分 -->

</div>
<?php // サイドバーとフッターも同じ条件でロード
if ($pjax) {
get_sidebar();
get_footer();
}
?>

1


Facebook
Pjax
JS
$(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

WordPressPjax
pjaxflagment使pjax

2SyntaxHighlighter




WordPressSyntaxHighlighterVersion3.x
pjax01pjax01

pluginssyntaxhighlighter


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

Pjaxjavascript
$(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

javascriptsyntaxhighlighter使PJAX?
SyntaxHighlighter 3 
この記事へのコメント

コメントを残す

メールアドレスが公開されることはありません。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

このサイトの管理者

ナオユ

Wordpress初心者向けにカスタマイズ方法やWEB制作のノウハウをポロッとまとめています。広告代理店→WEB制作会社→リモート勤務になり在宅ワークしながらアフィリエイトなど副業に挑戦中|子ども大好き新米パパ@H29男児|フラット35で実家を建て直し親と同居|仮想通貨投資(絶賛含み損w)