🌊

WordPressの投稿データを取得して外部サイトに表示させてみた

2023/02/22に公開

JavaScript

これまで忍者画像RSSというサービスを使って、WordPressの投稿データを外部サイトに表示させていたのですが、色々調べてみると「WP REST API」を用いると表示させることができるのでは!?と思い、試してみることにしました。

忍者画像RSSに対する導入前の課題としては以下2点が挙げられ、どちらも解消できそうだったので導入してみました。

ページ表示速度が遅い要因の一つになっていた
デザインの変更がしにくい(ほぼ不可能)

前提条件・参考記事

JQueryが必要になります。

▼導入にあたり参考にした記事はこちら

▼JQueryの読み込み順に注意

▼即時関数って初めて聞いた...

▼JavaScriptのコメントアウトってどうやってたっけ?←

本題

上記1つ目の記事の中でも、特に重要そうな箇所に絞って書いていきます。
※JQueryの導入やJSONの確認などは特に問題なくできるかと思うので割愛します。

アラート表示を試す

自分の環境ですと当然ながら(?)コピペしただけですと、上手く機能しませんでした。原因はJQueryの読み込み順にありました。

↑
こちら即時関数と言うようで読み込みが終わってから実行される関数のようです。なぜかこちらの関数がうまく機能しなかったので、記事2つ目を参考に「window.onload」を用いて実装してみました。
※即時関数に関して詳しくは記事3つ目参照。

コードは以下になります。

<script>
window.onload = function(){
  $.ajax({
      type: 'GET',
      url: '<WordPressのトップページ>/wp-json/wp/v2/posts?_embed',
      dataType: 'json'
  }).done(function(json){
    //TODO ここにHTMLを追加するための記述を書く
    alert( JSON.stringify( json ) );
  }).fail(function(json){
    console.error('WordPressのブログ記事取得に失敗しました。')
  });
};
</script>

アラート表示が確認できたら、<script></script>内を/**/で囲って一旦実行させないようにしましょう。また、見落としてしまいますが、上記コード5行目「<WordPressのトップページ>」はご自身の環境に応じて変えてくださいね。

見た目を整える

まずはコピペでいいと思いますが、THML(タイトル、抜粋の有無やリンクの範囲など)とCSSは各々修正が必要になってくるかなと思います。

表示件数を制御するには？

下の記事を参考にif文を使って「新着5件まで表示」という形にしました。簡単に説明すると、eachの後にif文を差し込んであげれば望んでいた機能が実装できました。

まとめ

「WP REST API」と聞くと着手前は難しそう...。というイメージでしたが案外簡単に実装できました。同様なことで困っている方の手助けになれば幸いです。

前提条件・参考記事

本題

アラート表示を試す

見た目を整える

表示件数を制御するには？

まとめ

Discussion