wordpressテーマでjQueryを使って簡易なajaxページ遷移

wordpressのテーマ内でajaxを使ってのページ遷移は、jQueryの.load()を使うと意外と簡単にできそうです。
$jQuery.load()を使えば、自分のサイト内のページの任意の箇所を非同期通信で読み込んで現在のページの任意の場所に表示させるというアクションが、基本的にはたった一行でできます。すごいですよね。大体こんなかんじです。
[sourcecode language=’javascript’]$(‘表示させる箇所のセレクタ’).load(‘サイト内のURL 表示させたい箇所のセレクタ’);[/sourcecode]
で、wordpressのテーマ内でも同様に使えます。

例として、デフォルトのテーマであるtwentytenを使った場合のシングルページでのやり方。
header.phpの内に以下のコードを挿入すれば、シングルページでのページ遷移がajaxでできますが、あくまで簡易版です。
[sourcecode language=’php’]



[/sourcecode]
これだけです。
アドレスバーのURL等を替えるアクションは入ってません。アクセス解析対策もここには入っていません。ただページタイトルと、コンテンツ部分のみ差し変わります。
header.phpへの挿入の仕方はいろいろあると思いますが、小テーマのheader.phpまたはfunction.phpなどで使えると思います。

.load()でidを指定して読み込んだ部分の構造が置換される部分と同じであれば他のパターンでもできます。
ただし実際にはリンク先ページをすべて読み込んでしまっているのでそれなりの無駄な時間がかかっています。必要な部分のみ読み込むにはもうちょっといろいろやらないといけないようです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です