Jsonを記述する

まずはJsonデータを生成するページを作成します。

今回はワードプレスの固定ページを使用します。名前は任意ですが、ここでは『json_api_post/』とします。

JsonはJavaScriptで記述していきます。

固定ページ『json_api_post/』

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<?php   /* Template Name: json_api_post */   $myposts = get_posts(   array(     'post_type' => 'post', //投稿タイプ     'posts_per_page' =>-1,     'post_status' => 'publish'                    ) );   if($myposts): foreach($myposts as $post):   setup_postdata($post);       $post->post_date = mysql2date('Y年n月j日', $post->post_date);  //日付の形式を年月日に変更   $post->post_excerpt = get_the_excerpt();  //本文の抜粋を表示するための設定       //$json配列に格納   $json[] = $post;   endforeach; wp_reset_postdata(); endif;   header('Access-control-allow-origin: *');   //別ドメインからのAjaxの実行を許可する header("Content-Type: application/json; charset=utf-8"); echo json_encode($json);   ?>

Ajax部分を記述する

AjaxはJavaScriptで記述していきます。

今回は記事一覧と『もっと見る』ボタンを設置するページのhead部分に記述しています。

head

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>   <script type="text/javascript"> (function($) {     $.fn.moreClick = function(options){     var defaults = {       defaultNum : 3, //最初に表示しておく個数       loadNum : 3, // ボタンクリックで読み込む個数       loadTxt : '<img src="/images/common/ajax-loader.gif" alt="Now Loading...">', // Loading中の画像       moreBtnTxt : 'もっと見る', // もっと見るボタンのテキスト       fadeSpeed : 500, // フェードスピード     };       var params = $.extend(defaults, options);       var defaultNum = params.defaultNum,     loadNum = params.loadNum,     loadTxt = params.loadTxt,     moreBtnTxt = params.moreBtnTxt,     fadeSpeed = params.fadeSpeed,     jsonPath = params.jsonPath;       var setArea = $(params.setArea);       // 記事の後ろに「もっと見る」ボタンを設置する     setArea.after('<div id="btnMore">' + moreBtnTxt + '</div>');     var setMore = setArea.next('#btnMore');     setMore.hide();       // 記事が読み込まれるまでの間、Loading画像を表示する     setMore.after('<div id="nowLoading">' + loadTxt + '</div>');       //最初に表示する記事     $.ajax({       url: jsonPath,       dataType: 'json',       success : function(data) {                   var dataLength = data.length,         loadItemLength = setArea.find('.loadItem').length;           if(!(dataLength == loadItemLength)){           if(loadItemLength == 0){             if(dataLength <= defaultNum){               for (var i=0; i<dataLength; i++) {                 $('<li class="loadItem"><h2>'+ data[i].post_title + '</h2><p>' + data[i].post_excerpt + '</p><time>' + data[i].post_date + '</time></li>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);               }               setMore.hide();             } else {               for (var i=0; i<defaultNum; i++) {                 $('<li class="loadItem"><h2>'+ data[i].post_title + '</h2><p>' + data[i].post_excerpt + '</p><time>' + data[i].post_date + '</time></li>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);               }               setMore.fadeIn();             }           }         }else{           $('<li class="NoItem"><p>記事がありません。</p></li>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);                setMore.hide();         }       }, //success       complete : function(){         $('#nowLoading').each(function(){           $(this).remove();         });         return false;       } //complete     });           //もっと見るボタン押下時に表示する     setMore.click(function(){       setMore.after('<div id="nowLoading">' + loadTxt + '</div>');       setMore.hide();       $.ajax({         url: jsonPath,         dataType: 'json',         success : function(data){           var dataLength = data.length,           loadItemLength = setArea.find('.loadItem').length,           setAdj = (dataLength)-(loadItemLength),           setBeg = (dataLength)-(setAdj);             if(!(dataLength == loadItemLength)){             if(loadItemLength == 0){               if(dataLength <= loadNum){                 for (var i=0; i<dataLength; i++) {                   $('<li class="loadItem"><h2>'+ data[i].post_title + '</h2><p>' + data[i].post_excerpt + '</p><time>' + data[i].post_date + '</time></li>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);                 }                                    setMore.hide();               } else {                 for (var i=0; i<loadNum; i++) {                   $('<li class="loadItem"><h2>'+ data[i].post_title + '</h2><p>' + data[i].post_excerpt + '</p><time>' + data[i].post_date + '</time></li>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);                 }                                    setMore.show();               }             } else if(loadItemLength > 0 && loadItemLength < dataLength){               if(loadNum < setAdj){                 for (var i=0; i<loadNum; i++) {                   v = i+setBeg;                   $('<li class="loadItem"><h2>'+ data[v].post_title + '</h2><p>' + data[v].post_excerpt + '</p><time>' + data[v].post_date + '</time></li>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);                 }                 setMore.show();               } else if(loadNum >= setAdj){                 for (var i=0; i<setAdj; i++) {                   v = i+setBeg;                   $('<li class="loadItem"><h2>'+ data[v].post_title + '</h2><p>' + data[v].post_excerpt + '</p><time>' + data[v].post_date + '</time></li>').appendTo(setArea).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);                 }                 setMore.hide();               }             } else if(loadItemLength == dataLength){               setMore.hide();               return false;             }           } else {             setMore.hide();             return false;           }         }, //success         complete : function(){           $('#nowLoading').each(function(){               $(this).remove();             });           return false;         } //complete       });       return false;     }); //End もっと見るボタン押下時の動作処理終了     }; })(jQuery);   $(function() {   $("#list_wrapper").moreClick({     jsonPath : 'https://www.tipdip.jp/jsonapi_post/', // jsonファイル     setArea : '#news_list' // 反映するエリア   }); }); </script>

少し長いですが、各ブロック毎に噛み砕いて見てみるとわかりやすいかなと思います！

次にbody内に記述を行っていきます。

記事一覧と『もっと見る』ボタンの設置部分の記述をする

ここまでで準備は完璧なので、後はコンテンツを表示する箇所の記述を行うだけです！

記述はたったこれだけです。

body

1 2 3

<div id="list_wrapper">   <ul id="news_list"></ul> </div>

先ほどhead内に書き込んだ内容の133行目で、Ajaxローディングを反映するエリアを『#news_list』としています。

なので、body内の『<ul id=”news_list”></ul>』の中に記事を表示してくれます。

これでデモページと同様に投稿記事を『もっと見る』ボタンで表示できました！

まとめ

今回はJsonとAjaxを使って『もっと見る』ボタンを実装しました。

この組み合わせを覚えると『もっと見る』ボタンの他にも色々使い所があると思います！

それでは、また。