[WordPress API]静的ページにWordPressの特定記事を表示する方法 #jQuery

ブログなどで見かける本文下の「関連記事」のように、任意の記事をWordPress APIを使い非WordPressな静的ページに実装したのでその備忘録になります。

ここではサンプルとして、いつもお世話になっているWeb Design Trends【ウェブデザイントレンド】さんの記事を取得していきます。

仕様

静的ページにWordPressの特定記事を複数表示する
APIの処理はjQueryを使用
取得する記事の内容は
- タイトル
- アイキャッチ画像
- 抜粋
- 記事URL
記事の並びは任意の順序
WordPressのパーマリンク設定がデフォルトのままでも可

表示イメージ

コード

まず、ブログ記事を表示する場所を用意します。
今回はbootstrapで実装したので、class名などはbootstrapに基づいて指定しています。

sample.html

<!-- jQueryを使ってAPIを取得するため、jQueryの読み込みを忘れずに -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div class="container">
  <h3>関連記事</h3>
  <div class="card-group row">
    <!-- ここに記事を追加 -->
  </div>
</div>

.card-group の中に、APIから取得したブログ記事を挿入していきます。
上のコードに続けて、同じファイルに以下を書いてください。

sample.html

<script>
// ブログURL
const url = 'https://webdesign-trends.net';

// 表示する記事ID（表示したい順）
const arrayPostsId = [9493, 113, 9878, 9616];

// ↑の順番通りに表示するため、初めに空タグを並べる
for (var i = 0; i < arrayPostsId.length; i++) {
  $('.card-group').append('<div data-post="' + arrayPostsId[i] + '" class="card"></div>');
} // for


// ここから指定した記事を取得する処理
$.each(arrayPostsId, function(index, post_id) {
  $.getJSON(url + '/?rest_route=/wp/v2/posts/' + post_id, function(results) {

    const post_date     = results.date; // 日付
    const post_link     = results.link; // URL
    const post_title    = results.title.rendered; // タイトル
    const post_excerpt  = results.excerpt.rendered; // 抜粋文

	// ここからアイキャッチを取得する処理
    $.getJSON(url + '/index.php?rest_route=/wp/v2/media/' + results.featured_media, function(eyecatch) {
      post_img = eyecatch.media_details.sizes.medium.source_url;

		// 記事部分のソース
      src = '<img class="card-img-top" src="' + post_img + '" alt="" >'
        + '<div class="card-body">'
        + '<h4 class="card-title">' + post_title + '</h4>'
        + '<p class="card-text">' + post_excerpt + '</p>'
        + '<a href="' + post_link + '" class="card-link">記事を読む</a>'
        + '</div>';

      $('div[data-post="' + post_id + '"]').append(src);
    });

  });
});
</script>

最初の const url = "●●●"; に対象のブログURLを記入し、取得したい記事IDを const arrayPostsId = [１つ目,２つ目,３つ目...] と配列に収めます。

あとは、src = '●●●'; の部分がアウトプットされるソースコードなので、記事全体を<a> で囲うなり自由に設定してください。

アウトプットされたコード

最終的に.card-group 内は以下のようになります。

<div class="card-group row">
  <div data-post="9493" class="card"><img class="card-img-top" src="https://webdesign-trends.net/wp/wp-content/uploads/2019/09/html-css-techniques-300x180.png" alt="">
    <div class="card-body">
      <h4 class="card-title">いくつ知ってる？HTML/CSSの便利な小技・テクニックまとめ</h4>
      <p class="card-text"></p>
      <p>HTMLやCSSはブラウザのアップデートによって使えるものが増えたり、より簡単に機能を実装できるようになることがあります。 少し前まではJavaScriptで行わなければならなかったことが、HTMLと…</p>
      <p></p><a href="https://webdesign-trends.net/entry/9493" class="card-link">記事を読む</a>
    </div>
  </div>
  <div data-post="113" class="card"><img class="card-img-top" src="https://webdesign-trends.net/wp/wp-content/uploads/2016/09/wordpress-bg-medblue-300x158.png" alt="">
    <div class="card-body">
      <h4 class="card-title">初心者でも大丈夫！WordPressを使ったWebサイトの作り方</h4>
      <p class="card-text"></p>
      <p>WordPressを使ってWebサイトを作成する時、みなさん最初に悩むのがどのテーマにするかだと思います。どうせWebサイトを作るなら多くの人にアクセスしてもらうために、SEOに強いWebサイトを作り…</p>
      <p></p><a href="https://webdesign-trends.net/entry/113" class="card-link">記事を読む</a>
    </div>
  </div>
  <div data-post="9878" class="card"><img class="card-img-top" src="https://webdesign-trends.net/wp/wp-content/uploads/2019/08/drama-300x188.png" alt="">
    <div class="card-body">
      <h4 class="card-title">最高のデザインツール「Drama」が登場！SketchやXDより良いかも。</h4>
      <p class="card-text"></p>
      <p>海外のPixelCutというソフトウェア会社から、新たなデザインツール「Drama」のベータ版がリリースされました。これまでも様々なデザインツールをご紹介してきましたが、Dramaはレベルが違うかもし…</p>
      <p></p><a href="https://webdesign-trends.net/entry/9878" class="card-link">記事を読む</a>
    </div>
  </div>
  <div data-post="9616" class="card"><img class="card-img-top" src="https://webdesign-trends.net/wp/wp-content/uploads/2019/07/work-smarter-1-300x169.png" alt="">
    <div class="card-body">
      <h4 class="card-title">デザイン制作を効率良く行うために必要な習慣とは</h4>
      <p class="card-text"></p>
      <p>UX Planetに「How to Work Smarter as a Product Designer（訳：プロダクトデザイナーとしてよりスマートに働く方法）」という記事が投稿されました。 プロダク…</p>
      <p></p><a href="https://webdesign-trends.net/entry/9616" class="card-link">記事を読む</a>
    </div>
  </div>
</div>

ポイントとしては、先に記事を収める空タグを用意（今回は<div> を使用）することです。
getJSON の処理が非同期通信なので、そのままだと必ずしも記事が任意の順序で表示されないため、任意の順序で並べたタグに取得した記事を入れていく方法を採りました。

表示イメージ

以上になります。
参考になりましたら幸いです。

下記のページを参考にさせていただきました。ありがとうございます。

▼WP REST APIでの情報の取得と表示・使い道について | ソフプラント
https://www.sofplant.com/blog/tech/wp-rest-api-tips/

▼WP REST APIでの記事の取得と表示[PHP版 / JS版] | koukiTips
https://koukitips.net/post1790/