WordPress JSON API + jQuery Template
WordPressのコンテンツを他のhtmlの中に織り交ぜるように配置したいなどといったニーズは結構ありそうです。
WordPressのプラグインでJSON APIというものがあります。
flickrやyoutube などのAPIみたいに、コンテンツを取り出すことができるようになるプラグインです。
コンテンツをJSONオブジェクトとして取得して、jQuery Templateでそれを表示してみるという作業を行いましたので、
公開いたします。
JSONプラグインの説明では、MoMA | INSIDE/OUT: A MoMA/MoMA PS1 Blogに触れています。
MoMA | The Museum of Modern Artは洗練されたWEBサイトのひとつだと思います。閲覧をお勧めします。
-
<!DOCTYPE html> <head> <meta charset=utf-8> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script> </head> <body style="margin:0;padding:0;"> <div id="header"> <h1>Wordpress JSON API + jQuery Template</h1> </div> <script id="movieTemplate" type="text/x-jquery-tmpl"> <li><strong><a href="${url}">${title}</a></strong></li> <li><p style="font-size:small;color:green;margin-left:2em;">${excerpt}</p></li> </script> <ul id="movieList" style="list-style:none;"></ul> <script> <?php echo "var wp = "; readfile("http://example.com/wp/?json=get_recent_posts&dev=1"); echo ';'; ?> $( "#movieTemplate" ).tmpl( wp.posts[0] ).appendTo( "#movieList" ); $( "#movieTemplate" ).tmpl( wp.posts[1] ).appendTo( "#movieList" ); $( "#movieTemplate" ).tmpl( wp.posts[2] ).appendTo( "#movieList" ); $( "#movieTemplate" ).tmpl( wp.posts[3] ).appendTo( "#movieList" ); $( "#movieTemplate" ).tmpl( wp.posts[4] ).appendTo( "#movieList" ); </script> </body> </html>
- DEMO
- Wordpress JSON API + jQuery Template
- 2011年9月の、ミショニポー JSON API 関連のエントリ
- JSON + WordPress で、スタティックなページに動的な情報を埋め込む - ミショニポー
- 関連
- jQuery TemplateでRSSを表示する