コンテンツにスキップ

WordPress CMS統合

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

ドキュメント一覧

操作マニュアル（推奨）

この文書がWordPress CMSの操作手順の正本です。日常的なコンテンツ操作はこちらを参照してください。

  • WordPress CMS操作マニュアル ⭐
  • 基本操作ガイド
  • コンテンツタイプ別操作ガイド（お知らせ、キャンペーン、メインバナー）
  • ナビゲーション（ヘッダー / フッター）の編集
  • ACFカスタムフィールドの設定と使用
  • 設定・管理機能
  • Storefront への即時反映（Webhook）
  • トラブルシューティング
  • よくある質問（FAQ）

統合ガイド

APIリファレンス

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

コンテンツ管理

運用ルール・設計方針・ACF項目の補足情報をまとめたガイドです。操作手順の詳細は「操作マニュアル」を参照してください。

  • WordPressコンテンツ管理ガイド
  • ストア設定（ACF Options）の項目定義
  • ブランド情報（Vendure Collection管理）の運用ルール
  • Vendure カスタム商品リストを WordPress shortcode で呼び出す運用ルール
  • 各コンテンツタイプの設計方針・ベストプラクティス

クイックスタート

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

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

cd apps/wordpress-cms
docker compose up -d

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

2. 環境変数の設定

Storefront の環境変数として、CMS 用には Vendure 側の URL を設定します（推奨: dev_storefront の AWS Secrets Manager に設定）：

VENDURE_BASE_URL=http://localhost:${VENDURE_PORT:-3021}
VITE_PUBLIC_VENDURE_BASE_URL=http://localhost:${VENDURE_PORT:-3021}

Storefront 本体は Vendure shop-api 経由で CMS データを取得するため、Storefront 側で WordPress のドメインを通常導線として意識する必要はありません。

3. コンテンツの取得

import { fetchAnnouncements } from "@/lib/cms/content/announcements";

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

コンテンツタイプ

お知らせ（Announcement）

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

キャンペーン（Campaign）

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

メインバナー（ホームヒーロー）

  • 用途: ホームページのヒーローセクション用バナー
  • 実装: apps/storefront/src/lib/cms/content/hero-slides.ts
  • コンポーネント: HomeHero

アーキテクチャ

WordPress CMS (Headless)
    ↓ WPGraphQL
Vendure Server (CmsIntegrationPlugin)
    ↓ Shop API
Storefront (Vite route loader / client fetch)
    ↓ React Components
ユーザー表示

関連ドキュメント