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

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

$('表示させる箇所のセレクタ').load('サイト内のURL 表示させたい箇所のセレクタ');

で、wordpressのテーマ内でも同様に使えます。

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

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.5");
//この二行でjQueryをgoogleから読み込む すでに読み込まれていれば不要
</script>
<?php if(is_single()):?>
<script type="text/javascript">
$(function(){
$(".navigation a").live('click',function(){ 
//.bind()ではなく、.live()を使うことによって、ajaxで読み込んだタグにもアクションが設定される
		var title="<?php bloginfo( 'name' );?>";
		var link= $(this).attr("href");
		var setTitle = function(){  //titleタグを書き換え
			$("title").text( $("h1").text() + " | "+title);
			};
		var setContent = function(){ //#container内をload()で読み込んで差し替える
			$("#container").load( link + " #content").hide().fadeIn(500,setTitle);
			//便利な.load()を使ってリンク先ページの#content部分のみ書き出す
			};
		$("#content").fadeOut(200,setContent);
			return false;
                //リンクを無効にする 検索ロボットなどには実際のページに行っていただきたい
		});
});
</script>
<?php endif;?>

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

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

コメントを残す

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