【実践例】静的HTMLサイトにWordPressの最新投稿を表示する方法｜地域企業でもできるWeb活用

こんにちは！スタッフのやまさきです。

今回は、静的なHTMLサイトにWordPressの「最新投稿一覧」を表示する方法をご紹介します。

 

「会社のWebサイトは静的HTMLで作っているけれど、ブログだけWordPressを使っている」というケースは、意外と多いのではないでしょうか。

せっかくWordPressでブログを更新していても、静的サイトにリンクや最新記事が反映されないのはもったいないですよね。

 

そこで今回は、静的なHTMLページにWordPress側の最新投稿を自動表示させる方法を、実際に弊社で導入したコードを交えて解説します。

 

---

 

1. なぜ「静的HTML ＋ WordPress」を組み合わせるの？

 

もともと企業のコーポレートサイトは、HTML・CSSで構築された「静的サイト」が多い傾向にあります。

静的サイトは、

• 表示が速い
• セキュリティリスクが低い
• メンテナンスが少ない

といったメリットがある一方、更新性が低いというデメリットも。

 

そこで、ブログやお知らせだけWordPressで運用し、情報発信の頻度を高めるという運用方法が多く採用されています。

ただ、HTML側に「WordPressの新着記事」が出ないと、情報が埋もれてしまいます。
今回の仕組みを使えば、静的サイトのトップページなどに「最新のお知らせ」欄を設置できるようになります！

 

---

 

2. WordPressの投稿をHTMLで取得する仕組み

 

2-1. WordPress REST APIとは？

 

WordPressには「REST API」という機能が標準で備わっていて、投稿データをJSON形式で取得できるようになっています。

たとえば以下のようなURLにアクセスすると、投稿データ（JSON形式）が取得できます：

https://example.com/wp-json/wp/v2/posts

 

2-2. JavaScriptで取得して表示するコード

 

弊社で実際に導入しているHTMLコードの一部がこちらです👇

<div id="latest-posts">読み込み中...</div>

  <script>
  fetch('/blog/wp-json/wp/v2/posts?per_page=5&_embed')
    .then(response => response.json())
    .then(posts => {
      const container = document.getElementById('latest-posts');
      container.innerHTML = '';
      posts.forEach(post => {
        const date = new Date(post.date).toLocaleDateString('ja-JP');
        const image = post._embedded?.['wp:featuredmedia']?.[0]?.source_url
          || 'https://via.placeholder.com/250x150?text=No+Image';
        const html = `
          <div class="post-card">
            <img src="${image}" alt="${post.title.rendered}">
            <div class="post-card-content">
              <h3><a href="${post.link}" target="_blank" rel="noopener">${post.title.rendered}</a></h3>
              <div class="post-date">投稿日: ${date}</div>
              <a href="${post.link}" target="_blank" rel="noopener">続きを読む</a>
            </div>
          </div>
        `;
        container.insertAdjacentHTML('beforeend', html);
      });
    })
    .catch(error => {
      document.getElementById('latest-posts').innerHTML = '投稿の取得に失敗しました。';
      console.error('エラー:', error);
    });
  </script>

 

2-3. 実際に使ってみて感じたポイント

導入してみると、思ったより簡単に動きました！

CSSを少し加えるだけで、カード風のデザインもできます。（実際のページをご参照ください）

 

---

 

3. 地域の中小企業にもおすすめな理由

 

この方法は、地元の中小企業さんにもぜひおすすめしたいです。

• 静的な会社紹介ページはそのままに
• ブログだけWordPressで運用して
• HTML側に最新記事を埋め込む

「ホームページ作り直すほどじゃないけど、情報を発信したい」と感じている方にぴったりな方法です。

 

---

 

おわりに

 

今回は、静的HTMLサイトにWordPressの最新投稿を表示する方法をご紹介しました。

HTMLサイトとWordPressの良いとこ取りをしたい方には、ぴったりな仕組みです。

 

弊社のように地方で活動する企業こそ、「わかりやすく」「情報発信しやすく」することが、地域とのつながりにもつながっていくと感じています。

「こんな方法、知らなかった！」「うちでも使ってみたい！」と思った方は、ぜひ参考にしてみてくださいね。