WordPress で個別ページの記事部分を ajax で取得する

WordPress で個別ページの記事部分を ajax で取得して任意の場所に挿入するコードを書いたのでメモ。（※ jQuery の内容としては WordPress に特化したものではない）流れとしてはこんな感じ。

• クリックイベントをバインド
• ajax のリクエスト先 URL を初期化
• ajax リクエストを行いページ内容を格納
• ページ全体から目的の部分だけを取得して格納
• 目的の部分をいったん非表示にしてから挿入
• アニメーションで表示

コードはこんな感じ。

$(document).ready(function () {

 // クリックイベントをバインド
 $(".hoge").click(function(){
  var url, html, target;
  
  // ajax のリクエスト先 URL を初期化
  url = $(this).find("a.hoge").attr("href");
  
  // ajax リクエストを行いページ内容を格納
  html = $.ajax({
   url: url,
   async: false
  }).responseText;
  
  // ページ全体から目的の部分だけを取得して格納
  target = $(html).find(".fuga");
  
  // 目的の部分をいったん非表示にしてから挿入
  target.css({display: "none", opacity: "toggle"});
  $(this).after(target);
  
  // アニメーションで表示
  target.animate({height: "show", opacity: "toggle"});
 });
 
});

2013-02-27 追記： responseText からそのまま jQuery オブジェクトを生成するような書き方は IE だとダメみたい。（IE9 は動いてる）IE で同じことをやろうと思ったら上のサンプルだと全然だめ。手抜きしすぎ。 なんもないところから jQuery オブジェクトを生成したいときは、

var hoge = $("
");

じゃなくて、

var hoge = $(document.createElement("div"));

こう書く。