WordPressでレストラン・カフェなど飲食店HPを作る方法|オススメWordPressテーマを紹介します!

書評ブログ向けWordPressテーマのおすすめは?人気のSWELLでデモサイトを作ってみた
初心者

お店のHPを作りたい
WordPressが良いっていいたけど、何から始めたらいいの?
あんまり予算はない
オシャレなデザインにしたい
集客力のあるWordPressって何?

その疑問解決します。

WordPressを使ってレストランやカフェといった飲食店のホームページを作成する方法を初心者向けに解説します。

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

【デモサイト】WordPressで作る飲食店のホームページデザイン

【デモサイト】WordPressで作る飲食店のホームページデザイン

まずはサンプルです。WordPressを使うと以下のようなデザインのホームページを作ることができます。

飲食系のサイト

中華レストラン
カフェ
SWELlデモサイト(飲食店)
カフェ
SWELL企業デモサイト
旅館
茶葉農園
お茶屋
バー

サイトを作る最初のステップWordPressテーマの購入

WordPressテーマの購入

WordPressテーマとはデザインテンプレートのことです。

テンプレートは色んな種類がありますが、初心者向けに扱いやすくサポートの付いているSWELLをおすすめします。

他のテーマでも全然OKです。

テーマによって出来ることと、出来ないことがあります。サポートがなかったりするテーマもあるので、しっかり選びましょう。

本記事ではSWELLを使ったサイトの作り方を紹介していますので、不安な方はSWELLでお試しください。

SWELLの購入方法

トップページを作る

サイトのトップページを作るステップです。

ページを作る

操作内容

「固定ページ」→「新規作成」をクリック。

操作内容

「タイトルを追加」→「トップページ」と入力。

操作内容

「SWELL設定」→「サイドバー」で「非表示」を選択。

操作内容

「設定」→「コンテンツ下の余白をなくす」にチェックを入れる。

操作内容

「公開」をクリックし設定保存。

トップページを指定する

作成したページをサイトのトップに表示する設定を行います。

操作内容

「設定」→「表示設定」でページを移動。

「ホームページの表示」で「固定ページ」にチェックを入れる。

「ホームページ」に先程作成した「トップページ」を選択。

「変更を保存」して設定を有効化。

以後、固定ページで作成したトップページが、サイトのトップに表示されます。

メインビジュアルを設定する

メインビジュアルはサイトにあクセスしたときに最初に表示される部分です。

SWELLでは画像の他、動画ファイルをメインビジュアルに指定できます。

メインビジュアルのオプション

  1. 画像
  2. スライドショー
  3. 動画

メインビジュアルを設定していきます。

操作内容

「外観」→「カスタマイズ」をクリック。

「トップページ」→「メインビジュアル」をクリック。

メインビジュアルの表示内容から好きなオプションを選択。

メインビジュアル上のメインテキストとサブテキストの設定です。

メインテキストとサブテキストは、いわゆるキャッチコピー。設定するとメインビジュアルの上に表示されます。

操作内容

【任意】ロゴ画像の設置

店舗のロゴマークがある場合の設定です。サイト上部に表示されます。

操作内容

「外観」→「カスタマイズ」をクリック。

「ヘッダー」をクリック。

「ロゴ画像の設定」をクリックし、任意の画像をアップロード。

サイトに表示する画像のサイズはこの設定画面から指定できます。

ロゴ画像の位置の調整

カスタマイザー内「ヘッダー」での作業です。

操作内容

パソコンサイト

「レイアウト・デザイン設定」の→「ヘッダーレイアウト(PC)」の任意のオプションを選択しましょう。

操作内容

スマホサイトサイト

「レイアウト・デザイン設定」の→「ヘッダーレイアウト(SP)」の任意のオプションを選択しましょう。

操作内容

「」→「」をクリック。

操作内容

「」→「」をクリック。

【任意】記事スライダーを非表示にする

記事スライダーはメインビジュアルとコンテンツエリアの間に表示されるパーツです。ブログだとよく使う機能ですが、飲食店サイトには不要なため非表示にします。

操作内容

「外観」→「カスタマイズ」をクリック。

「トップページ」→「記事スライダー」をクリック。

「設置しない」を選択。

【任意】下層ページを作る

トップページ以外のページを作る方法です。

ページを作る

操作内容

「固定ページ」→「新規作成」をクリック。

操作内容

「タイトル」に任意の名称を入力。

操作内容

ページの中身を作る。

サイドバー無しの1カラムにしたい場合は、SWELLL設定でレイアウトを指定しましょう。

操作内容

「SWELL設定」→「サイドバー」で「非表示」を選択。

操作内容

「パーマリンク」にページURLを入力。

SEOを考慮する場合、ページの名称を英単語にしたもの入力するのがおすすめです。

例:アクセス→access

不必要なページ・投稿を削除する

WordPressをインストールすると自動で作成されるページがあります。

不要なので削除しましょう。

不要な固定ページを削除する

まずは固定ページ上にある不要なページを削除します。

WordPress初期状態では「サンプル」「プライバシーポリシー」ページが作成されています。この2つのページを削除します。

操作内容

「固定ページ」→「固定ページ一覧」をクリック。

「サンプル」「プライバシーポリシー」にチェックを入れる。

「一括操作」から「ゴミ箱へ移動」を選択。

不要な投稿を削除する

固定ページと同様に投稿一覧にある不要な投稿を削除します。

操作内容

「投稿」→「投稿一覧」をクリック。

「Hello world!」にカーソルをあわせる。

「ゴミ箱へ移動」を選択。

スマホメニューの設置

飲食店サイトに訪問するユーザーはスマホで閲覧しているケースのほうが多いです。

スマホでアクセスした時に、スマホ専用のメニューが表示される設定をしましょう。

【ヘッダー】スマホメニュー設置

「ヘッダー」はページの先頭部分のことです。開閉式のメニューを設置します。

操作内容

「外観」→「メニュー」をクリック。

操作内容

「メニュー名」→に任意の名称を入力。

「メニューを作成」をクリック。

作成したメニューをスマホの開閉メニューの位置に指定します。

操作内容

「スマホ開閉メニュー内」にチェック。

「メニューを保存」をクリック。

メニューの中身を作ります。

左手の「メニュー項目を追加」から任意のページを選択します。

操作内容

「トップページ」にチェックを入れて、「メニューに追加」をクリック。

この操作でメニューにトップページが追加されました。同じ操作で自由にメニューに好きなページを追加しましょう。

【フッター】スマホ固定メニュー設置

「フッター」とはページの最後尾のパーツです。SWELLでは固定で表示するメニューを設置できます。

ユーザーが即問い合わせできるよう、スマホでタップするだけで電話がかかるメニューを作りましょう。

基本的な操作方法は、ヘッダーにメニューを設置した作業と同じです。

操作内容

「外観」→「メニュー」をクリック。

操作内容

「新しいメニューを作成しましょう。」をクリック。

操作内容

「メニュー名」に任意の名称を入力。

例:スマホフッター

操作内容

「メニューを保存」をクリック。

作成したメニューをスマホのフッターに表示する設定です。

操作内容

「固定フッター(SP)」にチェックを入れる。

「メニューを保存」をクリック。

メニューの中身を作ります。

トップページヘのリンクと、タップ時に電話をかけるリンクを作る作業です。

操作内容

メニュー項目を追加から「全て表示」をクリック、

「トップページ」にチェックを入れて「メニューに追加」をクリック。

操作内容

「表示オプション」をクリック。

「説明」チェックを入れる

トップページの「説明」に以下を入力。

「icon-home」。

次に電話をかけるリンクを設置します。

操作内容

「カスタムリンク」をクリック。

URLに以下の形式電話番号を入力

tel:000000000

リンク文字列に「電話」と入力。

「電話」の部分は任意のテキストでOKです。この部分がスマホメニューに表示されます。

「メニューに追加」をクリック。

説明に「icon-phone」と入力。

スマホ固定フッターの色をアレンジする方法です。

操作内容

「外観」→「カスタマイズ」をクリック。

「サイト全体設定」→「下部固定ボタン・メニュー」をクリック。

「固定フッターメニューの背景色」で任意の色を選択。

固定フッターメニューの文字色」で任意の色を選択。

固定フッターメニューの背景不透明度」で背景の透明具合を指定できます。数値が0に近いほど透明度が増します。

「公開」をクリックし設定を保存。

サイト名を設定する

検索エンジンに認知される「サイト名」を設定します。

サイト名の設定

操作内容

「設定」→「一般」をクリック。

「サイトのタイトル」にサイト名を入力。

飲食店向けプラグイン

飲食店向けプラグイン

「プラグイン」とはWordPress用語で拡張プログラムのことです。

例えば問い合わせフォームを簡単に設置できるプラグインやアニメーション効果のあるプラグインがあります。WordPressのプラグインは無料で公開されているものが多いのが特徴です。

プラグインの導入は必須ではありません。用途に合わせて自由にプラグインを追加しましょう。

飲食店サイト向けおすすめプラグイン

  1. アニメーション効果プラグイン
  2. 問い合わせフォームプラグイン
  3. SEO系プラグイン
  4. バックアッププラグイン
  5. 高速化プラグイン

アニメーション効果プラグイン

画像やテキストをふんわり表示したり、横からスライド表示させるアニメーション機能。
無料のプラグインで簡単に設定できます。

おすすめなのはBlocks Animationプラグイン

ページの編集画面から設定したいエフェクトを選ぶだけというシンプルな仕組みです。プログラムコードを一切編集せずにオシャレなエフェクトを設定できます。

かんた

「ちょっと高級感を出したい!」なんて時に使えます。

問い合わせフォームプラグイン

問い合わせフォームプラグイン
問い合わせフォームプラグイン

ホームページ定番の問い合わせフォーム。
WordPressなら無料のプラグインで簡単に作成できます。

無料でおすすめなのはWPForms Liteプラグイン。

直感的な操作でフォームを作ることができます。

SEO系プラグイン

バックアッププラグイン

サイト運営中、うっかり作業ミスでサイトのデータが消えてしまった時に備えてバックアップを用意しましょう。

バックアップを定期的に行うのがおすすめですが、いちいち手動でやっていたら煩雑になりますよね?

WordPressには自動でバックアップを定期的に作成する無料プラグインがあります。

運営しているサーバー内にバックアップファイルを生成するプラグインの他、バックアップデータを外部に自動的にアップロードするものがあります。1つじゃ不安だ!という場合は、複数併用しても構いません。

バックアップファイルからサイトを復元するのが簡単なタイプを選ぶのが初心者にはおすすめです。

データベースのバックアップがあっても、どうやって復元していいか分かりませんよね?

WordPressの管理画面から簡単にバックアップを使ってサイトを復元できるタイプを選びましょう。

高速化プラグイン

まとめ

WordPressテーマSWELLを使った飲食店ホームページの作り方を紹介しました。

Webサイト制作の専門知識がなくても、立派なサイトを作ることができますん。ぜひ挑戦してみてください。

よかったらシェアしてね!
  • URLをコピーしました!
目次