WordPressの投稿内容をJavascriptで取得してみた

javascript

例えば、企業の制作実績とかを更新する方法として、JSONで管理したり直接htmlを弄ったりすることもあると思いますが、ふとWordPressの投稿をカスタム投稿タイプとカスタムフィールドを使って実績一覧みたいな記事を作って、それをJavaScriptで読み込めば自動的に更新されるんじゃね？と思って調べてみたらやはり方法がありました。

いきなり全部、記事にすると長くなるので、とりあえずWordPressで投稿した内容を読み込む事をやってみました。

WP REST APIを知ろう

WordPressで投稿した内容をWP REST APIで取得することができます。
以前はプラグインとしてインストールしていましたが、どうやらWordPress 4.7 から、WordPress REST API（WP REST API）が標準実装されるようになりました。

WP REST API で投稿内容を取得するには？

実際にWP REST APIで投稿一覧を取得してみるには下記のURLでアクセスします。

//通常の投稿内容を取得する
/wp-json/wp/v2/posts
localhost/wordpress/wp-json/wp/v2/posts //トップのURLがwordpressの場合

上記でアクセスすると下記のようなJSONファイルを取得することができる。（以下のJSONは私のlocalhostで試したJSONです）

投稿内容のJSONのサンプル

カスタム投稿タイプを取得したい場合

通常の投稿ではなく、カスタム投稿タイプを取得したい場合もあるかと思いますがその場合はカスタム投稿タイプのスラッグを指定すれば大丈夫です。
例えば「news」というカスタム投稿タイプのスラッグの場合は以下です。

//newsのカスタム投稿タイプを取得する
/wp-json/wp/v2/news
localhost/wordpress/wp-json/wp/v2/news //トップのURLがwordpressの場合

アイキャッチ画像も取得したい場合

上記だけだとアイキャッチ画像が取得できません。
しかしWP REST APIにはグローバルパラメーターというものが用意されています。

グローバルパラメーター

「?_embed」というグローバルパラメーターをつけるとアイキャッチ画像のデータを取得できます。

//通常投稿のアイキャッチ画像のデータを取得する
/wp-json/wp/v2/posts?_embed

//カスタム投稿タイプのアイキャッチ画像のデータを取得する
/wp-json/wp/v2/news?_embed

サイズで選びたい場合は「full」「medium」「thumbnail」の中の画像のパスがあります。以下は「midium」の例です。
もう一つは「source_url」だけもありますので、アップした画像サイズのままであれば、こちらでも良いかと思います。

実際にJavaScriptで取得する場合、投稿記事のデータは配列で取得してくると思うので、配列で処理した場合は以下のようになります。
「wp:featuredmedia」だけ特殊なので[カギカッコ]で括ります。

var all_data=response//投稿内容を配列で取得してall_dataに入れる。
//mdeiumサイズのアイキャッチ画像のデータを取得
all_data[0]._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url;

//アップした画像サイズのアイキャッチ画像のデータを取得
all_data[0]._embedded['wp:featuredmedia'][0].source_url;

必要なデータだけ欲しい場合

投稿内容をすべて取得すると膨大なデータになりますし使わないデータもあるかと思います。その場合必要なデータのみ取得することもできます。

取得方法はアイキャッチ画像と同様に「?_fields」というグローバルパラメーターを使って、例えばID、タイトル、パーマリンク、作者、抜粋文を取得したい場合は以下のようになります。

//通常の投稿の必要なデータを取得する
/wp-json/wp/v2/posts?_fields=author,id,excerpt,title,link

//newsのカスタム投稿タイプの必要なデータを取得する
/wp-json/wp/v2/news?_fields=author,id,excerpt,title,link

実際にJavaScriptで読み込んでみた

では実際にJavaScriptで、、といってjQueryのajaxを使いましたが、以下のように読み込んでみました。

せっかくなので、「?_fields」を使ってこのブログの記事のタイトルとリンクのみを取得してリストとして出力してみました。

Ajaxで読み込む

 var all_data = [];

 $.ajax({
   type: "GET",
   dataType: "json",
   url: "https://the-zombis.sakura.ne.jp/wp/wp-json/wp/v2/posts?_fields=title,link"
 }).done(function (response) {
   all_data = []; //初期化
   all_data = response; //ここで投稿内容を取得する
   
   for (var i = 0; i < all_data.length; i++) {
     var title = all_data[i].title.rendered; //記事のタイトル
     var link = all_data[i].link; //記事のリンクURL
     var li="
  • "+title+"
    • "

     $("#wp_list").append(li);
   }
 }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
   console.log("XMLHttpRequest : " + XMLHttpRequest.status);
   console.log("textStatus     : " + textStatus);
   console.log("errorThrown    : " + errorThrown.message);
 });

    Vueなどでaxiosで読み込む

    Vueの場合はv-forでデータを繰り返し処理する際にkeyが必要となる為、タイトル、リンクの他にidを取得してきてidをkeyとして利用しています。詳しくはCodePenのhtmlの要素の部分を見てください。

    var app = new Vue({
  el: "#app",
  data: {
    all_data: [],
    url: "https://the-zombis.sakura.ne.jp/wp/wp-json/wp/v2/posts?_fields=title,link,id"
  },
  created: function () {},
  methods: {
    getData() {
      this.all_data = []; //初期化
      axios.get(this.url).then((response) => {
        this.all_data = response.data;
        console.log(this.all_data);
      }).catch((err) => {
        console.error(err);
      });
    },
    deleteData() {
      document.getElementById("wp_list").innerHTML = '';
    }
  }
});

    投稿内容を取得・表示する際に気を付ける点

    Ajaxなりaxiosなりでwordpressの投稿内容のデータを出力する際にいくつか気を付ける点があります。

    renderedまでの指定

    タイトルを取得する時は以下のように「title.rendered」と「rendered」まで指定しないと取得でません。「excerpt」「content」「guid」も同様です。
    実際のJSONファイルをコーンソールで出力してDeveloperToolで確認すると分かります。

    var title = all_data[i].title.rendered; //記事のタイトル
    タイトルをDeveloperToolで確認

    投稿内容の取得する数について

    実はWP REST APIで投稿内容を取得できる数はデフォルトで10件と決まっています。最大で100件です。

    100件取得するには「per_page=100」を付け加えると、100件まで記事のデータを取得することができます。
    アイキャッチ画像も取得したい場合は「&」で繋げるといいでしょう。

    //100件のデータを取得したい場合
/wp-json/wp/v2/news?per_page=100

//アイキャッチ画像＋データ取得数の指定
/wp-json/wp/v2/news?_embed&per_page=100

    ただ100件以上やもしくは全データを取得したい場合はWP REST APIではなくWordPressのfunction.phpでカスタマイズする必要がありそうです。
    以下、terateilというサービスで見つけた記事なので参考にしてみてください。

    https://teratail.com/questions/234592

    まとめ

    とりあえず、wordpressから投稿内容を持ってくる事はできました。
    ただ、製品情報や制作実績をWordPressで管理する場合はカスタムフィールドが必要になってくるかと思います。

    カスタムフィールドをJavaScriptで取得するには、基本的なやり方は同じですが、別のプラグインが必要になってきますので、それはまた別の記事にしたいと思います。