課題
フード・ドリンク・コース・個室席と情報量が多く、メニュー点数は160件超に上る飲食店サイトの構築依頼。
季節ごとにメニューが変わるため、更新のたびに業者へ依頼するのではなく、店舗スタッフが自分たちで登録・更新できる仕組みが必要だった。
また、おすすめメニューやコースをTopページに掲載したいという要望もあった。
解決法
WordPressのカスタム投稿タイプ（CPT）とタクソノミーを組み合わせたデータ構造を設計し、メニュー登録・更新・Topページ抽出表示までを一元管理できる仕組みを構築した。
大量メニューの初期登録にはCSV一括インポートを活用し、登録工数を大幅に削減した。
結果
コード知識を持たない運用担当者でも簡単に、メニューの追加・変更・削除ができるようになった。
また、Topページへの抽出もカスタムフィールド制御によってわかりやすく実装し、総合的にメニュー操作が分かりやすく実装できた。
本案件はElementorを使用した構築ですが、構築した機能はBricksでも同様に動作します。
実装仕様
- 制作概要
- 飲食店 / メニュー掲載サイト
- 制作規模
- 固定ページ複数・CPT4種・タクソノミー複数
- 対応スコープ
- デザイン, CPT・タクソノミー設計, 構築
- 使用ツール
- Elementor, JetEngine
- データ構造設計
以下の4CPTとタクソノミーを設計した。
- フードCPT：フードカテゴリー（ターム）に紐づく。タームのループ内にCPTのループを作ることで、フロントエンドではカテゴリー別にメニューが整列して表示される
- ドリンクCPT：ドリンクカテゴリー（ターム）に紐づく。「日本酒」タームに属するアイテムのみをこだわりページへ抽出表示する機能を実装
- 座席CPT：個室席約20室をCPTで管理。カルーセルとギャラリーの2形式で複数ページに掲載できる1ソース2出力の構成
- コースCPT：13項目のカスタムフィールドを設け、食べログ同等の情報量をアコーディオン形式で表示。読み込み負荷を抑えつつ情報を格納する設計
- Topページ抽出表示
CPTにブール型のカスタムフィールドを設け、Topページへの抽出フラグを判定。
非コーダーでも「Topページに表示」フィールドがONであればTopページへ表示されると、簡単に見て取れる作りを実現した。抽出処理にはJetEngineのQuery Builderを用いており、対象のフィールドがtrueとなっている投稿のみを取得するカスタムクエリを作成。
バックエンドでチェックを入れるだけの簡単操作でフロントエンドにおすすめメニューが表示できる、動的な表示を成立させた。この設計にすることでメニューデータをワンソース化することもできており、名前が変わったメニューや既に削除されたメニューがおすすめ欄に表示されるのを防ぐことにも成功している。
- 大量メニューの登録
支給されたメニューデータを元に、カスタムフィールドの設定と付け合わせてWPインポート用のCSVデータを作成。
一括インポートすることで、大量のメニューも短時間での登録が実現できた。