使える!飲食店メニュー作成WordPressプラグインFood and Drink Menu

飲食店WordPressサイトのメニュー作成効率化

飲食店ホームページのメニュー作成をさくさく&きれいに!Food and Drink Menu

最近、実店舗飲食店のWordPressサイトの作成を承りました。

サービス内容の概要一覧ページや商品一覧や製品説明ページを作ったことはありましたが、テキストでのリストというのは使い回しが効かないのがなんとも残念です。

どういうことかというと、

ホームページの回遊率や成約率を上げる方法として、または目立たせたい内容を書いたページに注目を集める方法として、

別ページでも紹介
→ リンクでそのページへ誘導

が基本ですが、単なる箇条書きのメニューでは目立たせても見ている人にあまり強い印象を残せないように思っていました。

飲食店の場合、

季節メニューや新作メニューなどを別ページウィジェットに載せる
→ そのメニューのページに飛び、思わずよだれが出そうな説明や画像が見られる

といった仕組みにすると、効果がありそうですよね。

WordPressの場合、動的な仕組みを利用して一度作成したコンテンツを簡単に活用できるのが大きなメリットのひとつ。

新規ブログ記事をトップページに紹介するように、メニューをコンテンツとして簡単に使えるようにできる方法はないのかな?と思っていました。

で、今回メニューページの作成に当たって、上記のようなことも含め、きれいに作成できる方法について検索してみたところ、下記のページを発見。


ウェブクリエイターボックスレストラン等、飲食店Webサイトの制作Tipsと実例まとめ

ありがたや!と紹介されていたプラグイン、Food and Drink Menuを使ってみました。

わかってみれば簡単だったのですが、英語説明解読に案外手間取ったので、使い方をマニュアル的備忘録としてまとめておこうと思い、ココではシンプルなメニューの作成方法について書いてみました。

Food and Drink Menuのインストール&有効化

管理画面プラグインページの新規追加から、
新規追加ボタン

Food and Drink Menuを検索、
プラグイン新規追加画面

検索結果からインストールボタンをクリック
「Food and Drink Menu」のインストール

有効化しておきます。
プラグイン「Food and Drink Menu」の有効化

Food and Drink MenuのMenusとMenu Itemsの関係

有効化すると、管理画面左のメニューに Menus と Menu Items という項目が追加されます。
管理メニュー上のMenus

この「Menus」でメニューの分類項目を、「Menu Items」 でメニューの項目を管理します。

どういうことかというと、例えば

◆パスタ

  • ボロネーゼ
  • ペペロンチーノ
  • ・以下略・

◆ピザ

  • ミックスピザ
  • シーフードピザ
  • ・以下略・

といったメニューの場合、

パスタ ピザ といった、メニューの種類・ジャンルなどの分類項目
→ Menu

ボロネーゼやミックスピザなど、メニューの中での料理名・品目名などのメニューそのものの項目
→ Menu Item

ということです。

では、まず、分類項目の方のMenusを作成していきます。

Menusを作成

メニューバーのMenusをポイントして、Add Menu をクリックします。
Add Menu

投稿ページと同様のページが開きます。
Menu作成画面

タイトル欄にメニュー分類項目を入力します。
パーマリンクをタイトル名にしている場合はスラッグを半角英数にしておきましょう。
公開ボタンをクリックします。
Menuの編集画面

同様にMenu:メニュー分類項目を追加していきますが、2つ目を入れ終わったところで管理メニューのMenusをクリックして開いてみると、以下のようにメニューの分類項目が登録されていることが確認できます。
Menusメニュー分類項目の一覧

分類項目の数だけ入力していきます。

◆効率化Tips
プラグイン「Duplicate Post」をインストールしておくと、投稿やページの複製が簡単にできるようになりますが、Menuの複製にも同様に使うことが出来ます。Duplicate Post

Menuの複製を行うには、Menu一覧で複製したいMenu名の下をポイントし、”複製”をクリックします。
Menuの複製で効率化

下書きでコピーが一覧に追加されます。
特にMenuに関して追記事項がなければ、複製したMenuで修正が必要なのは、Menuタイトルとスラッグの変更、公開にする、という3点だけで、これらはすべてクイック編集で変更可能です。

コピーが追加される

クイック編集で編集を加えるには、一覧上でクイック編集をクリックし、
クイック編集を活用

タイトル・スラッグ(半角英数で!)を変更して公開済みとし、更新ボタンをクリックすればOKです。
クイック編集の内容

では、次にMenu Itemsを入力していきます。

Menu Itemsを入力

管理メニューのMenu Itemsをポイントして、表示されるショートカットからAdd Menu Itemをクリックします。
Menu Itemを追加

投稿ページが表示されますので、まず、上から順に

  • タイトル
  • パーマリンク(スラッグ)
  • 記事欄にメニューの説明

を入力します。
Menu Itemの入力項目

次に画面右下にある、Menu Sectionsにこのアイテムを振り分けたい分類名を入力して追加ボタンをクリック
Menu Sectionに分類するMenu名を追加

Price欄に価格を、
画像を載せたい場合はアイキャッチ画像を設定します。
Menu Itemへの価格とアイキャッチ画像の追加

公開ボタンをクリックします。

※Menu Sectionsに分類名を追加することで先ほどのMenuに紐付け・分類されるようになっています。
これを入れ忘れると、後でメニューアイテムとして表示されませんので、特に注意して下さい。

アイキャッチ画像を設定するとメニューアイテムの名称や説明文とともに以下のように表示されます。
アイキャッチを設定した場合の例

アイキャッチ画像を設定しなかった場合は、テキストのみが表示されます。
アイキャッチ画像を設定しなかった場合の表示

視覚的に魅せたいメニューにはアイキャッチ画像をつけ、ドリンクメニューなどではテキストのみといった使い分けが出来ます。

では、続けてMenuアイテムの入力をしていきましょう。

◆効率化Tips
たくさんのアイテムを入力する場合、こちらでもプラグイン「Duplicate Post」の機能で複製は可能です。特に各メニューアイテムの書式や表現を統一したい、似たようなメニューアイテムがたくさんある、といった場合には複製する方が効率がいいと思います。

メニューアイテムは、編集画面でしか編集できない項目がありますので、アイテム一覧ページで複製するより、1アイテムを公開後、更新ボタン左横にある「新規下書きとしてコピー」をクリックしての複製を行う方がページ切り替えをいちいちしなくて済むので効率的です。
新規下書きとしてコピー

Menuアイテムのインプットが終わったら、それぞれのMenu:メニュー分類項目の表示位置を決定していきます。

Menu Layoutを設定する

このFood and Drink Menuは一列表示と2列表示を選択できるようになっています。
これを設定するにはMenu(メニューの分類項目の方)の投稿画面でクリックして指定するだけです。

管理メニューのMenuをクリックし、一覧からどれかひとつのMenuを編集をクリックして開きます。
任意のMenuの編集画面を開く

Menu Layout設定欄は編集ページの下部の方に表示されています。
MenuLayout

※表示されていない場合は編集ページの右上にある表示オプションをクリックし、Menu Layoutにチェックを入れてください。
表示オプションでMenuLayoutを表示させるには

Menu Layout設定欄では4列の表がありますが、1列目と4列目に作成したMenuが全て表示されているのが初期の状態です。

1列目のMenu項目をクリックすると2列目にMenu項目が移動し、表示が緑色になります。
MenuLayoutの設定FirstColumn

4列目のMenu項目をクリックすると3列目にMenu項目が移動します。
MenuLayoutの設定

この2列目と3列目が実際のメニュー上での1列目:First Column と2列目:Second Columnを表しています。

First Column、Second Columnの欄に緑色で表示されているMenu分類項目が表示されるというわけです。

2列目のFirst ColumnだけにMenu項目を配置すれば、
1列メニューレイアウト

メニューページ上の表示は1列になり、
1列メニューレイアウトでの表示

2列目:First Column、3列目:Second Columnともに配置するようにすると
2列メニューレイアウト

メニューページ上の表示は2列になります。
2列メニューレイアウトでの表示

この表示は後からでも何回でも変更が出来ます。

指定した列からそのMenuを取り除くにはもう一度2,3列目のグリーンのメニューをクリックすればOKです。

表示後のバランスなどを見て調整をしましょう。

Settings画面の設定内容

Settingsはデフォルトのままでも特に問題はありませんが、別のCSSなどを適用したい場合や、アイキャッチ画像の表示サイズの調整などが可能です。
画像内の説明を参考にして下さい。
Setting画面

※Classicの場合は以下のようなスタイルになりますが、Menu Sectionでの入力が英語で設定されていないとフォントスタイルの適用はできないことに留意してください。
クラシックCSSの例

Menusからショートコードをコピーしておく

分類のMenuの一覧、Menusを開きます。
Menu一覧を開く

それぞれのMenuにショートコードが記載されています。
Menu一覧

これを表示させたい順にテキストファイルなどにコピペしておきます。
ショートコードをコピぺ

メニューを表示させる固定ページを作成し、ショートコードをペーストする

メニューを表示させる固定ページを用意します。

既存のメニューを表示させたい固定ページを編集で開くか、固定ページの新規追加→新規ページを作成します。

投稿スペースに先ほどコピペしておいたショートコードを貼り付けます。
このとき、ビジュアルエディタではなく、テキストエディタで貼り付けることに注意して下さい。
メニュー表示させる固定ページに貼り付け

更新、または公開で完了です。
シンプルメニュー完成

いかがだったでしょうか?
手順を覚えてしまえば簡単ですね!

応用・活用でいろいろと使えますが、今日のところはこの辺で(^^)

お役に立ちましたら、ツイートなどしていただけるとハッピーです!!

Published:2016/02/13

Written by

コメントを残す