「White Room デモサイト」の作り方、第6回は「Staff ページ」の作成方法についてご紹介します。
Staff ページも前回「#5 About ページを作成する」と同様に固定ページで作成していきます。ダッシュボード > 固定ページ > 新規作成 を開いてください。そして、タイトル入力欄に「Staff」と入力してください。
「Staff ページ」は次の 2 つのパーツで構成されています。
- Staff セクション
- 注意事項
Staff ページ
Staff セクション
Staff セクションも「About ページ」の各セクションと同様、上下に適度な余白があり、Staff という見出しが中央揃えで表示されています。つまり、section ショートコードが利用されているということですね。
また、3 人のスタッフ紹介が均等に横並びで表示されていることから、ページの横幅（12）を 3 等分して、col ショートコードに size=”4″ がそれぞれ設定されている、ということがわかります。
では、次のコードをページ内容入力欄に貼り付けてみてください。
[ section title="Staff" ] [ row ] [ col size="4" ] [ thumbnail_text title="田中はじめ（デモ用のダミーサイトのため、架空の人物です。）" src="画像URL" content="大学生の時に、イタリアを旅行し、イタリアンコーヒーの魅力にハマる。楽しみは、年に2回のコーヒー買い付けの旅。今までにブラジルやコロンビアなど計8ヵ国のコーヒー豆生産者を訪れている。" ] [ /col ] [ col size="4" ] [ thumbnail_text title="有坂ひとみ（デモ用のダミーサイトのため、架空の人物です。）" src="画像URL" content="フランス留学中に、有名パティシエの家にホームステイ。休日はフランス菓子の作り方や歴史について学ぶ。今の仕事はまさに天職。" ] [ /col ] [ col size="4" ] [ thumbnail_text title="西岡あやめ（デモ用のダミーサイトのため、架空の人物です。）" src="画像URL" content="大学卒業時に、有坂と田中に誘われ、なんとなく手伝っているうちに、10年が経った。野菜マイスターの資格を持つなど食に関しては特にうるさい。" ] [ /col ] [ /row ] [ /section ]
「画像URL」の部分については適当な画像をアップロードして URL を入力してください。URL の確認方法については「#3 White Room でトップページを作成する」をご確認ください。
各スタッフの情報は、thumbnail_text ショートコードを用いて表示されています。このショートコードの詳細についても「#3 White Room でトップページを作成する」で説明していますのでご確認ください。
注意事項
下記が「注意事項」の部分のコードです。「注意事項」の部分は特にセクションを区切る必要もなさそう（上下に広い余白をとる必要がない）だったので、一文だけとなっています。Staff セクションの下に貼り付けてください。中央揃えとなりますので、貼り付けた後に「中央揃えボタン」で中央揃えしてください。
（このサイトはWordPress無料テーマWhiteRoomを使用したダミーサイトです。実際の店舗・人物は実在しません。）
コメント欄の設定
Staff ページもコメント欄は不要なので、前回の記事「#4 テーマカスタマイザーで全体のデザインを設定する」と同様にコメント欄の表示をオフにしてください。
全て完了したら、ページ右上の「公開」をクリックしてページを公開してください。これで Staff ページの作成は完了です。
