WordPressにPjaxを実装してみる | かくれざとう
Pjaxを使うメリットとしては ページ全体でなく一部のみを読み込むため、転送量の削減が期待できる 上記と同じ理由でページの読み込み時間も減少する 書き換え面積が減るため端末の負荷も少ない ページ遷移時にエフェクトをかけられる などが挙げられるかと思います。 実装方法 ありがたいことに手軽にPjaxを扱えるjQueryプラグインを公開してくださっている方がいるので、そちらを使います。 さて、このプラグインを使ってPjaxを実装するためには、サーバーサイドとクライアントサイドの両方を書き換える必要があります。全体的な動きとしては、まずjavascriptの方で特定のリンクがクリックされたときにpjaxイベントを起こして、httpヘッダに特定文字列を付加するように記述。サーバーサイドではhttpヘッダに特定文字列があるかどうか判別し、もし有ったらpjaxイベントが発生したと判定して、ページの一部
WordPressでPjaxの実装後よくあるトラブルの解決方法 - ナオユネット
WordPressでPjaxを実装した後、色々な壁にぶち当たったので、その時の解決方法を紹介していきます。 WordPressでPjaxを実装する 「jquery-pjax」というjQueryプラグインを使います。 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 g
WordPressでpjaxを使ってスムーズにページ遷移をしてみよう
以前ブログのテーマをマテリアルデザインにリニューアルしたとき、pjaxを導入したとお伝えしましたが、肝心の解説をするのを忘れていました。今回は簡単なデモと解説でpjaxを実際に触れてみるまでをご紹介したいと思います。 pjaxとは PJAX リニューアル告知の時にも少し触れましたが、おさらいを兼ねてもう少し詳しくご紹介します。 pjaxとはajaxとpushStateを組み合わせた技術です。Ajaxで非同期にコンテンツを入れ替え、HTML5から導入されたHistory APIを使ってブラウザにURLの履歴を追加できます。 これを使えばコンテンツ部分だけを読み込んで通信量を削減&読み込み速度が向上されます。ページを遷移にアニメーションなどを追加してカッコいいページが作れちゃいます。 対応ブラウザは以下のとおり。非対応ブラウザであっても通常のリンクとして遷移するので問題ありません。 Can I
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
