フィーチャー済みお知らせバナー機能¶

概要¶

WordPressのお知らせ（Announcement）でisFeaturedがtrueに設定されているものを、サイトトップに固定表示するバナー機能です。重要なお知らせを目立つ位置に表示するために使用します。

実装場所¶

コンポーネント: apps/storefront/src/components/layout/featured-announcement-banner.tsx
データ取得: apps/storefront/src/lib/cms/content/announcements.ts (fetchFeaturedAnnouncements)
統合: apps/storefront/src/layout/root-layout.tsx

機能仕様¶

表示条件¶

WordPressのお知らせ（Announcement）でannouncementMeta.isFeaturedがtrueのもの
複数のお知らせがある場合、全て同時に表示
表示位置: ヘッダーの直下、画面の一番上

UI仕様¶

背景色: 黄色の警告色（bg-amber-50）
ボーダー: 黄色のボーダー（border-amber-200）
バッジ: 「重要」ラベル（濃い黄色 bg-amber-600）
レイアウト: コンテナ幅内、レスポンシブ対応

機能¶

複数表示: isFeatured: trueのお知らせを全て縦に並べて表示
個別非表示: 各お知らせごとに閉じるボタン（×）を配置
リンク: お知らせをクリックすると詳細ページ（/announcements/{id}）に遷移
状態管理: 非表示にしたお知らせは localStorage に保存され、再訪時も再表示されない

WordPress設定¶

ACFフィールド設定¶

お知らせ（Announcement）の投稿タイプに以下のACFフィールドグループが必要です:

フィールドグループ名: announcementMeta
フィールド:
isFeatured: Boolean型（true/false）
relatedLink: URL型（任意）

GraphQLスキーマ¶

WPGraphQLで以下のクエリが利用可能である必要があります:

query AnnouncementList($first: Int!) {
  announcements(where: { orderby: { field: DATE, order: DESC } }, first: $first) {
    nodes {
      id
      databaseId
      title
      date
      slug
      link
      announcementMeta {
        isFeatured
        relatedLink
      }
    }
  }
}

環境変数設定¶

環境変数として以下を設定し、Storefront 側は通常導線として Vendure Shop API 経由でアクセスします:

VENDURE_BASE_URL=https://your-vendure-site.com
VITE_PUBLIC_VENDURE_BASE_URL=https://your-vendure-site.com

使用方法¶

WordPress側での設定¶

WordPress管理画面でお知らせを編集
ACFフィールドの「フィーチャー済み」（isFeatured）をtrueに設定
公開・更新

バナーの非表示¶

ユーザーは各お知らせの右上にある×ボタンをクリックして、個別にお知らせを非表示にできます。非表示にしたお知らせはブラウザの localStorage に保存されるため、同じブラウザではページを開き直しても再表示されません。掲載対象から外れたお知らせの閉じ状態は、次回描画時に自動で掃除されます。

技術詳細¶

データ取得¶

// apps/storefront/src/lib/cms/content/announcements.ts
export async function fetchFeaturedAnnouncements(
  options?: FetchAnnouncementsOptions,
): Promise<FeaturedAnnouncement[]>;

isFeaturedがtrueのお知らせのみをフィルタリング
日付の降順でソート
最大20件まで取得

コンポーネント構造¶

// FeaturedAnnouncementBanner
//   └── AnnouncementItem (各お知らせ)
//       ├── Link (タイトル + バッジ)
//       └── Button (閉じるボタン)

スタイリング¶

Tailwind CSS v4 + shadcn/uiのセマンティックトークンを使用
警告色としてamber系のカラーパレットを使用
レスポンシブデザイン対応

トラブルシューティング¶

バナーが表示されない¶

WordPress側の設定確認
isFeaturedがtrueに設定されているか
ACFフィールドが正しく設定されているか
GraphQLスキーマにannouncementMetaが公開されているか
環境変数確認
Storefront サーバー環境の VENDURE_BASE_URL / VITE_PUBLIC_VENDURE_BASE_URL が正しいか
/api/health/cms の vendureCms.status が ok か（診断時のみ。スケジュール監視には使わないこと）
WordPress 上流も疑う場合は upstreamCms.status が ok か（診断時のみ）
継続的な死活監視は /api/health/live、/api/health/ready、/api/version（Tier 0）を使う
サーバーログ確認
開発環境では、サーバーログにデバッグ情報が出力されます
[FeaturedAnnouncements] で始まるログを確認

エンドポイントURLの問題¶

パーマリンク設定が「プレーン」の場合、index.php?graphql形式になることがあります
WordPress管理画面 → 設定 → パーマリンク設定で、数字ベースまたはカスタム構造に変更してください
詳細は docs/03-implementation/infrastructure/wordpress-cms-development.md を参照

今後の拡張可能性¶

バナーの自動非表示（一定時間後に自動で閉じる）
アニメーション効果の追加
複数お知らせのスライダー表示（現在は全て同時表示）