今回使うもの

表示設定_‹_WP-kyoto_—_WordPress
管理画面の「設定＞表示設定」から表示件数を指定できます。

WP REST APIで投稿を取得するだけだとここの設定に関係なく１０記事返ってくるようになっているので、ここの値を使えるようにしましょう。

値を取ってくる

さっきの値は「get_option(‘posts_per_page’)」で取得できます。

ということでいつも記事を表示させているループ部分にこんな感じで書いてみましょう。

[php]
<?php
$post_per_page = get_option(‘posts_per_page’);
echo "<ul id=’posts’ data-post-num='{$post_per_page}’></ul>";
?>
[/php]

あとはWP REST APIを呼び出すJSをこんな感じで記述しておきます。
[js]
(function($) {
$(document).ready(function(){
var url = "/wp-json/wp/v2/posts?"
var num = $(‘#posts’).data(‘post-num’);
if ( num ) {
url += "&filter[posts_per_page]=" + num;
}

$.ajax({
type: ‘GET’,
url: url,
dataType: ‘json’
}).done(function(json){
for(var i=0;i<json.length;i++){
$(‘#posts’).append(‘<li><a href="’+json[i].link+’">’+json[i].title.rendered+'</a></li>’);
}
}).fail(function(json){
$(‘#posts’).append("<li>読み込みませんでした。</li>");
});

});
})(jQuery);
[/js]

こうすると表示設定で設定した記事件数分だけ、WP REST APIから記事データを取ってきます。

「JSオンリーでいきなりテーマ作る」ってのはなかなかとっつきにくい感じがあるのかなと思いますので、しばらくこんな感じでサポート的にPHPを使ってREST APIをいろいろ触ってみていこうかと思います。

目指せ公式テーマ。

Tag: WP

WP REST APIで管理画面から指定した記事数分だけデータを取得する