WordPress CMS統合

このセクションでは、WordPressをHeadless CMSとして使用する際の統合方法、APIリファレンス、コンテンツ管理ガイドを提供します。

ドキュメント一覧

操作マニュアル（推奨）

• WordPress CMS操作マニュアル ⭐
• 基本操作ガイド
• コンテンツタイプ別操作ガイド（お知らせ、キャンペーン、Heroスライド）
• ACFカスタムフィールドの設定と使用
• 設定・管理機能
• トラブルシューティング
• よくある質問（FAQ）

統合ガイド

• WordPress CMS統合ガイド
• アーキテクチャ概要
• 設定方法
• 実装パターン
• エラーハンドリング
• トラブルシューティング
• WordPress ACF Pro 移行手順（メニュー・バナー最適化）
• ACF Proライセンス適用とスキーマインポート手順
• Header/FooterメニューのGraphQL確認とStorefront連携手順

APIリファレンス

• WordPress GraphQL API リファレンス
• エンドポイント情報
• クエリ例（お知らせ、キャンペーン、Heroスライド）
• クエリオプション
• エラーハンドリング
• パフォーマンス最適化

コンテンツ管理

• WordPressコンテンツ管理ガイド
• コンテンツタイプ別の作成手順
• カスタムフィールド（ACF）の使い方
• ベストプラクティス
• トラブルシューティング

クイックスタート

1. ローカル環境のセットアップ

WordPressローカル開発環境をセットアップ：

cd apps/wordpress-local
docker compose up -d

詳細は WordPressローカル開発環境 を参照。

2. 環境変数の設定

Next.js Storefrontの .env.local には、サーバーサイド専用で以下を設定します：

WORDPRESS_GRAPHQL_ENDPOINT=http://localhost:8181/graphql

Storefront本体は /api/wordpress/graphql Route Handler 経由で WordPress にアクセスするため、クライアント側に WordPress のドメインは露出しません。

3. コンテンツの取得

import { fetchAnnouncements } from '@/lib/wordpress/announcements';

const announcements = await fetchAnnouncements({ limit: 10 });

コンテンツタイプ

お知らせ（Announcement）

• 用途: サイト全体のお知らせ、重要なお知らせの固定表示
• 実装: apps/storefront/src/lib/wordpress/announcements.ts
• コンポーネント: FeaturedAnnouncementBanner, AnnouncementSection

キャンペーン（Campaign）

• 用途: プロモーションキャンペーン情報
• 実装: apps/storefront/src/lib/wordpress/campaigns.ts
• コンポーネント: CampaignBannerSection

Heroスライド（Hero Slide）

• 用途: ホームページのヒーローセクション用スライド
• 実装: apps/storefront/src/lib/wordpress/hero-slides.ts
• コンポーネント: HomeHero

アーキテクチャ

WordPress CMS (Headless)
    ↓ GraphQL API (WPGraphQL)
Next.js Storefront (SSR)
    ↓ React Components
ユーザー表示

関連ドキュメント

• WordPressローカル開発環境
• Vendure実装ガイド