https://onodaiku-tsuruoka.com/
課題
施工事例が順次増えていく工務店サイトの構築依頼。
事例が増えるたびに業者へ更新依頼をかける運用は非効率なため、スタッフ自身が管理画面から事例を追加・更新できる仕組みが求められた。
解決法
WP管理画面にOptionsページを追加し、事例画像とタイトルを任意数登録できる仕組みを構築した。
フロントエンドではLightbox対応のギャラリー形式で事例を表示し、登録内容がそのまま動的に反映される設計にした。
結果
施工事例のギャラリー表示と自己更新フローを実現し、事例追加のたびに発生していた業者への更新依頼を不要にした。
本案件はElementorを使用した構築ですが、構築した機能はBricksでも同様に動作します。
実装仕様
- 制作概要
- 工務店 / 実績・求人サイト
- 制作規模
- 固定ページ7（プライバシーポリシー含む）・お問い合わせフォーム1
- 対応スコープ
- デザイン, 実績ギャラリー仕様策定, 構築
- 使用ツール
- Elementor, JetEngine, JetFormBuilder
- 事例管理機能
WP全体から参照できるカスタムフィールドを設ける機能「Optionsページ」を用い、事例管理フィールドを作成。
Repeaterフィールドを用いることで事例画像を任意数登録できるようにし、かつ並び替えも簡単に行えるようにした。
CPTではなくOptionsページ+Repeaterフィールドを用いることで、操作が1画面で完結し、かつデータも小さいシンプルな構成を実現した。
- フロントエンド出力
Optionsページに登録されたRepeaterフィールドのデータをJetEngine Listing Gridで出力し、サムネイル画像とキャプション（事例タイトル）が並ぶギャラリー形式で表示した。
対象画像をクリックするとLightboxで拡大表示される仕組みを組み込んでいる。
Repeaterフィールドの行の増減に伴ってギャラリーアイテムも増減する仕組みとなっており、事例の登録・更新・削除が即座に反映される。