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

概要¶

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

実装場所¶

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

機能仕様¶

表示条件¶

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

UI仕様¶

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

機能¶

複数表示: isFeatured: trueのお知らせを全て縦に並べて表示
個別非表示: 各お知らせごとに閉じるボタン（×）を配置
リンク: お知らせをクリックすると詳細ページ（/announcements/{id}）に遷移
状態管理: 非表示にしたお知らせはセッション中は再表示されない（クライアント側のstate管理）

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
      }
    }
  }
}

環境変数設定¶

.env.local にサーバーサイド専用で以下を設定し、Storefront 側は /api/wordpress/graphql Route Handler を通じてアクセスします:

WORDPRESS_GRAPHQL_ENDPOINT=https://your-wordpress-site.com/graphql

使用方法¶

WordPress側での設定¶

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

バナーの非表示¶

ユーザーは各お知らせの右上にある×ボタンをクリックして、個別にお知らせを非表示にできます。非表示にしたお知らせは、ページをリロードするまで再表示されません。

技術詳細¶

データ取得¶

// apps/storefront/src/lib/wordpress/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 サーバー環境の WORDPRESS_GRAPHQL_ENDPOINT が正しいか
/api/wordpress/graphql に対する POST が成功するか
サーバーログ確認
開発環境では、サーバーログにデバッグ情報が出力されます
[FeaturedAnnouncements] で始まるログを確認

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

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

今後の拡張可能性¶

バナーの自動非表示（一定時間後に自動で閉じる）
ローカルストレージへの非表示状態の永続化
アニメーション効果の追加
複数お知らせのスライダー表示（現在は全て同時表示）