FLATテーマのサイト作成講座【第7回】Menu ページを作成する

White Room デモサイト」の作り方、第7回は「Menu ページ」の作成方法についてご紹介します。

Menu ページも前回「#6 Staff ページを作成する」と同様に固定ページで作成していきます。ダッシュボード > 固定ページ > 新規作成 を開いてください。そして、タイトル入力欄に「Menu」と入力してください。

Menu ページ」は次の 1 つのパーツで構成されています。

  1. Menu セクション
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 ページの作成は完了です。