学苑祭BlogではWordPressを使用して管理を行なっています。今日は皆さんも目にしている
このような実装の仕方を解説します。
そもそもWordPressは、強力なコンテンツ管理機能だけでなく、REST APIを通じて外部アプリケーションとの連携も容易にしています。このAPIを利用することで、WordPressサイトのコンテンツをヘッドレスCMSのように扱い、任意のフロントエンドに最新の投稿を表示することが可能です。
1. WordPress REST APIとは？
WordPress REST APIは、HTTPリクエストを使用してWordPressサイトのデータ（投稿、ページ、コメント、ユーザーなど）にアクセスし、操作するためのインターフェースです。JSON形式でデータを送受信するため、JavaScriptなどのフロントエンド技術と非常に相性が良く、柔軟なコンテンツ表示を実現できます。
2. 基本的なAPIエンドポイント
WordPress REST APIの投稿に関する主要なエンドポイントは以下の通りです。
/wp-json/wp/v2/posts: すべての投稿を取得/wp-json/wp/v2/posts/{id}: 特定のIDの投稿を取得
これらのエンドポイントにクエリパラメータを追加することで、取得する投稿をフィルタリングしたり、表示順序を変更したりできます。よく使われるパラメータには以下のようなものがあります。
categories: 特定のカテゴリに属する投稿をフィルタリングper_page: 1ページあたりの表示件数を指定_embed: 投稿に紐づく関連情報（アイキャッチ画像、著者情報など）を含める
3. 実装手順とコード例
ここでは、JavaScriptのfetch APIを使用してWordPressから最新の投稿を取得し、HTML要素に動的に表示する手順を説明します。具体的なコード例として、学苑祭メインホームページのソースコード から関連部分を抜粋し、解説します。
3.1. HTML構造の準備
まず、投稿を表示するためのHTML要素を用意します。例えば、以下のようなリスト要素を準備します。
<ul id="news_list">
<!-- ここにWordPressの投稿が動的に挿入されます -->
</ul>3.2. JavaScriptでのデータ取得と表示
次に、JavaScriptでAPIを呼び出し、取得したデータをHTMLに挿入する関数を作成します。例えば学苑祭HPの menu.js には、fetchPosts という関数が定義されており、これがWordPress REST APIから投稿を取得し、表示する役割を担っています。
async function fetchPosts(targetId, categoryId) {
const apiUrl = `https://gakuensai.net/blog/wp-json/wp/v2/posts?categories=${categoryId}&per_page=3`;
const listElement = document.getElementById(targetId);
if (!listElement) return;
try {
const response = await fetch(apiUrl);
if (!response.ok) throw new Error('ネットワークエラー');
const posts = await response.json();
listElement.innerHTML = ''; // 既存の内容をクリア
if (posts.length === 0) {
const li = document.createElement('li');
li.innerHTML = `<span class="news_title">まだ投稿はありません。</span>`;
listElement.appendChild(li);
return;
}
posts.forEach(post => {
const li = document.createElement('li');
const postDate = new Date(post.date);
const dateStr = postDate.toLocaleDateString('ja-JP', {
year: 'numeric',
month: '2-digit',
day: '2-digit'
}).replace(/\//g, '.');
const title = post.title.rendered;
const link = post.link;
const now = new Date();
const diffMs = now - postDate;
const diffDays = diffMs / (1000 * 60 * 60 * 24);
const isNew = diffDays <= 2; // 2日以内の投稿は「New!」と表示
const newBadge = isNew ? '<span class="new_badge">New!</span>' : '';
li.innerHTML = `
<a href="${link}" target="_blank" class="news_item_link">
<span class="news_date">${dateStr}</span>
<span class="news_title">${title}${newBadge}</span>
<span class="news_arrow"></span>
</a>
`;
listElement.appendChild(li);
});
} catch (error) {
console.error('記事の取得に失敗しました:', error);
listElement.innerHTML = '<li><span class="news_title">記事の取得に失敗しました。</span></li>';
}
}
document.addEventListener('DOMContentLoaded', () => {
fetchPosts('news_list', 6); // ID 'news_list' にカテゴリID 6 の投稿を表示
fetchPosts('blog_list', 5); // ID 'blog_list' にカテゴリID 5 の投稿を表示
});3.3. コード解説
fetchPosts(targetId, categoryId)関数:targetId: 投稿を表示するHTML要素のID（例:'news_list'）。categoryId: 取得したい投稿のカテゴリID。WordPressの管理画面で確認できます。apiUrl: WordPress REST APIのエンドポイントURLを構築しています。ここでは、特定のカテゴリ（categoryId）に属する投稿を3件（per_page=3）取得するように指定しています。
fetch(apiUrl): 指定されたAPIエンドポイントにHTTP GETリクエストを送信します。response.json(): 取得したレスポンスボディをJSON形式でパースします。- エラーハンドリング:
try...catchブロックを使用して、ネットワークエラーやAPIからの不正なレスポンスを捕捉し、ユーザーに適切なメッセージを表示します。 - 投稿の動的生成: 取得した
posts配列をループ処理し、各投稿のタイトル、日付、リンク、そして「New!」バッジ（投稿から2日以内）を含む<li>要素を動的に生成して、指定されたlistElementに追加しています。 DOMContentLoadedイベント: ページが完全に読み込まれた後にfetchPosts関数が実行されるようにしています。これにより、HTML要素が確実に存在することを保証します。
4. 考慮事項
- カテゴリIDの確認:
categoryIdはWordPressの管理画面で確認するか、/wp-json/wp/v2/categoriesエンドポイントを叩いて取得できます。 - CORS (Cross-Origin Resource Sharing): 異なるドメインからAPIを呼び出す場合、CORSの問題が発生することがあります。WordPress側でCORSヘッダーを適切に設定するか、プロキシを使用するなどの対応が必要です。
- パフォーマンス: 大量の投稿を取得する場合や、頻繁にAPIを呼び出す場合は、キャッシュの導入やサーバーサイドでのデータ取得（SSR/SSG）を検討することで、パフォーマンスを向上させることができます。
- セキュリティ: 公開されている投稿データであれば問題ありませんが、認証が必要なデータにアクセスする場合は、OAuthなどの認証メカニズムを実装する必要があります。
5. まとめ
WordPress REST APIを利用することで、WordPressサイトのコンテンツを柔軟に外部サイトに表示することが可能になります。本記事で紹介したfetchPosts関数と、その実装例を参考に、ご自身のプロジェクトにWordPressの最新投稿表示機能を組み込んでみてください。ヘッドレスCMSとしてのWordPressの可能性を最大限に活用し、よりリッチなユーザー体験を提供できるでしょう。
コメント