静的HTMLの一部にWordPressの記事を表示する方法

Post date：2023.03.01

ウェブデザイン

タグ: WordPress

静的HTMLでホームページを作っている時に、サイトの一部だけ更新コンテンツがあり外部のWordPressで管理している時がたまにあります。
古い方法と新しい方法を紹介します、それぞれ得意不得意があるので要件によって使い分けてください。

古い方法：静的サイトに無理やりWordPress自体を読み込ませる

WordPressを静的HTMLサイトで使えるように以下のような手順を踏んでいきます。

静的HTMLの階層に/wp/のフォルダを作りWordPressをインストール
WordPressの「/wp/→/」のwpを取ることと同じ方法を行う
静的HTMLのindex.htmlでPHPを実行できるように、htaccessに追記
index.htmlに「require ./wp/wp-blog-header.php」と記述し、WordPress関数を使えるようにする

すごくざっくりと4工程ですね。
結構複雑で、ドメインと同じ環境にWordPressをインストールしドメイン直下をサイトアドレスにする必要があるので前提条件も限定的です。

その代わり、WordPress関数を扱えるのでお問い合わせフォーム等の埋め込みも簡単になります。
5,6年前はこのやり方が一般的だった気がします。

WP REST APIを使うことで簡単にできる

次にWordPressを静的HTMLサイトに埋め込む新しいやり方(といっても5年前にはもうできてた)
手順としては以下のようになります。

セキュリティプラグインを入れている場合、WP REST APIの許可をOKにする（プラグインを入れてなければ大丈夫）
index.htmlに出力場所となるdivを用意する
jsでWordPressのREST APIを呼び出して出力

たったこれだけ！便利！！！！
しかもhtaccessとか触る必要ないですし、WordPressがどこにあっても大丈夫。前提条件が少ないので汎用性が高いです。

しかし、jsを使って行うのでページ読み込み時に表示が一瞬崩れたり、お問い合わせフォームを埋め込むのはかなり根気が入ります。

ではREST APIを使って静的サイトにWordPressを埋め込む方法を詳しく解説していきます。

WordPress REST APIとは？

WordPressの特定の URLにアクセスすることで、WordPressに登録された情報を参照または更新ができる仕組みです。
URLはエンドポイントと呼ばれています。

エンドポイントはたくさん用意されているので、目的にあったものを公式リファレンスから探すのが良いです。

https://ja.wp-api.org/

最新の投稿をWP REST APIで取得して表示

WordPressの最新の投稿3件を静的HTMLサイトに表示してみましょう、まずは表示する場所に空のHTMLを用意します。

<div class="js-rest-api"></div>

ajaxを使うので、楽なjQueryを使います。

$(function(){
  $.ajax({
      type: 'GET',
      url: '{WordPressのURL}/wp-json/wp/v2/posts?_embed',
      dataType: 'json'
  }).done(function(json){
    // ここに表示する部分を書く
  }).fail(function(json){
　　// 失敗した時はここでconsole.logとかする
  });
});

詳しく解説していきます。
下記のURLがWordPressの情報を取得している部分です。アドレスバーに直接入力して表示されればREST APIが使えることがわかります。
「posts?_embed」の部分は、投稿を埋め込むって指示になります。

{WordPressのURL}/wp-json/wp/v2/posts?_embed

最新の投稿を3件なので、パラメータを追加します。パラメータについて色々いじりたい場合はリファレンスを確認！
Posts API Reference | WP REST API v2 Documentation

/wp-json/wp/v2/posts?_embed&per_page=1

静的HTMLに表示される部分を作っていく

JSのコードだと以下のコメントアウトの部分に書く内容です。実際にWordPressの情報をjsで受け取って、静的HTMLに表示するためにデータを加工します。

}).done(function(json){
    // ここに書く部分
}).

以下のように書きます。
$.eachを使って配列をループで回します。PHPのWP_queryを使う際に似ているのでWordPressを普段触っている方は問題ないかと思います。
もしうまくいかない部分があれば、console.logで中身を見つつ進めれば問題ありません…!!

    var insert_post = '';
		$.each(json, function( i, obj ) {
			var post_title = obj.title.rendered; //ブログのタイトル
			var post_link = obj.link; //ブログのURL
			var post_titleLength = post_title.length;
      if (post_titleLength > 50) { // 記事タイトルを50文字までで余剰分はカット
         var post_title = post_title.substring(0, 50);
      };
 　　　if( post_title.length >= 50 ){ // 50文字以上の場合は、文末に点をつける
				post_title += '...';
			}
　　　 post_link = post_link.split('?'); // リンクの不要なパラメータを削除する

			insert_post += '<a href="' + post_link[0] + '">' + post_title + '</a>';
		});
		$('.js-rest-api').append(insert_post); // 取得した記事を静的HTMLに追加

WordPressを静的HTMLに入れるのは簡単になった

以上になります。
REST APIを使うと、多くのことがJavaScriptで可能になります。静的HTMLの一部だけWordPressを入れるといった形もとてもやりやすくなりました。

とっても便利〜〜！