WPのREST APIを使ってmoreボタンを実装してみた。

WP案件で初めてREST APIを使ってみたので、記事のmoreボタンを実装してみました。
moreボタンのソースは、[こちらのサイトを参考](http://black-flag.net/jquery/20131119-4881.html)に組み合わせてみました。

ソースは整理していません。。（実装することに集中していたため。。。あとで整理する予定）
たぶん、またこういったのを使って実装することがあると思うのでメモとして残しておきます。


# WP REST APIドキュメントはこちら

* [http://wp-api.org/](http://wp-api.org/)

## HTML トップページ

```HTML
<div class="clearfix" id="content">
</div>
```

## HTML カテゴリ用ページ

```php
<?php
  $category = get_the_category();
  $cat_id   = $category[0]->cat_ID;
  $cat_name = $category[0]->cat_name;
  $cat_slug = $category[0]->category_nicename;
?>
<div class="clearfix" id="page_content" data-name="<?php echo $cat_slug; ?>">
</div>
```

## JS

```js
$(function(){
  function cutTextEvent(){
    var $title = $('.p-blogListBox__title');
    var cutFigure = '25';
    var afterTxt = ' …';
    $title.each(function(){
      var textLength = $(this).text().length;
      var textTrim = $(this).text().substr(0,(cutFigure));
      if(cutFigure < textLength) {
        $(this).html(textTrim + afterTxt).css({visibility:'visible'});
      } else if(cutFigure >= textLength) {
        $(this).css({visibility:'visible'});
      }
    });
  }
  var setArea = $("#content"),
  setArea_page = $("#page_content"),
  loadNum = 4, // 読み込む個数
  loadTxt = 'Now Loading...', // Loading中の表示テキスト
  btnTxt = 'もっと見る', // ボタンテキスト
  fadeSpeed = 500; // フェードスピード

  setArea.after('<div id="btnMore" class="p-blog__btn clearfix" style="overflow: hidden; clear: both"><a herf="#">' + btnTxt + '</a></div>');
  var setMore = setArea.next('#btnMore');

  setArea_page.after('<div id="btnMore" class="p-blog__btn clearfix" style="overflow: hidden; clear: both"><a herf="#">' + btnTxt + '</a></div>');
  var setMore_top = setArea_page.next('#btnMore');

  var page_name = $('#content').data('name');
  var category_urls = '/wp-json/posts?filter[orderby]=&filter[category_name]=' + page_name;
  var post_url =  '/wp-json/posts';

  function ajax_list(urls,area){
    $.ajax({
      url: urls,
      dataType: 'json',
      success : function(data){
        var dataLengh = data.length,
        loadItemLength = area.find('.loadItem').length,
        setAdj = (dataLengh)-(loadItemLength),
        setBeg = (dataLengh)-(setAdj);
        function blogList(number){
          var title = data[number].title;
          var link = data[number].link;
          var category = '';
          for (var j = data[number].terms.category.length - 1; j >= 0; j--) {
            category += data[number].terms.category[j].name;
          }
          var pubDD = new Date(data[i].date);
          yy = pubDD.getYear();if (yy < 2000) { yy += 1900; }
          mm = pubDD.getMonth() + 1;dd = pubDD.getDate();
          var pubDate = yy +'年'+ mm +'月'+ dd +'日';
          var html = '<div class="p-blogListBox loadItem"><a href="' + link + '">'+ '<p class="p-blogListBox__category">' + category +'</p>' + '<p class="is-read__txt c-fade"><span>続きを見る</span></p><h2 class="p-blogListBox__title">' + title +'</h2><p class="p-blogListBox__date">'+ pubDate + '</p></a></div>';
          $(html).appendTo(area).css({opacity:'0'}).animate({opacity:'1'},fadeSpeed);
          cutTextEvent();
        }
        if(!(dataLengh == loadItemLength)){
          area.append('<div id="nowLoading">' + loadTxt + '</div>');
          if(loadItemLength == 0){
            if(dataLengh <= loadNum){
              for (var i=0; i<dataLengh; i++) {
                blogList(i);
              }
              setMore.remove();
              setMore_top.remove();
            } else {
              for (var i=0; i<loadNum; i++) {
                blogList(i);
              }
            }
          } else if(loadItemLength > 0 && loadItemLength < dataLengh){
            if(loadNum < setAdj){
              for (var i=0; i<loadNum; i++) {
                v = i+setBeg;
                blogList(v);
              }
            } else if(loadNum >= setAdj){
              for (var i=0; i<setAdj; i++) {
                v = i+setBeg;
                blogList(v);
              }
              setMore.remove();
              setMore_top.remove();
            }
          } else if(loadItemLength == dataLengh){
            return false;
          }
        } else {
          return false;
        }
      }, //success
      complete : function(){
        $('#nowLoading').each(function(){
          $(this).remove();
        });
        return false;
      } //complete
    });
    return false;
  }

  setMore.click(function(){
    ajax_list(category_urls,setArea);
  }).click();
  setMore_top.click(function(){
    ajax_list(post_url,setArea_page);
  }).click();
  cutTextEvent();
});
```

# 参考サイト

* [jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法](http://black-flag.net/jquery/20131119-4881.html)
* [ECオーナー必見！WP-APIでWordPressのデータを外部サイトに表示する方法](http://www.aiship.jp/knowhow/archives/22003)