【WordPress】WordPressの記事投稿をサイトTOPに連携する！

こんにちは！ロジカルスタジオPR部です！！

さて、今回のテーマは

「静的サイトにWordPressのブログ・記事投稿を連携させ、自動更新を実現させる」

ということを行っていきます！

ロジカルスタジオのオフィシャルサイトは静的ページで作成している為、ブログを更新する度に、手動でTOPページのブログバナーを最新のものに差し替える必要がありました。

微々たる業務かもしれませんが、塵も積もればなんとやら…

自動更新ができるようになれば、社員の時間も割かなくて済む！ってことで、自動更新の導入手順をブログに記しておきます。

あと、今回のやり方はPHPを一切使わず、JavaScriptだけで実装可能です！

フロントエンドの方にも、初心者の方にも優しい方法なのではないでしょうか？

自社のオフィシャルサイトや個人サイトを、静的ページで作っている企業や個人の方も多いと思いますので、是非この記事を参考にしていただけたらと思います。

【今回、参考にしたサイト】

・WP REST APIでの情報の取得と表示・使い道について

・WordPress 4.7で追加されたREST API v2で、投稿記事の情報を取得してみよう！

・WordPress WP_REST_APIで投稿データを取得するでサムネイル画像とアドバンスカスタムフイールド画像を出力する

上記のサイトを参考に、進めていきます！

【導入手順】

① WPブログのwp-jsonを確認しよう！

「WP REST APIでの情報の取得と表示・使い道について」に詳しく記載されていますが、

wp-jsonは俗にいうRSSに類似したものですね。

wp-json、RSS＝ブログや記事の一覧情報と思って頂けたらいいと思います。

まず、自分のWPブログのwp-jsonを確認します。ブログのURL直下に「/wp-json」と入力してください。

https://develop.logical-studio.com/wp-json

すると、下図のような画面が現れます！これがブログ一覧の情報となっています。

② jsファイルを作成しよう

「WP REST APIでの情報の取得と表示・使い道について」に記載されているscript内容を用いて、オフィシャルサイトのブログ一覧のレイアウトに合わせて作成したものがこちら。

$(function() {
  $.getJSON( "https://develop.logical-studio.com/wp-json/wp/v2/posts?_embed&per_page=4", function(results) {
	  $.each(results, function(i, item) {
	  	console.log(item);
		 $("#top .blogBox").append("<a href='" + item.link + "' class='blogBlock'><p class='blogBlockImg'><img src='" + item['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['full']['source_url'] + "' alt= '" + item.title.rendered.replace(/<br>/g, ' ') + "'></p><dl><dt>" + item.date.slice(0,10).replace(/-/g, '.') + "</dt><dd>" + item.title.rendered + "</dd></dl></a>");
	  });
  });
});

そして下記が、ブログ一覧を手動で更新していた際のhtmlコードです。

<div class="blogBox">
		<a href="https://develop.logical-studio.com/interview/20200110-barcelona-branch/" class="blogBlock">
		  <p class="blogBlockImg">
		　	<img src="https://develop.logical-studio.com/wp-content/uploads/2020/01/%E3%83%90%E3%83%AB%E3%82%BB%E3%83%AD%E3%83%8A%E6%94%AF%E9%83%A8.png" alt="PR部バルセロナ支部誕生！">
		  </p>
			<dl>
				<dt>2020.01.10</dt>
				<dd>PR部バルセロナ支部誕生！</dd>
			</dl>
	　</a>
/* 必要数のaコンテンツが続く... */
</div>

cssは既に当て込んでいる為、表示させる必要な情報のみをjsに記載していきます。

では、jsの内容を解説していきます！