WordPressの記事をJSONで取得して表示する

WordPressを使用したいのだけど、PHPが使えないので記事取得ができない、というときに使います。単純に記事取得が楽に行える。

HTML

こちらは吐出口。表示させたい場所にidを振って配置する。

<div id="page_content">

JavaScript

WordPressの標準機能のRESTを使用して、URLを叩いてそこからでてくるJSONをいい感じに表示するというもの。

<script type="text/javascript">
    $(function() {
        $.ajax({
            type: 'GET',
            url: '【WPドメイン】/wp-json/wp/v2/pages/【記事ID】',
            dataType: 'json'
        }).done(function(json){
            var content = '';
            var content = json.content.rendered;
            // console.log(json.content.rendered);
            $('#page_content').append(content);
        }).fail(function(json){
            console.error('記事取得に失敗しました。')
        });
    });
</script>

説明

url: '【WPドメイン】/wp-json/wp/v2/pages/【記事ID】',

この箇所で、持って来たい記事を指定することができる。今回は固定ページをもってきたいので、「pages」を指定しているが、記事投稿の場合は「posts」を指定する。

記事ページ	posts
固定ページ	pages

【記事ID】箇所は、スラッグなどではなく、単純にidを指定する。(11とか256とかの数字)

var content = json.content.rendered;
// console.log(json.content.rendered);
$('#page_content').append(content);

ここでは本文しかもってきていないが、各種取得できるので、随時console.logで確認しながら取得するものを決めるといいです。