pjaxのライブラリを変えて色々やりたくなったので少し触っているConcrete5で試してみました。
長いあいだMODXオンリーになってましたが、前から使ってみたいと思ってたCMSなのでもっと勉強してコンテンツを増やしていきたいと思います(●'◡'●)

pjaxとは？

pjaxとはAjaxでコンテンツを入れ替えるのと同時にURLも変更してくれるjQueryのプラグインの名前です。
Githubのようなスムーズでイケてるページ遷移を行います。

javascriptの「pushState」などの新しいヒストリー関数とAjaxやサーバーサイドスクリプトを組み合わせて作られているのでjQueryプラグインじゃなくても実装は可能です。実際この技術がなんと呼ばれるのかはわかりませんが、とりあえずpjax（pushState + ajax = pjax）で浸透してるみたいです。Chrome、Firefox、IE10以降などのブラウザで動作し、非対応のブラウザでは通常のページ遷移をします。

pjaxの基本についてはこちらのページでも書いていますのでよかったらご覧下さい。

動作デモ

こちらのデモページを御覧ください。（別窓で開きます）

共通デモのためConcrete5で作成したページではありませんが、こんな感じの動きをします。

jquery.pjax.jsプラグインのダウンロード

jquery.pjax.js こちらからダウンロードできます。（2014.05.19時点の最新版はVer.1.32.9でした）

テーマの中のどこをpjax遷移させるか考えよう

テーマファイルを編集する

今回の説明はデフォルトで入っているテーマ「greek_yogurt」を使用します。念の為テスト用にテーマフォルダの「greek_yogurt」を/themes/にコピーし、フォルダの名前を「greek_yogurt_pjax」などに変更してこっちを使用します。管理画面のテーマ選択から「greek_yogurt_pjax」を選択しておきます。
以降説明にあるテーマファイルは「greek_yogurt_pjax」を開いて編集してください。

elements/header.phpを開いてヘッダー部分のCSSの後あたりにpjaxを読み込むタグを追加します。

次に、メインとサイドバーを一緒に遷移させるため2つを囲んだタグが欲しいのですが「greek_yogurt」にはこれが存在しないので新しくタグを追加します。

elements/header.phpとelements/blog_header.phpの一番最後に以下のタグを追加します。

一応これで事前準備はおわり！

次にelements/header.phpを開いてpjaxの設定をします。一応以下は「greek_yogurt」用に書いたサンプルコードです。ヘッダーに直接書き込むか外部jsファイルにしてヘッダーで読み込んでください。これは「greek_yogurt」に大分最適化しているので他のテーマの場合IDの部分を修正する必要があります。

ちょっといろいろ書いてあって編集の仕方が分からない！という場合は以下のコードを使用してエフェクト処理などを少しづつ追加して見てくださいね(●'◡'●)

テストしてみよう！

うまくpjaxできるかテストしてみましょう。念のため管理画面でキャッシュをクリアして、フルページキャッシュをオフにしておきます。きちんとpjax遷移しているか確認するためelements/header.phpの先に追加した#pjaxContentタグの直前にタイムスタンプを表示させておきます。