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

公開日: 2014年2月11日 最終更新日: 2018年5月24日

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

WordPressでPjaxを実装する

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

GitHub defunkt / jquery-pjax

 

まずはプラグインを読み込み、Pjaxを実行します。

 

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

一応これPjaxは動きますが、リンク先のソースを一旦全て読み込みdiv#main_contentを抜き出す為、余分なデータの読み込みが発生します。
ヘッダーやフッターなど、必要のない部分の読み込みをスキップし、できるだけ高速に動作させます。

get_headerget_footer()の読み込みを条件分岐させます。

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

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

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

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

ツイートボタンの設置方法
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で読み込みます。

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

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

 

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

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

コメント

お気軽にコメントをどうぞ。

  • タグを使って「関連記事一覧」を出力するWordPressカスタマイズ

    ブログを運営するにあたって「関連記事」ってなにげに重要なんですよね。 便利なプラグインも揃っていて実装もそれほど手間ではないのでは・・・。 しかし、テーマを少々カスタマイズすることで実装できてしまうのです。 自分用の備忘録にもなるし、タグを使った関連記事一覧の […]

    Wordpress【カスタマイズ】
    2013.5.24
  • 動画を表示させるカスタマイザー「ヘッダーメディア」設定方法

    WordPress ver4.7の新機能で、カスタマイザーの「ヘッダー画像」が「ヘッダーメディア」に変わりました。 ヘッダーメディアでは、MP4やYoutubeの動画を管理画面で設定し、サイトに反映させる事ができるようになります。 設定がしやすく使いやすいので […]

    Wordpress【カスタマイズ】
    2017.10.20
  • 可変グリッドプラグインjQuery masonryの設定方法・オプションまとめ

    CSSのfloat:leftなどで要素を横並びさせたい時、高さが違う要素が含まれるとなんだかキレイに並びません。 そこで役立つ便利なプラグインjQuery masonryをまとめてみました。 ちなみにMasonryとは、和訳すると「石造建築」。 レンガ造りの壁 […]

    javascript jQuery
    2012.7.6
  • たった数行でパララックス効果を演出する方法【jQuery】

    パララックスとは? ちまたで流行と噂のParallax(パララックス)。 スクロールすると背景や画像などが時間差で移動することで、視差効果による奥行き感が表現できます。 スクロールすることで効果が現れるため、ページが長くなりやすいランディングページと結構相性が […]

    javascript jQuery
    2012.7.22