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でアクセスします。

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

投稿内容のJSONのサンプル

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

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

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

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

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

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

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

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

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

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

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

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

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

Ajaxで読み込む

Vueなどでaxiosで読み込む

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

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

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

renderedまでの指定

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

タイトルをDeveloperToolで確認

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

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

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

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

https://teratail.com/questions/234592

まとめ

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

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