カラーミーショップカスタマイズの一環で、WPオプション（WordPress）の記事を取得して表示させるコードを作りました。
WP REST APIを使って記事情報を取得しているので、特定のカテゴリー,指定した件数(最大100件)のみを取得することが可能です。
商品カテゴリーA の一覧ページには、ブログカテゴリー_Aの新着記事を表示、商品カテゴリーBには記事カテゴリー_Bのような使い方です。
たまたまカラーミーショップに実装しただけでHTMLl編集ができるサイトなら何でも大丈夫です。（サービスによってはscriptの挿入が禁止されているので、事前に確認してください）
WP REST APIでWPの記事データを取得する
WordPressはrest apiという仕組みを使って様々なデータをapiで利用できるようになっています。（参考：https://ja.wp-api.org/）
うろ覚えですが、たしかWP4.xか5.xあたりから導入されたと思います。ご利用中のレンタルサーバーがセキュリティ関係でrest-apiを制限している場合もあるので、もし動作しなければサーバーの設定をご確認ください。
新着記事一覧を取得
WP REST APIには色々なタイプがありますが、投稿情報を取得する場合は、
[YOUR WP SITE URL]/wp-json/wp/v2/posts にGETを送るだけです。
標準では10記事取得されますが、パラメータで?per_page= をつけると任意の記事数取得できます。弊社のサイトで５記事取得するなら、
https：//mihune-web.com/wp-json/wp/v2/posts?per_page=5 となります。ブラウザでアクセスしてみると下のようなjsonデータが表示されます。
おおまかな作業の流れとしては、このjsonデータを取得してページに反映させる となります。
WP Rest APIにリクエストを送信して記事データを取得
標準のFetchメソッドで十分なのですが、執筆時当時の状況にあわせてaxiosで説明します。
axiosでREST APIを取得するのはシンプルに以下のコードです。
axios
.get(API_URL)
.then(処理)利用しているプラグインやテーマ等によって出力されるjsonデータ項目は異なるので、データの何を利用するかは用途次第です。
WP RestAPI へのリクエストでよく使うパラメータ
リクエストを送信する際、あらかじめ用意されているURLパラメータを利用できます。実装する際によく使うパラメータをまとめておきます。
| _fiedls | 取得したいキーをカンマ区切りでしぼりこむ （例：_fields=id,content ) |
| _embed | 埋め込みコンテンツを表示する（デフォルトでは非表示） |
| per_page | 取得件数 ( 最大100 ) |
| orderby | 並び替えに使うキーを指定 |
| order | 並び順。 asc（昇順） OR desc（降順） |
データから実際に表示する部分を作る
こちらもAxiosと同じく、執筆時当時にあわせてpetite-vue で説明します。
petite-vueは軽量版のVue.jsでサイズは6kb以下。今回のような部分的な使用には適役です。逆に大規模開発には不向きな印象です。
petite-vueやvue-jsについて詳しくは公式ドキュメントを読んでいただくとして、petite-vueも基本的な書き方は大体vue jsと同じです。
petite-vueには@vue:mountedなど一部独特な部分もありますが意味はすぐに分かると思います。
<ul id="myapp" @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>手間要らずのコピペ用コードも販売しています
投稿記事タイトル・アイキャッチ画像・投稿日・投稿カテゴリーを取得し表示するためのコード（コピー＆ペーストでOK）を販売しています。
テンプレートのHTML編集で表示させたい場所にコピー＆ペーストすればご利用いただけるので、特に専門的な知識は必要ありません。（デザインを変更なさりたいときはCSSの知識が必要となります）
こちらは記事カテゴリーの絞り込みやカテゴリ情報の表示にも対応しているので、この記事で作ったものよりは高機能です。
取得する内容を変更したい、自動でカテゴリー対応させたいなど、細かい調整をご希望の方は部分カスタマイズとしてご依頼いただくことになります。
1〜2日ほどで出来ますのでお気軽にご相談ください。（お問い合わせ）
