「White Room デモサイト」の作り方、第7回は「Menu ページ」の作成方法についてご紹介します。
Menu ページも前回「#6 Staff ページを作成する」と同様に固定ページで作成していきます。ダッシュボード > 固定ページ > 新規作成 を開いてください。そして、タイトル入力欄に「Menu」と入力してください。
「Menu ページ」は次の 1 つのパーツで構成されています。
- Menu セクション
Menu ページ
Menu セクション
Menu ページの構成も Staff ページとほぼ同じです。section ショートコードで Menu セクションが定義されていて、その中に row、col ショートコードで 3 カラムに分割されたメニューが並んでいます。
では、次のコードをページ内容入力欄に貼り付けてみてください。
[ section title="Menu" ] [ row ] [ col size="4" ] [ thumbnail_text title="Morning" src="画像URL" content="8:00 - 10:00" link="http://あなたのドメイン/menu/morning-menu/" ] [ /col ] [ col size="4" ] [ thumbnail_text title="Lunch" src="画像URL" content="11:00 - 14:00" link="http://あなたのドメイン/menu/lunch/" ] [ /col ] [ col size="4" ] [ thumbnail_text title="Bar" src="画像URL" content="16:00 - 25:00" link="http://あなたのドメイン/menu/bar/" ] [ /col ] [ /row ] [ /section ]
「画像URL」の部分については適当な画像をアップロードして URL を入力してください。URL の確認方法については「#3 White Room でトップページを作成する」をご確認ください。デモサイトでは 740 × 740 の画像を設定しています。
各メニューの情報は、thumbnail_text ショートコードを用いて表示されています。「#6 Staff ページを作成する」でもスタッフ情報を thumbnail_text ショートコードを用いて表示しましたが、ここでは各メニューの詳細ページへのリンクを適用するために link 属性でリンク先を設定しています。まだ詳細ページは作成していませんが、どのような URL で詳細ページを作るか頭の中で決めて既述します。
コメント欄の設定
Menu ページもコメント欄は不要なので、以前の記事「#4 テーマカスタマイザーで全体のデザインを設定する」と同様にコメント欄の表示をオフにしてください。
全て完了したら、ページ右上の「公開」をクリックしてページを公開してください。これで Menu ページの作成は完了です。
