カフェやコーヒーショップのサイトは、「どんな時間を過ごせる店か」を伝える役割が大きく、写真とSNS、豆や焼き菓子のネット販売との組み合わせで価値が出ます。この記事では、WordPressで店の世界観を伝えつつ、Instagram との連携、イベント告知、コーヒー豆のオンライン販売までを無理なく運用できる構成にする手順を解説します。メニューや営業時間の載せ方といった飲食店共通の基本は、レストラン向けとは別の角度から必要な点だけ触れます。
カフェサイトが担う役割を整理する
カフェを探す人は、料理の内容だけでなく「落ち着いて過ごせるか」「一人で入りやすいか」「作業ができるか」といった過ごし方で店を選ぶことが多いです。サイトでは次の情報を、写真と短い文章で伝えます。
- 店内の雰囲気（席の種類、明るさ、混みやすい時間帯）
- Wi-Fi・電源の有無、PC作業や長時間利用の可否、利用時間の目安
- 子連れ・ペット同伴の可否、テラス席の有無
- 扱っている豆、焙煎の考え方、季節のドリンクや焼き菓子
- 営業時間、定休日、アクセス
作業利用のルールは、書いておかないと来店後の行き違いになりやすい項目です。混雑時の時間制限などがあれば、店舗情報ページにはっきり書いておくと双方が気持ちよく過ごせます。
デザインとテーマの選び方
カフェのサイトはロゴ・配色・写真のトーンで印象が決まります。ブロックテーマ（Twenty Twenty-Five など）を使えば、サイトエディターの「スタイル」から配色やフォントをまとめて設定でき、ページごとにばらつきが出にくくなります。Kadence や Blocksy などの汎用テーマも使えますが、ヘッダーの組み立てや無料版で使える機能はバージョンで変わるため、公式の機能一覧で確認してから選んでください（2026年10月現在）。
写真は、店内・ドリンク・焼き菓子・豆のパッケージなど、用途別にトーンを揃えて撮ると統一感が出ます。アップロード前に長辺2,000px前後に縮小し、代替テキストには写っているもの（「窓際のカウンター席とハンドドリップのコーヒー」など）を書きます。トップの写真を大きくするほど表示は重くなるので、PageSpeed Insights でスマートフォン表示の速さを確認しながら調整します。
メニューは季節で入れ替えやすくする
カフェのメニューは季節限定のドリンクや焼き菓子の入れ替えが多いのが特徴です。定番メニューは固定ページに、季節限定は「お知らせ」や専用カテゴリーの投稿にして、トップページに最新の数件を表示する形にすると、入れ替えのたびにメニューページ全体を直さずに済みます。
価格は税込の総額で表示し、店内飲食と持ち帰りで価格が異なる場合はその旨を書きます。メニュー表の画像だけで済ませず、品名と価格はテキストで載せておくと、スマートフォンでも読みやすく、検索や読み上げにも対応できます。
Instagram との連携
カフェはSNS、特に Instagram で新メニューや店内の様子を発信することが多く、サイトに最新の投稿を表示したいという要望がよくあります。方法は大きく2つあります。
- 個別の投稿を埋め込む: 投稿のURLを使って埋め込む方法です。WordPress コアの自動埋め込み（URLを貼るだけで表示される仕組み）は、Meta 側の仕様変更を受けて Instagram への対応が外されているため、URLを貼っても表示されません。Instagram 側で取得できる埋め込みコードを「カスタムHTML」ブロックに貼るか、プラグインを使います。
- フィードをプラグインで表示する: Smash Balloon Social Photo Feed のような、利用者が多く更新が続いているプラグインで、アカウントの最新投稿を一覧表示する方法です。
Instagram の API は仕様変更が多く、旧来の Basic Display API は2024年12月に提供が終わったとされています。現在はプロアカウント（ビジネスまたはクリエイター）での連携を求められることが多く、連携方法や必要な権限はプラグインと Meta の開発者向けドキュメントで最新の情報を確認してください。フィードが急に表示されなくなったときは、まずプラグインの管理画面で連携が切れていないか（アクセストークンの期限切れなど）を確認します。
フィード表示は外部から画像を読み込むため、トップページの最上部ではなく中ほどから下に置くと、最初の表示が遅くなりにくくなります。
イベントやワークショップの告知
カッピング会やハンドドリップ教室、ギャラリー展示などのイベントを行う店では、イベント情報を投稿のカテゴリーとして分けるか、The Events Calendar のようなイベント管理プラグインを使います。開催日・時間・定員・参加費の有無・申込方法を毎回同じ順番で書く型を決めておくと、読む側も比較しやすくなります。申込をフォームで受ける場合、集めた氏名や連絡先は個人情報なので、プライバシーポリシーへのリンクを置きます。
コーヒー豆や焼き菓子をネット販売する
店で人気の豆やドリップバッグをネットでも売りたい場合、WooCommerce を使えば WordPress の中にショップを作れます。外部のネットショップサービスを使い、サイトからリンクする方法もあり、商品数が少なく運用の手間を減らしたいならそちらが向いていることもあります。
WooCommerce で始める場合の流れと注意点は次のとおりです。
- 決済の設定: Stripe や PayPal などの決済サービスの連携は、各サービスのドキュメントに従い、テストモードで注文から入金確認までを通してから本番に切り替えます。
- 配送設定: 豆の重さや梱包サイズで送料が変わるので、配送クラスを使って商品ごとに送料を分けます。
- 法的な表示: ネット販売では特定商取引法に基づく表記のページが求められます。食品を販売する場合は、商品の種類や販売形態によって食品表示や営業許可が関わるため、保健所や専門家に確認してから始めてください。
- 焙煎日と賞味期限: 焙煎日や発送までの日数を商品ページに書いておくと、問い合わせが減ります。
ショップを加えるとプラグインの数と更新の手間が増えます。本番で直接試さず、ステージング環境で更新や設定変更を確かめ、作業前にはバックアップを取る運用にしておくと安心です。
公開前の確認
スマートフォンで、トップから営業時間・アクセス・メニューにすぐたどり着けるか、Instagram のフィードやイベント情報が表示されるか、ショップがある場合はテストモードで注文が最後まで通るかを確認します。営業時間の変更や臨時休業は、自社サイト・Googleビジネスプロフィール・SNSで同じ内容になるよう、更新する場所を一覧にしておきます。
まとめ
- カフェサイトは、雰囲気や過ごし方（作業可否、席、混雑時間）を写真と文章で伝える役割が大きい
- 季節メニューは投稿として入れ替え、定番は固定ページに分けると更新が楽になる
- Instagram 連携は API の仕様変更が多いので、プラグインと Meta のドキュメントで最新の方法を確認する
- 豆や焼き菓子の販売は WooCommerce か外部ショップを選び、決済はテストモードから始める
- 食品のネット販売は、特定商取引法の表記や食品表示・営業許可を事前に確認する