WordPress JSON API + jQuery Template







  • WordPressのコンテンツを他のhtmlの中に織り交ぜるように配置したいなどといったニーズは結構ありそうです。


    WordPressのプラグインでJSON APIというものがあります。

    flickryoutube などの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>