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

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

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

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

  1. 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 ページの作成は完了です。