about

WordPressのREST APIでサムネイルURL付きの新着情報を作成した話(jQuery編)

そろそろ、REST APIとか使ってみようと思ったので、まず簡単なところからやってみようと新着情報を表示する部分の作成に使ってみました。jQueryが入っているサイトでの作業でしたので、jQueryを使用して簡単なものを制作しています。

とりあえず動いたので、今後のためにメモ代わりに置いてます。

とりあえずWordpressからjQueryで情報を取得する

本当はVueとかでやりたかったのですが、jQueryが入っているサイトでの作業でしたので、そのままjQueryで取得してみました。
REST APIを使って通常の新着情報のように情報をHTMLに掲載するために、jQueryでjsonファイルを読み込んで書き出すスクリプトを用意します。

/* WordPressから新着情報を引っ張るjs */
function newsGetter(dom,rest_url) {
    var domArea = dom;
    $.ajax({
        type: 'GET',
        url: rest_url,
        dataType: 'json'
    }).done(function (wordpressapi) {
        var lng = wordpressapi.length;
        if (lng > 5) {
            lng = 5;
        };
        for (var i = 0; i < lng; i++) {
            var title = wordpressapi[i]['title']['rendered'];
            var link = wordpressapi[i]['link'];
            var excerpt = wordpressapi[i]['excerpt']['rendered'];
            var category = wordpressapi[i]['_embedded']['wp:term'][0][0]['name'];
            var catslug = ' cat' + wordpressapi[i]['_embedded']['wp:term'][0][0]['slug'];
            if (wordpressapi[i]['_embedded']['wp:featuredmedia']) {
                var image = wordpressapi[i]['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['post-thumbnail']['source_url'];
                var image_html = '<div class="image">' + '<img src="' + image + '" alt="' + title + '-image" />' + '</div>';
                var image_css = 'image-on';
            } else {
                var image_html = '';
                var image_css = 'image-off';
            }
            var dateData = new Date(wordpressapi[i]['date']);
            yy = dateData.getYear();
            if (yy < 2000) {
                yy += 1900;
            }
            mm = dateData.getMonth() + 1;
            if (mm < 10) {
                mm = "0" + mm;
            };
            dd = dateData.getDate();
            if (dd < 10) {
                dd = "0" + dd;
            };
            var postDate = yy + '-' + mm + '-' + dd;

            var html =
                '<div class="grid-index">'+
                '<a href="' + link + '" class="'+ image_css +'">'+
                '<div class="item">'+
                '<div class="titleset">'+
                '<div class="date">' + postDate + '</div>'+
                '<div class="title">' + title + '</div>'+
                '</div>'+
                '<div class="category"><span class="catblog'+ catslug +'">'+ category +'</span></div>'+
                '<div class="excerpt">'+ excerpt +'</div>'+
                '</div>'+
                image_html +
                '</a>'+
                '</div>';
            $(domArea).append(html);
        }
    }).fail(function (wordpressapi) {
        $(domArea).append("データの読み込みに失敗しました。");
    });
};

このjavascriptを用意してから…

<script src="js/newslist.js" type="text/javascript"></script>
<script>
    $(function() {
        newsGetter("#newslist","http://hogehoge.com/info/wp-json/wp/v2/posts?_embed&per_page=5");
    });
</script>
<div id="newslist"></div>

適切な場所に上記スクリプトと表示用のタグを置いたらその場所に最新5件の新着が表示されるようになります。

基本的じゃない情報を取得する場合

WordPressのREST APIは、画像やカテゴリを引っ張ってくる場合、URLに「_embed」の引数が必要になります。この引数を付けた状態でREST APIにアクセスすると、画像などの情報が入ってるのでそれを取得できるようになります。

カテゴリは「wp:term」内に入っているので中を見て欲しい情報を引っ張って来ます。 カテゴリのスラッグ名はカテゴリ名の色分け用にclass名として引っ張っているので情報をちょっと加工しています。

var category = wordpressapi[i]['_embedded']['wp:term'][0][0]['name'];
var catslug = ' cat' + wordpressapi[i]['_embedded']['wp:term'][0][0]['slug'];

画像を取得する場合には「wp:featuredmedia」から取得します。まず、サムネイルがあるかどうかを調べる必要がありますので、まずサムネイルの有り無し判定を設置します。

if (wordpressapi[i]['_embedded']['wp:featuredmedia']) {};

「wp:featuredmedia」があるかどうかで判別できるので、ここがあるかどうかを見てサムネイル有り無しの分岐を行うようにしてみます。

var image = wordpressapi[i]['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['thumbnail']['source_url'];

あとは表示するためのHTMLも一緒に作成し、出力する部分に貼り付けます。

var image_html = '<div class="image">' + '<img src="' + image + '" alt="' + title + '-image" />' + '</div>';

このようにする事で、アイキャッチ画像があるときのみ出力を行うようにします。これで普通のHTML上でもWordpressのようにアイキャッチの有り無しで表示を変更させることが可能になります。

※存在しない可能性がある情報は情報が取れないとそこで動作が停止してしまうので、まず最初に情報の有り無しを判別しておく必要があります。今回の場合アイキャッチ画像が存在しない可能性があるので、アイキャッチ画像の処理をする前にアイキャッチ画像が存在するかどうかのチェックを行っています。

URLに引数を付けて取得する内容を変更する場合

WordPressのREST APIでは、読み込むURLに引数を付けて、読み込む内容を変更したり絞り込んだりすることが出来ます。

アイキャッチ画像など、通常の取得方法では取得できないものを取得したい場合「_embed」の引数をセットします。

http://www.hogehoge.com/info/wp-json/wp/v2/posts?_embed

カテゴリ別投稿を取得する場合は「categories=xxx」の引数をセットします。一度に取得する投稿数を制限する場合は「per_page=xxx」を使用します。この数値が1ページ分の投稿数になります。

http://www.hogehoge.com/info/wp-json/wp/v2/posts?_embed&per_page=5&categories=1

「page=xxx」でページ数の変更、「offset=xxx」でオフセット数を変更することができます。ページ送りが必要になった場合、これらの引数を使うことになります。

今回は触りの部分だけお試ししてみた感じで使ってみました。次はとりあえずvueで作りたいなと思います。