RestAPIを使ってWordPressの記事一覧を表示する

カラーミーショップカスタマイズの一環で、WordPressブログの新着記事を取得して表示させる作業を行いました。

ちょうど別件でpetite-vueを使った部分カスタマイズをしていたこともあって、WP REST API、petite-vue、axiosを使って実装しています。

たまたまカラーミーショップのご依頼だっただけで、scriptタグが有効なhtml編集ができるサイトなら何でも大丈夫です。

実装見本は、ワコマリア専門店Crackers’s Babies 様のショップでご確認いただけます。

WP REST APIでWPの記事データを取得する

WordPressはrest apiという仕組みを使って様々なデータをapiで利用できるようになっています。(https://ja.wp-api.org/

うろ覚えですが、たしかWP4.4あたりから導入されたと思います。ご利用中のレンタルサーバーがセキュリティ関係でrest-apiを制限している場合もあるので、もし動作しなければサーバーの設定をご確認ください。

新着記事一覧を取得

WP REST APIには色々なタイプがありますが、投稿情報を取得する場合は、

[YOUR WP SITE URL]/wp-json/wp/v2/posts にGETを送るだけです。

標準では10記事取得されますが、パラメータで?per_page= をつけると任意の記事数取得できます。このサイトで5記事取得するなら、

https://mihune-web.com/wp-json/wp/v2/posts?per_page=5 となります。ブラウザでアクセスしてみると下のようなjsonデータが表示されます。

WP REST APIのjsonデータ

おおまかな作業の流れとしては、このjsonデータをaxiosで取得してページに反映させる となります。

axiosでjsonデータを取得

fetchでも同様のことができますが細々した作業をしなくて済むのでaxiosの方が好みです。

axiosでREST APIを取得するのはシンプルに以下のコードで。

axios
  .get(API_URL)
  .then(処理)

利用しているプラグインやテーマ等によって出力されるjsonデータ項目は異なるので、データの何を利用するかは用途次第です。

petite-vueで出力部分を作る

petite-vueは軽量版のvueでサイズは6kb以下。vue jsの下位互換ですが、今回のような部分的な使用には適役です。逆に、アプリケーションや大規模開発には不向きな印象です。

petite-vueやvue-jsについて詳しくは公式ドキュメントを読んでいただくとして、petite-vueも基本的な書き方は大体vue jsと同じです。

petite-vueには@vue:mountedなど一部独特な部分もありますが意味はすぐに分かると思います。

<ul id="wp-list" @vue:mounted="getData()">
    <li v-for="item in items">
      <a :href="item.link">{{ item.title.rendered }}</a>
    </li>
</ul>

<script type="module">
import { createApp } from 'https://unpkg.com/petite-vue?module'
const API_URL = 'YOUR_WP_URL/wp-json/wp/v2/posts?per_page=5'
 
createApp({
  items: [],
  getData() {
    axios
      .get(`${API_URL}`)
      .then( response => this.items = response.data )
    }
  }).mount()
</script>

上のコードを実際に出力してみたのが以下です。

See the Pen petite-vue WP-rest-api by Takashi Abe (@TakeshiAbe) on CodePen.

WP埋め込み用コードを販売しています

記事タイトル・アイキャッチ画像・投稿日を取得し表示させるためのコードをデータ販売しています(3,000円+税)

こちらはvue.js(petite-vue)を使わずに素のJava Scriptで作っています。記事カテゴリーの絞り込み(複数可)にも対応しているので、この記事で作ったものより少し高機能です。

参考

カラーミーショップのカスタマイズ・制作代行

カラーミーショップのテンプレートカスタマイズ、制作代行承っております。表示速度の改善など機能面の修正もお受けします。お気兼ねなくご相談ください

カラーミーショップ公式サイト

カラーミー・カスタマイズ用コードの販売

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です(個人事務所)。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(5,500円〜)

仕事のご相談は「お問い合わせ・ご相談」より随時承っております。