WordPressコンテンツ管理ガイド

このドキュメントは、WordPress管理画面でコンテンツを作成・編集する際の手順とベストプラクティスを説明します。

この文書の役割: 各コンテンツタイプの運用ルール・設計方針・補足情報をまとめたガイドです。実際の操作手順（登録・編集・公開）は WordPress CMS操作マニュアル を参照してください。

対象読者

• コンテンツ管理者
• マーケティング担当者
• 運営チーム

コンテンツタイプ一覧

このプロジェクトでは、以下の3つのコンテンツタイプを使用します：

1. お知らせ（Announcement）: サイト全体のお知らせ
2. キャンペーン（Campaign）: プロモーションキャンペーン
3. メインバナー（ホームヒーロー）: ホームページのヒーローセクション

商品リストの埋め込み

記事・固定ページ・キャンペーン本文に商品リストを差し込みたい場合、商品リスト本体は WordPress では管理しません。Vendure Dashboard の カタログ > カスタム商品リスト で商品と並び順を管理し、WordPress 本文には呼び出し位置だけを shortcode で置きます。

[ritsubi_product_list handle="home-recommended"]

運用ルール:

• handle は Vendure 側のカスタム商品リスト詳細で確認・編集する
• shortcode は価格や商品情報を WordPress に保存せず、Storefront 用 marker だけを出す
• 商品カード、価格、表示可否は Storefront が Vendure Shop API 経由で解決する
• shortcode 用のリストは表示位置 無選択 のままでもよい。ホームへ自動表示したい場合だけ 表示位置を ホーム にする

仕様の正本は カスタム商品リスト を参照してください。

ストア設定（ACF Options）

ストア設定は ACF Options Page に集約します。テーマではなく ACF の設定値として管理し、Storefront は GraphQL 経由で取得して表示します。カスタマイザー（外観 → カスタマイズ）には設定項目を置かない運用とします。

管理方針（重要）

• 編集は管理画面では行いません。正本 JSON をコードベースで更新します。
• 正本: apps/wordpress-cms/plugins/ritsubi-ec-plugin/acf-json/ 配下の分割 JSON
• 反映が必要な場合は ACF > ツール > インポート を使用します。

構成 drift の考え方

• このプロジェクトで確認するべき差分は、MariaDB の生テーブル差分ではなく コードベースが期待する CMS 構成との差分 です
• 例: 必須 plugin の inactive、ACF field group の欠落、options page の未登録、固定ページ導線の欠落
• local では just wp-drift-audit、staging / production では just wp-drift-audit-vps <env> を使って read-only で監査します
• 管理画面で一時的に直しても、JSON 正本や deploy 済み plugin とズレたままだと再発するため、必ず audit 結果と正本を合わせてください

設定項目

ストア設定（options page: site-settings）

• ロゴ: 未設定の場合は Storefront のデフォルトロゴを使用
• Storefront URL: 固定ページの「表示/プレビュー」リンクの遷移先
• Vendure 管理画面URL: 管理バーの「ストア管理画面」の遷移先
• お問い合わせ
• 名称 / 電話番号 / メールアドレス / 問い合わせフォームURL / 受付時間
• OGP
• タイトル / ディスクリプション / 画像
• コピーライト: フッターに表示（空欄時はデフォルト表示）
• ホーム下部バナー
• ストア設定の ホーム下部バナー タブで管理
• ID: 管理用識別子。未入力時は Storefront 側で連番を使用
• 画像: ホーム下部に表示する告知バナー画像
• リンク先URL: クリック時の遷移先
• SNSリンク
• ストア設定の SNS タブで管理
• ID: 管理用識別子。未入力時は Storefront 側で補完される
• 種別: 通常は preset、独自SNSや独自リンクは custom
• platformKey: 既知SNSは line / instagram / youtube、それ以外は任意のキー
• 表示名: aria-label と表示ラベルに利用
• URL: 必須。空欄の行は Storefront で無視される
• アイコンURL: 未知SNSまたは custom 用のアイコン画像
• 表示: OFF の行は Storefront で表示しない
• 並び順: 小さい順に表示

SNSリンク運用ルール

• 未設定: WordPress から socialList 自体が返らない場合でも、Storefront は推測の外部 URL を出さず非表示にする
• 明示的に空: SNSリンクの行が 0 件、またはすべて 表示=OFF / URL空欄 の場合、Storefront は SNS セクションを表示しない
• プレースホルダー URL: example.com / example.org / example.net 系の URL は bootstrap 用の仮値として扱い、Storefront は表示しない
• アイコン表示: LINE / Instagram / YouTube は Storefront の固定アイコンを使う。 tiktok など未知SNSや custom では iconUrl を使い、未設定時は汎用リンクアイコンにフォールバックする
• 推奨入力: 独自SNSを追加する場合は 種別=custom、platformKey を一意にし、表示名 と iconUrl をセットで入力する

キャッシュ運用

• Storefront は WordPress のストア設定を GraphQL 経由で取得し、revalidation metadata と共通 cache helper を利用する
• OGP 設定は Storefront の metadata helper で反映し、既定の cache 時間は 24時間 （revalidate: 86400 相当）
• SNSリンク変更も同じストア設定キャッシュに含まれるため、反映確認時はキャッシュ更新タイミングを考慮する

ローカル seed の初期値

• just wp-bootstrap 実行直後は、site-settings の SNSリンクに LINE / Instagram / YouTube のプレースホルダー URL（https://example.com/...）が入る
• site-settings には問い合わせ先、配送告知バー 2 件、コピーライト、ロゴ類、OGP も初期投入される（OGP画像はローカル seed のメインバナー画像を利用）
• site-settings のホーム下部バナーは、登録された件数だけ Storefront のホーム下部に表示される
• 商品リストの初期値は WordPress ではなく Vendure の カタログ > カスタム商品リスト で管理する
• 実バックエンド検証やデモ前には、管理画面の ストア設定 から公式 URL に置き換えて保存する（未置換の行は Storefront に表示されない）

ブランド情報（Vendure Collection 管理）

Storefront の「ご契約ブランド一覧」やブランド付き商品一覧ヘッダーに表示する名称・説明文・画像、さらにブランド配下のメニュー導線は WordPress では管理しません。正本は Vendure の brands 親 collection 配下の collection tree です。

Vendure 側の設定項目

• slug: 必須。Storefront 導線と plugin 判定に使う安定キー
• name: ブランド表示名
• description: ブランド説明文。商品一覧上部などのブランド紹介に利用する
• featuredAsset: ブランドの主画像。ホームの「ご契約ブランド一覧」では 3:1 横長で使用する
• assets: 任意の補助画像

Storefront は、これらのブランド情報を常時表示するのではなく、当該ブランド collection に可視商品が1件以上ある場合のみホームのご契約ブランド一覧と商品一覧上部のブランド紹介に出します。collection が policy 上許可されていても、可視商品が 0 件なら表示しません。

運用ルール

• まず brand Facet と各 FacetValue を用意する
• 1 ブランドにつき 1 child collection を基本とし、facet-value-filter で brand=<facet value> を設定する
• 必要に応じてブランド配下に menu collection を追加し、親 filter 継承 + 追加 Facet 条件で絞り込む
• Storefront の商品カタログでは、brands 親 collection 配下の 第2階層をブランド、さらにその子 collection を 第3階層のグループ として扱う
• ブランド一覧カードでは第3階層グループ名を補助表示し、ブランド商品一覧では第3階層ごとに商品を束ねて表示する
• ブランド配下の商品がどの第3階層 group collection にも属さない場合、Storefront では一覧末尾の 「その他」 セクションへまとめて表示する
• slug は英小文字ベースで統一し、前後の空白を入れない
• Brand のデータ真実は brand FacetValue とし、Collection はその導線表現として扱う
• 価格・配送・同意・契約条件は collection に埋め込まず、Vendure の Facet / custom field で管理する
• WordPress 側のロゴ・SNS・連絡先更新とは別運用になるため、ブランド差し替え時は Vendure 側も合わせて更新する
• ホームの「ご契約ブランド一覧」に使う featuredAsset は 3:1 横長を前提に制作・登録する
• 比率の正本は docs/specifications/2026-03-storefront-contract-brand-ratio.md を参照する

商品リストとレコメンドの管理分担

ホームや記事本文へ固定で掲載する商品リストは、WordPress ではなく Vendure Dashboard の カタログ > カスタム商品リスト で管理します。WordPress 本文では shortcode で 表示位置だけを指定します。

購入履歴や同時購入データに応じて変化する動的な表示は、Vendure 側のレコメンド機能 として扱います。固定掲載と動的レコメンドの仕様は分けて判断してください。

詳細は カスタム商品リスト と 購入共起レコメンドプラグイン を参照してください。

お知らせ（Announcement）の管理

カスタムフィールド（ACF）

フィールドグループ: Announcement Meta

isFeatured（フィーチャー済み）

• タイプ: True/False
• 説明: このお知らせをサイト上部に固定表示するかどうか
• 設定値:
• true: サイト上部のバナーに表示
• false: 通常のお知らせ一覧のみに表示

使用例:

• 重要なメンテナンス通知
• 緊急のお知らせ
• 新機能の告知

relatedLink（関連リンク）

• タイプ: URL
• 説明: お知らせに関連する詳細ページのURL
• 設定例: /announcements/123 または外部URL

ベストプラクティス

1. フィーチャー済みお知らせは最大5件まで
2. サイト上部のバナーは複数表示されるため、重要度の高いもののみ設定

3. 古いお知らせは isFeatured を false に変更

4. 公開日時を適切に設定

5. 未来の日時に設定すると、指定時刻まで非公開

6. 過去の日時に設定すると、すぐに公開

7. タイトルは簡潔に

8. バナー表示時は長いタイトルが省略される可能性がある
9. 50文字以内を推奨

キャンペーン（Campaign）の管理

管理の原則

• キャンペーンページの正本は Vendure Collection
• campaigns 親 Collection 配下の child collection を 1 ページとして扱う
• タイトル、URL、対象商品、一覧表示は Collection 側で管理する
• WordPress は本文の任意ソース
• 長文本文、リッチコンテンツ、埋め込みアセットが必要な場合のみ Campaign 投稿を作成する
• WordPress 投稿がなくても、Collection のみで /campaigns/{slug} ページは成立する
• 価格・特典の管理は別
• 値引きや特典の条件は Vendure の販促ルール（/commercial-rules/campaigns）で管理する
• WordPress Campaign 投稿は販促ルールそのものの管理画面ではない

作成手順

1. Vendure の Collection 管理で campaigns 親配下に child collection を作成する
2. child collection に以下を設定する：
3. 名前: キャンペーン名
4. slug: /campaigns/{slug} に使う公開識別子
5. 説明 / 画像: 一覧カード・詳細ヘッダーで使う情報
6. 対象商品: キャンペーン詳細で表示する商品
7. 長文本文が必要な場合のみ、WordPress管理画面で 投稿 → キャンペーン → 新規追加
8. WordPress 側では、Collection slug と対応する本文を作成する
9. タイトル: 任意（通常は Collection 名と揃える）
10. アイキャッチ画像: 本文用に必要なら設定
11. 公開設定: 公開日時を設定

カスタムフィールド（ACF）

フィールドグループ: Campaign Meta

campaignId（旧フィールド）

• タイプ: Text
• 説明: 旧実装で使っていた互換用フィールド
• 運用: 現在の Storefront / backend 可視性判定では使用しない
• 補足: 既存投稿に値が残っていても挙動には影響しない
• 制約: URLに使用できない文字は避ける（英字・数字・ハイフン推奨）
• 注意: URLパスは大文字/小文字を区別する環境があるため、小文字に統一する
• 入力バリデーション: ^[a-z0-9-]+$

order（表示順序）

• タイプ: Number
• 説明: キャンペーンの表示順序（小さい順）
• 設定例:
• 1: 最初に表示
• 2: 2番目に表示
• 10: 最後に表示

image（キャンペーン画像）

• タイプ: Image
• 説明: キャンペーン専用の画像（アイキャッチ画像より優先）
• 推奨サイズ: 1200x600px（アスペクト比 2:1）
• 推奨フォーマット: WebP, JPEG, PNG

ベストプラクティス

1. Collection slug を正本にする
2. 公開URLは /campaigns/{collection.slug}
3. WordPress 投稿の slug も collection.slug と一致させる

4. Storefront は slug を小文字に正規化して正規URLへ寄せる

5. 表示順序を適切に設定

6. 一覧表示順は Vendure Collection 側の並び・構成を優先する

7. WordPress の order は本文連携時の補助情報として扱う

8. 画像の最適化

9. ファイルサイズは500KB以下を推奨

10. WebP形式を使用するとファイルサイズが削減される

11. WordPress slug を Collection slug に揃える

12. 原則 slug = collection.slug
13. Storefront 詳細は Collection を正本に解決し、本文があれば差し込む

14. 対応する Collection がない WordPress 投稿は campaign page として公開されない

15. キャンペーン期間の管理

16. 終了したキャンペーンは Collection 側の公開導線を外す
17. 本文だけ不要になった場合は WordPress 投稿のみを非公開にしてよい

既存環境の補完導線

• staging / local で campaigns / brands / product-types など initial-data.ts 定義の baseline Collection が欠けている場合は、非破壊で補完できる。
• ローカル:
• just vendure-db-seed-initial-collections
• staging:
• pnpm exec nx run ritsubi-vendure-server:seed:initial-collections:staging
• この補完は apps/vendure-server/src/data/initial-data.ts に定義済みの Collection だけを対象にする。
• 既存 slug を持つ Collection は更新せず、そのまま尊重する。

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

カスタムフィールド（ACF）

フィールドグループ: メインバナー（リピーター）

slides（スライド）

• タイプ: Repeater
• 説明: ドラッグ&ドロップで表示順を変更

スライド内の主な項目

• title: スライドの識別用タイトル（ユーザーには表示されません）
• lead: リード文（任意）
• media.type: メディアタイプ（image / video）
• media.image.desktop / media.image.mobile: 画像（デスクトップ/モバイル）
• media.video.desktop / media.video.mobile: 動画（デスクトップ/モバイル）
• media.image.alt: 代替テキスト
• displayPeriod.startAt / displayPeriod.endAt: 表示期間
• trackingId: 計測用ID
• campaignId: 連動先 campaign の一意ID（任意）
• scheduleMode: campaign 連動時の期間判定モード（banner-only / campaign-only / both）

ベストプラクティス

1. メディアタイプの選択
2. 画像: 軽量で高速に読み込める（推奨）

3. 動画: インパクトがあるが、ファイルサイズが大きい

4. レスポンシブ対応

5. デスクトップとモバイル用の画像を別々に用意

6. モバイル用画像がない場合は、デスクトップ画像が自動的に使用される

7. 画像の最適化

8. デスクトップ: 2048x663px 相当（比率 2048:663）
9. モバイル: 751x485px 相当（比率 751:485）
10. 画像サイズが上記より大きくても小さくても可。ただし 比率は固定。

11. 実装は object-cover のため、比率を維持したまま必要に応じてトリミングされる

12. スライド数の管理

13. 3-5枚程度が適切（多すぎると読み込み時間が長くなる）

14. 重要なスライドは上位に配置

15. 表示レイアウト

16. ホームヒーローは ビジュアル（画像/動画）のみ を使用
17. テキスト中心の「コンテンツレイアウト」は廃止
18. ホーム画面では通常 1枚ずつ切り替える表示 とし、desktop 幅が十分にある場合だけ サブ メイン サブ の 3枚表示へ切り替わる

仕様の正本

• 比率と表示モードの正本は docs/specifications/2026-03-storefront-home-hero-ratio.md を参照

コンテンツの削除・アーカイブ

削除の注意点

1. 完全削除: ゴミ箱から完全に削除すると復元不可
2. アーカイブ: 非公開にすることで、後で再利用可能
3. バックアップ: 重要なコンテンツは削除前にバックアップを取得

推奨手順

1. まず非公開にする
2. 一定期間（例: 1ヶ月）経過後、問題がなければ削除
3. 削除前にデータベースのエクスポートを取得

トラブルシューティング

コンテンツがサイトに表示されない

確認事項:

1. 公開状態が「公開」になっているか
2. 公開日時が過去になっているか
3. GraphQL APIで取得できるか（開発者ツールで確認）

画像が表示されない

確認事項:

1. 画像がアップロードされているか
2. 画像のURLが正しいか
3. VITE_PUBLIC_ASSET_HOSTS または VENDURE_BASE_URL 由来の asset host 設定に WordPress 配信先が含まれているか

表示順序が正しくない

確認事項:

1. order フィールドが正しく設定されているか
2. 同じ order 値の場合は、公開日時の新しい順に表示される

参考資料

• WordPress CMS統合ガイド
• WordPress CMSローカル開発環境
• Advanced Custom Fields (ACF) ドキュメント