静的サイトにWordPressの更新情報をサムネイル付きで載せたい

@kuroara さん

WordPress も、静的ページも、同一ドメインですよね? ということは、データベースも同一でしょうか?

…とても私にはできそうもありません…

ということなら、無理して REST API や RSS を使わなくてもできますが、残念ながら、いずれにしても、プログラムを書かなければ実現はできないと思います。サムネール・イメージの条件を考えたら、直接データベースに問い合わせるのが簡単なような気がしますが、とりあえず、「WP JSON API」で検索したら、最上位にきた「WP REST API」を使った場合の雛形をつけます。マークアップは適当なので、お好きにどうぞ。

「サムネール」は「投稿本文の中で最初に現れる <img src="..."> の…をそのまま使ってます。何も考えずに投稿にイメージを挿入すれば、リサイズされたイメージがここにきているはずなので。しかし、条件によってはオリジナルサイズのイメージが来てしまうかもしれません。

この場合には、jQuery.getJSON() のコールバック関数が受け取るデータに投稿 ID が含まれているので、それを使って再び問い合わせをしなければなりません。完全な照合のためにはメタデータが必要で、このときは、認証が必要になります。あるいは、imgUrl 変数に入っているファイル名を決め打ちで書き換えるという手もありますが、テーマを変えただけで整合性を失いますので、お勧めではありません。

プラグインを書き換えるのはどうか? 基本的に WordPress ですから、データを作るのに、WP_Query、WP_JSON_Response クラスを使っています。ということは、pre_get_posts フックを途中で実行するはずなので、メタクエリを追加すれば目的のデータを飛ばすことができます。この場合、フックだけではなくて、JavaScript も変更しなければなりません。外部に公開している API だというのと、プラグインをアップデートしたときに変更が消えるというのがいまいちなので、やってません。

<script>
  (function($) {
      var items = [];
      $.when (
          $.getJSON("http://example.com/wp01/wp-json/posts", function(data) {
              $.each(data, function(key, value) {
                  if ((/<img(.|\s)*?>/i).test(value.content)) {
                      var imgTag = value.content.match(/<img(.|\s)*?>/i)[0];
                      var imgUrl = imgTag.match(/src=["'](.*?)["']/i)[1];
                  }
                  items.push({title: value.title, link: value.link, img: imgUrl, date: value.date});
              });
          }),
          $.getJSON("http://example.com/wp02/wp-json/posts", function(data) {
              同じ繰り返し;
          })
      ).done(function() {
          items.sort(function(a, b) {
              return a.date - b.date;
          });
          var container = $("<div>", {
              "class": "post-container"
          });
          $.each(items, function(key, value) {
              var subContainer = $("<div>", {
                  "class": "sub-container"
              });
              var titleTag = $("<h2>", {
                  "class": "post-title"
              });
              var linkTag = $("<a>", {
                  href: val.link,
                  text: val.title
              });
              titleTag.append(linkTag);
              subContainer.append(titleTag);
              if (val.img !== 'undefined') {
                  var imgTag = $("<img>", {
                      src: val.img
                  });
                  subContainer.append(img);
              }
              container.append(subContainer);
          });
          $("body").append(container);
      });
  })(jQuery);
</script>