Jsonを記述する

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

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

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

固定ページ『json_api_post/』

<?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

<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

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

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

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

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

まとめ

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

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

それでは、また。