コンテンツにスキップ

WordPress CMS 公開運用マニュアル

この文書は、WordPress CMS を使って Storefront(一般利用者向け画面)のコンテンツを 更新する運用担当者向けの手順書です。実装詳細やトラブルシュートの深堀りは WordPress CMS 操作マニュアル(内部詳細) を参照してください。

文書の役割

この文書で扱う操作:

  • お知らせの作成・編集・公開
  • メインバナー(ホームヒーロー)のスライド差し替え
  • ヘッダー/フッターメニューのリンク編集
  • キャンペーン本文の補助更新(正本は別システム)

この文書では扱わない操作:

  • 実装詳細レベルのトラブルシュート
  • Webhook/キャッシュの内部動作確認
  • ACF カスタムフィールドの JSON 定義管理
  • サーバーログ・Sentry・curl を使った確認

対象者 / 前提

  • 対象者: CMS 編集担当、システム運用担当
  • 必要なもの:
  • WordPress 管理画面のログイン情報(ユーザー名・パスワード)
  • ブラウザ(推奨: Google Chrome / Firefox 最新版)

画面例について: 本マニュアルの画面例は、ローカル開発環境(検証用データ)で 撮影したものです。実際の表示内容・件数・公開状態は運用環境の設定に従います。

WordPress 管理画面は /wp-admin から、ユーザー名(またはメールアドレス)と パスワードでログインします。

WordPress ログイン画面。ユーザー名またはメールアドレス・パスワード入力欄、「ログイン状態を保存する」チェックボックスとログインボタン。下部に「Ritsubi Headless CMS へ移動」リンク

図: WordPress 管理画面のログイン。

  • 画像の準備:
  • ファイルサイズは 500KB 以下推奨
  • 形式は WebP / JPEG / PNG を推奨
  • テキスト・画像ともに掲載前に承認を得てください

何を WordPress で管理するか / 管理しないか

WordPress で管理するもの

項目 説明
お知らせ サイト全体のお知らせ(緊急告知、重要なお知らせなど)
メインバナー ホーム上部のヒーローセクションのスライド
メニュー ヘッダー・フッターのリンク構成
ストア設定 SNS リンク、会社情報、ロゴ、フッターの共通設定
キャンペーン本文 長文本文や補足ビジュアルが必要な場合だけ管理する補助導線

WordPress では管理しないもの

項目 管理先 説明
キャンペーン本体 Vendure Dashboard 公開 URL・一覧表示・対象商品は Vendure の Collection が正本です
ブランド情報 Vendure Dashboard ブランド名・説明・画像は collection で管理します
商品データ Vendure / SMILE 商品マスタ・価格・在庫は連携元システムが正本です
ユーザー・権限 Vendure Dashboard 管理者・承認者のアカウントとロール
受注・請求データ Vendure Dashboard 注文履歴・請求書・納品書

重要: キャンペーン公開の正本は Vendure の Collection です。 WordPress は本文補助としてのみ使います。詳細は「キャンペーンについて」の節を参照してください。

お知らせ更新

お知らせの種類

お知らせには2種類の表示形態があります。

種類 表示場所 用途
通常お知らせ お知らせ一覧ページ 一般的な告知
フィーチャー サイト上部の黄色バナー(固定表示) 緊急告知・重要なお知らせ

Storefront のお知らせ詳細ページ。パンくず(ホーム > お知らせ一覧 > タイトル)、「お知らせ」ラベルと公開日、タイトル、本文。重要なお知らせは上部に赤帯で表示

図: WordPress で公開したお知らせの本文は、Storefront のお知らせ詳細ページに表示されます。

新規作成

  1. WordPress 管理画面にログインする
  2. 投稿 → お知らせ → 新規追加 を開く
  3. 以下の項目を入力する:
  4. タイトル: お知らせのタイトル(50文字以内推奨)
  5. 本文: お知らせの詳細内容
  6. 公開設定: 公開日時を設定(すぐに公開する場合は「公開」をクリック)
  7. 画面右の 公開 ボタンをクリックする

フィーチャー設定(サイト上部の黄色バナー)

重要なお知らせをサイト上部の黄色バナーに固定表示する場合:

  1. お知らせ編集画面を開く
  2. カスタムフィールド 「フィーチャー済み」 にチェックを入れる
  3. 更新 ボタンをクリックする

注意:

  • フィーチャー済みは最大5件まで推奨します
  • 役割が終わったお知らせはフィーチャーのチェックを外してください

編集・削除

  • 編集: お知らせ一覧から該当のお知らせをクリック → 内容を修正 → 更新
  • 削除: お知らせ一覧で該当行にマウスオーバー → ゴミ箱へ移動

更新後の確認

  1. WordPress で保存(更新 または 公開)をクリックする
  2. Storefront のお知らせ一覧ページを開き、新しいお知らせが表示されていることを確認する
  3. フィーチャー設定した場合は、サイト上部に黄色バナーが表示されていることを確認する

メインバナー更新

バナー構成

ホーム上部のヒーローセクションは複数のスライドで構成され、1枚ずつ切り替わって表示 されます。

編集手順

  1. WordPress 管理画面で メインバナー を開く
  2. 次のいずれかの操作を行う:
  3. 既存スライドの編集: 各スライドの項目を変更する
  4. 新規スライドの追加: 「行を追加」をクリックする
  5. 並び替え: スライドをドラッグ&ドロップで順序を変更する
  6. 各スライドで以下の項目を設定する:
  7. 画像(デスクトップ用): デスクトップ表示の画像を選択
  8. 画像(モバイル用): スマートフォン表示の画像を選択(別途推奨)
  9. リード文: バナー上のテキスト(任意)
  10. 表示期間: 開始日時と終了日時(任意)
  11. 更新 ボタンをクリックする
  12. Storefront のホーム画面を開き、バナーが変わっていることを確認する

画像ガイドライン

項目 推奨サイズ アスペクト比
デスクトップ用 2048×663px 2048:663
モバイル用 751×485px 751:485
  • 画像サイズは前後しても構いませんが、比率は固定 です
  • 比率が合わない場合、表示の際に画像の一部が切り取られることがあります
  • 各スライドは画像または動画のみの構成です(テキスト主体のレイアウトは使用しません)

表示期間について

  • 表示期間を設定すると、期間外のスライドは自動的に非表示になります
  • 表示期間を空欄にすると常時表示されます
  • 複数スライドが有効な場合は自動で切り替わります

メニュー更新

メニューの表示位置

メニュー位置 表示箇所 用途
Primary Navigation サイト上部 ヘッダーに表示されるメインリンク
Footer Navigation サイト下部 フッターのリンクセクションやテキストセクション

編集手順

  1. WordPress 管理画面で 外観 → メニュー を開く
  2. 上部の「編集するメニューを選択」で対象のメニューを選ぶ(必要に応じて新規作成も可)
  3. 以下の操作を行う:
  4. 項目の追加: 左側の「ページ」「カスタムリンク」などから追加したい項目を選び「メニューに追加」をクリック
  5. 並び替え: 項目をドラッグして順序を変更する
  6. 削除: 項目の右側にある矢印をクリックして「削除」を選ぶ
  7. 各項目を展開し、ラベルとリンク先 URL が正しいことを確認する
  8. メニュー設定 → 表示位置 で、以下のいずれかにチェックが入っていることを確認する:
  9. ヘッダーに表示したい場合: Primary Navigation
  10. フッターに表示したい場合: Footer Navigation
  11. メニューを保存 をクリックする
  12. Storefront を開き、ヘッダー/フッターのリンクが変わっていることを確認する

注意事項

  • フッターの子メニュー(階層がある項目)は横並びリンクとして展開されます
  • フッターのロゴ・コピーライト・SNS リンクはメニューではなく 設定 → ストア設定 で管理します
  • フッターに注釈・営業時間などのテキストブロックを配置する場合、メニュー項目の displayTypetext_block に変更します
  • 編集後は必ず メニューを保存 をクリックしてください(並び替えだけでは保存されません)

キャンペーンについて

キャンペーンは Vendure DashboardWordPress の2つのシステムで役割が 分かれています。

責務分担

システム 担当範囲 説明
Vendure Dashboard キャンペーン公開の正本 一覧表示・公開 URL・対象商品・説明文・画像を管理
WordPress 本文の補助 長文の説明や追加のビジュアルが必要な場合のみ使用

運用の流れ

  1. 先に Vendure Dashboard でキャンペーンの Collection を作成・更新する
  2. 手順は Vendure Dashboard 操作ガイド を参照
  3. Vendure 側で公開 URL と一覧表示が正しく動作することを確認する
  4. 長文本文や追加ビジュアルが必要な場合だけ、WordPress で 投稿 → キャンペーン → 新規追加 を開く
  5. WordPress 側で本文や画像を設定し、キャンペーンのスラッグが Vendure の Collection スラッグと対応していることを確認する
  6. 公開 をクリックする

[!IMPORTANT] WordPress だけでキャンペーンを公開しても、Storefront のキャンペーン一覧には 表示されません。必ず Vendure Dashboard 側を先に整えてください。

更新後の確認手順

WordPress で保存操作を行うと、自動で Storefront 側のキャッシュが無効化され、 通常は数秒〜十数秒以内に変更が反映されます。

確認手順

  1. WordPress でコンテンツを保存する(更新 または 公開 をクリック)
  2. Storefront の該当ページを開く(すでに開いている場合はリロードする)
  3. 変更が反映されていることを確認する:
操作内容 確認する場所
お知らせ追加 お知らせ一覧ページに新しいお知らせが表示されること
バナー変更 ホーム上部のバナーが変わっていること
メニュー変更 ヘッダー/フッターのリンクが変わっていること

Storefront のお知らせ一覧ページ。日付・「お知らせ」ラベル・タイトルが新しい順に並ぶ。重要なお知らせは画面上部に赤帯(重要バナー)として表示される

図: WordPress で公開したお知らせは、Storefront のお知らせ一覧(/announcements)に反映されます。フィーチャー設定したお知らせは画面上部の赤帯としても表示されます。

反映されないときの一次対応

保存から1分程度経っても Storefront に反映されない場合、以下の順で確認してください。

手順1: 公開状態を確認する

WordPress 管理画面で該当のコンテンツを開き、以下を確認:

  • 公開状態が 「公開」 になっていること (「下書き」「非公開」のままではないか)
  • 公開日時が過去(または現在)になっていること (未来の日時に設定されていないか)

手順2: 再度保存する

画面上で 何も変更せずに「更新」ボタンをクリック する。 これによりキャッシュ無効化が再度実行されます。

手順3: ブラウザをリロードする

ハードリロード(Ctrl+Shift+R / Cmd+Shift+R)を試す。 ブラウザキャッシュが原因で古い表示が残っている場合があります。

手順4: 保守窓口へ連絡する

上記すべてを試しても反映されない場合、システム保守の窓口へ以下の情報を伝えて 連絡してください:

  • 操作した日時
  • 操作したコンテンツの種類(お知らせ / メインバナー / メニュー)
  • WordPress 上で「公開」状態であることの確認結果
  • 「何も変えずに再保存」を試したこと

参照先

資料 用途
Vendure Dashboard 操作ガイド キャンペーン設定、商品管理、顧客管理の操作手順
システム保守ガイド 監視項目、定期点検、障害対応の基準
WordPress CMS 操作マニュアル(内部詳細) Webhook 詳細、ACF 設定、トラブルシュートの深堀り