【別ドメインOK】WordPressの新着記事を静的ページに表示させる方法

別ドメインのWordPressサイトを静的サイトに表示する案件がでたので、ちょっとテスト的にやってみました。

題名は別ドメインのと書きましたが、同一ドメインでも問題なく表示されています。

テストページはちら　⇒　テストページを開く

表示方法は人によって色々あると思いますが、今回はWordPressの「WordPress REST API」を使用する方法を選びました。

WordPress REST API とは

「WordPress REST API」は、2016年12月のWordPress4.7から採用されている開発者向けのインターフェイスです。

外部からWordPressに接続して各種機能やデータを利用できるようになります。

これにより、WordPressの投稿やカテゴリー、タグなどの情報をJSON形式で取得でき、更新、削除など外部から操作できてしまうという機能です。

下記にご自分のWordpressサイトのTOPページURLを入れてブラウザで開いてみると、画像のような文字列が出てくるはずです。

JSON形式の文字列。

WordPress REST API の脆弱性は？

外部から操作できるなんて、脆弱性があるんじゃない？と思うのはごもっともです。

実際に、実装された2016年12月の翌年にWordPress REST APIの脆弱性が発覚していて、世界中でたくさんのWordpressサイトが改ざん被害を受けています。

この時の脆弱性はWordPress4.7.2にて修正されていますが、今後もないとは言い切れないので、運営者は気にはしていた方がいいかもしれません。

というわけで新着記事は4つ、サムネイルネイル画像、年月日、カテゴリー、題名を表示する、新着記事をクリックすれば記事に飛ぶという感じでブログ一覧を表示してみます。

ブログ記事一覧を表示する

JavaScript

表示したい場所にこのタグを入れる

<div class="latest-posts" id="latest-posts"></div>

JSは内部でも外部でも

<script>
    const wordpressSite = 'https://your-url.com'; // あなたのWordPressサイトのURLに置き換えてください
    const apiUrl = `${wordpressSite}/wp-json/wp/v2/posts?per_page=4&_embed`;

    // APIからデータを取得して表示
    fetch(apiUrl)
        .then(response => response.json())
        .then(posts => {
            const postsContainer = document.getElementById('latest-posts');
            
            posts.forEach(post => {
                // サムネイル画像の取得
                const thumbnailUrl = post._embedded['wp:featuredmedia'] ? 
                    post._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url : 
                    'default-image.jpg'; // デフォルト画像を設定

                // カテゴリーの取得（最初のカテゴリーを表示）
                const category = post._embedded['wp:term'][0][0] ? 
                    post._embedded['wp:term'][0][0].name : 
                    '未分類';

                // 日付のフォーマット
                const date = new Date(post.date).toISOString().split('T')[0];

                // HTMLの生成
                const postItem = document.createElement('a');
                postItem.classList.add('post-item');
                postItem.href = post.link; // 記事へのリンクを設定
                postItem.target = '_blank'; // 新しいタブで開く
                postItem.rel = 'noopener'; // 安全性のための設定
                postItem.innerHTML = `
                    <div class="post-thumbnail">
                        <img src="${thumbnailUrl}" alt="${post.title.rendered}">
                    </div>
                    <div class="post-meta">
                        <span class="post-date">${date}</span>
                        <span class="post-category">${category}</span>
                    </div>
                    <h4 class="post-title">${post.title.rendered}</h4>
                `;

                postsContainer.appendChild(postItem);
            });
        })
        .catch(error => console.error('Error fetching posts:', error));
</script>

PHP

<?php
// WordPressサイトのURLを設定
$wordpress_site = 'https://your-url.com'; // あなたのWordPressサイトのURLに置き換えてください

// 最新の記事を取得するREST APIのエンドポイント
$api_url = $wordpress_site . '/wp-json/wp/v2/posts?per_page=4&_embed';

// APIからデータを取得
$response = file_get_contents($api_url);

// JSON形式のレスポンスをPHPの配列に変換
$posts = json_decode($response);

if (!empty($posts)) {
    echo '<div class="latest-posts">';

    // 取得した記事データをループして表示
    foreach ($posts as $post) {
        // サムネイル画像のURLを取得
        $thumbnail_url = isset($post->_embedded->{'wp:featuredmedia'}[0]->media_details->sizes->medium->source_url)
            ? $post->_embedded->{'wp:featuredmedia'}[0]->media_details->sizes->medium->source_url
            : 'default-image.jpg'; // サムネイルがない場合のデフォルト画像

        // カテゴリー名を取得（最初のカテゴリーを表示）
        $category = isset($post->_embedded->{'wp:term'}[0][0]->name)
            ? $post->_embedded->{'wp:term'}[0][0]->name
            : '未分類';

        // 投稿日のフォーマットを変更
        $date = date('Y-m-d', strtotime($post->date));

        // HTMLマークアップ
        echo '<a href="' . htmlspecialchars($post->link) . '" class="post-item" target="_blank" rel="noopener">';
        echo '  <div class="post-thumbnail">';
        echo '    <img src="' . htmlspecialchars($thumbnail_url) . '" alt="' . htmlspecialchars($post->title->rendered) . '">';
        echo '  </div>';
        echo '  <div class="post-meta">';
        echo '    <span class="post-date">' . $date . '</span>';
        echo '    <span class="post-category">' . htmlspecialchars($category) . '</span>';
        echo '  </div>';
        echo '  <h4 class="post-title">' . htmlspecialchars($post->title->rendered) . '</h4>';
        echo '</a>';
    }

    echo '</div>';
} else {
    echo '<p>最新の記事はありません。</p>';
}
?>

現状javascriptもphpも問題なく動いていますので、これで使えると思います。