fc2ブログ

Home > wordpress > WP REST API v2 でデータを取得して新着情報をjqueryで表示する方法

WP REST API v2 でデータを取得して新着情報をjqueryで表示する方法

  • vanillate
  • 2016-03-28 Mon 00:27:25
  • wordpress
restapi_04.jpg

新着情報の表示は、HTMLファイルに直接WPを読み込むように構成する方法もありますが
サーバーの制限やら、同ドメインでもサーバーが別とか
そういった場合にどうやって読み込もうかなーと探していたら
ウワサのREST-APIでできそうだったのでやってみました。

WP REST API v2 のダウンロード

こちらからダウンロードできます。
インストールして有効化しておきます。
WP管理画面で、パーマリンク設定を更新

GET リクエストする場合 /wp-json/wp/v2/posts のように呼び出します。
URLを扱う系のプラグインはだいたいパーマリンク設定を更新!ですね。


私はなんとなく数字ベースにしがちです。
ソースコード
▼html
<!-- ここにデータが出力される -->
<div class="data"></div>

▼js
<!-- jsonデータ読み込み -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
$.ajax({
type: 'GET',
url: '★WPのアドレス★/wp-json/wp/v2/posts',
dataType: 'json'
}).done(function(json){
var len = json.length;
for(var i=0; i < len; i++){
var title = json[i].title.rendered;
var link = json[i].link;
var excerpt = json[i].excerpt.rendered;

var pubDD = new Date(json[i].date);
yy = pubDD.getYear();if (yy < 2000) { yy += 1900; }
mm = pubDD.getMonth() + 1;dd = pubDD.getDate();
var pubDate = yy +'.'+ mm +'.'+ dd ;
var html = '<li><span>' + pubDate + '</span><a href="' + link + '">'+ title +'</a>' + '</li>'+ excerpt ;
$('.data').append(html);
}
}).fail(function(json){
$('.data').append("読み込みませんでした。");
});


});
</script>
ポイント

json[i].link
json[i].excerpt.rendered
みたいなところが、jsonのキーやインデックスを指定しているところ。
json[i]とかの [i]がループで回してるやつになります。

v2では、.rendered をつけないといけないのが増えた感じです。

取得したいデータを取得した後、liデータでhtml出力しているので
あとはCSSをいじればOKです。

JSON系はURLのアドレスで表示データを変更できるので
たとえば全ページだったら /wp-json/wp/v2/posts
希望のカテゴリーだけを8件表示だと、続けて
/wp-json/wp/v2/posts?filter[posts_per_page]=8&filter[category_name]=★カテゴリー名★
みたいにURLを変更すればよいです。

JSONはブラウザで叩いても見づらい

URLを叩いたらこんな感じに・・。
phpの場合はver_dumpしちゃえば配列はキーを探してアクセスできるくらいにブラウザでも改行されるのですが、JSONはエスケープキーも入ってるし全体が見づらいです。

Pawを使ってキーにアクセスしやすくするといいかもしれません

Pawを使うと、こんな風にデータを整理してくれるので、indexやキーを探しやすいです。
出力したJSONのURLにどんなデータが入っているのか見渡すのにも便利でした。

Pawのダウンロードはこちらから。


WP REST API は、getだけじゃなくてpostもできるみたいなので
WordPressと経由したWebアプリも作れそうな勢いみたいですね。
今回はGETして加工しているだけなので、難しく考えずとも使えるはずです。

ちなみにJSONデータはjetpackプラグインを入れていれば他のフォーマットでも呼び出しできそうです。

ご参考にどうぞ。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/194-771ebdb5
Listed below are links to weblogs that reference
WP REST API v2 でデータを取得して新着情報をjqueryで表示する方法 from バニデザノート

Home > wordpress > WP REST API v2 でデータを取得して新着情報をjqueryで表示する方法

Sponsored Link
【WebDesign】Photoshopでプロになる!オシャレ&クールなWebデザイン作成講座
▲Udemy講座第二弾!Photoshopデザインカンプ作成の流れをレクチャーします。クーポンコード【PS_BANIDESIGN】
はじめよう!Wordpressで作るおしゃれサイト【デザイン入門】
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、お得な価格で受講可能!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。10年以上に渡りオールラウンドウェブクリエイターとして活動した経験を活かして高品質なPhotoshopデータでの「デザインカンプ作成」のお仕事を主に行っています。業務提携いただける企業さま、ウェブディレクターさまを随時募集中です。Wordpress(ワードプレス)、レスポンシブ、スマホ用サイトもできます♪
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items