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

子ページとは、ある特定のページを親として持つページのことで、URL が http://あなたのドメイン/親ページスラッグ/子ページスラッグ/ のように設定されます。

デモサイトでは、Menu ページの子ページとして「Morning」「Lunch」「Bar」の 3 ページが設定されています。3 ページとも構成は全く同じなので、ここでは「Morning ページ」の作成方法に絞って紹介します。

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

「Morning ページ」は次のパーツで構成されています。

1. Menu セクション
   1. Menu 一覧
   2. 写真

Menu セクション

このページには Menu の一覧と写真 4 点が掲載されていますが、これらを別々のセクションで区切ると間の余白が大きくなりすぎてしまうため、一つのセクション内で row ショートコードを二つ使ってそれぞれを配置しています。次のコードを確認してください。

[ section title="Morning" ]
[ row ]
[ col size="4" ]

[ thumbnail_text title="Morning Set A　¥600-" src="画像URL" content="焼いた自家製パンに、手ごねハンバーグ、目玉焼き、トマトやレタスを挟んでチーズをトッピング。コーヒー付き。" ]

[ /col ]
[ col size="4" ]

[ thumbnail_text title="Morning Set B　¥800-" src="画像URL" content="契約養鶏から仕入れた玉子を２つ使い、軽めのピラフを包んだファイブカフェ定番のヘルシーオムレツ。コーヒー付き。" ]

[ /col ]
[ col size="4" ]

[ thumbnail_text title="Green Smoothie　¥350-" src="画像URL" content="無農薬有機栽培のほうれん草にオレンジとバナナを合わせてスムージーを作りました。軽くすませたいけど、栄養もしっかりとりたいという方向け。" ]

[ /col ]
[ /row ]

[ row ]
[ col size="3" ]

画像

[ /col ]
[ col size="3" ]

画像

[ /col ]
[ col size="3" ]

画像

[ /col ]
[ col size="3" ]

画像

[ /col ]
[ /row ]
[ /section ]

各メニューについては thumbnail_text ショートコードで作成されています。Menu 一覧、写真の各エリアは row、col ショートコードでカラム分割されており、Menu 一覧エリアについては 3 分割（各 col の size を 4）、写真エリアについては 4 分割（各 col の size を 3）となっています。いずれのエリアの写真も 740 × 740 の写真を配置しています。

Menu ページの子ページに設定する

Morning ページを Menu ページの子ページに設定するには、ページ右側の「ページ属性」メタボックスの「親」で「Menu」を選択します。

コメント欄の設定

Morning ページもコメント欄は不要なので、以前の記事「#4 テーマカスタマイザーで全体のデザインを設定する」と同様にコメント欄の表示をオフにしてください。

全て完了したら、ページ右上の「公開」をクリックしてページを公開してください。これで Morning ページの作成は完了です。Lunch、Bar についても同様の手順で作成してみてください！