「White Room デモサイト」の作り方、第3回はトップページの作成方法をご紹介します。

WordPress にはウィジェットという機能があります。ウィジェットとは、ドラッグ・アンド・ドロップで簡単に設置や並び替えができるパーツのことで、WordPress では標準で、任意のテキストやカテゴリーの一覧、カレンダーなどのウィジェットが用意されています。これらのウィジェットはテーマで定められたウィジェットエリアにのみ設置が可能で、主にサイドバーやフッターなどに用意されています。

White Room では「ブログのサイドバー」「新着情報ページのサイドバー」「よくあるご質問ページのサイドバー」「フッター」「その他のページ（固定ページ等）の記事下」にウィジェットエリアが用意されていますが、それとは別に、トップページに自分の好きな数だけウィジェットエリアを定義することができるようになっています。他のテーマではあまり見かけない機能で、良くイメージできないと思いますので、まずは次の説明にそって設定をされてみてください。

トップページにウィジェットエリアを設定する

トップページのウィジェットエリアの設定は ダッシュボード > 外観 > トップページ設定 から行います。「White Room デモサイト」では次のように設定されています。

「ウィジェットエリアを追加」ボタンをクリックすると空のウィジェットエリアが追加されます。「ウィジェットエリア名」はサイト上には表示されませんが、ウィジェットの管理画面でウィジェットを追加するときに表示されますので、わかりやすい名称をつけてください。「カラム数」はそのウィジェットエリアのカラム数です。例えばカラム数を 3 とすると、ウィジェットを 6 つ配置したときには、トップページ上に 3 列 × 2 行 に整列されて表示されます。「タイトル」を入力した場合、ページ上でそのエリア（セクション）のタイトルとして中央揃えで表示されます。「背景色」はそのエリア（セクション）の背景色です。未入力の場合は白（#ffffff）となります。

ここで定義した各ウィジェットエリアはドラッグ・アンド・ドロップで並び替えることができます。ひとまず、上記のように入力できたら「Save Changes」をクリックして設定を保存してください。

便利なプラグインのインストール

先ほど定義したウィジェットエリアにウィジェットを配置する前に、便利なプラグインをインストールしておきたいと思います。インストールするプラグインは「Black Studio TinyMCE Widget」です。このプラグインは WYSIWYG エディタのウィジェットを追加することができるプラグインです。WordPress の標準では WYSIWYG エディタのついていないテキストウィジェットしか用意されておらず、テキストを装飾するには自分で HTML を入力する必要がありますが、WYSIWYG エディタ付きのウィジェットであればブログの記事を書くときと同じように、ウィジェット上でボタンをクリックするだけでテキストを装飾したり、画像を追加したりすることができます。

ダッシュボード > プラグイン > 新規追加 から Black Studio TinyMCE Widget と検索し、インストールしてください。

ウィジェットの追加

「Black Studio TinyMCE Widget」のインストールができたら、ウィジェットの追加を行っていきます。ウィジェットの追加は、管理画面の カスタマイズページ もしくは ウィジェットページ で行うことができますが、ここでは実際の画面で表示を確認しながらウィジェットを追加できる カスタマイズページ で作業を行っていきたいと思います。

トップページ1

ダッシュボード > 外観 > カスタマイズ からカスタマイズページを開いてみてください。ページの左側に先ほど定義した「トップページ1〜5」があると思います。上から順に作業を行っていきますので、まずは「ウィジェット：トッププページ1」と書かれたパネルをクリックして開いてください。すると、「ウィジェットを追加」というボタンがありますので、クリックして「Visual Editor」を追加してください。

追加するとエディタが開くと思いますので、そこに文章を入力してください（タイトルは入力しなくて大丈夫です）

。デモサイトでは下記の文章が入力されています。

2004年にオープンしたファイブカフェは、おかげさまで今年10年目を迎えることができました。

これからも愛されるカフェであり続けられるように、頑張っていきますので、何卒よろしくお願いいたします。
（このサイトはWordPress無料テーマWhiteRoomを使用したダミーサイトです。実際の店舗は実在しません。）

文章を入力したら、文章を全選択し、「中央揃え」ボタンをクリックして全体を中央揃えします。ボタンが表示されていないときは「Visual」と書かれたタブをクリックするとボタンが表示されるようになります。

文章の入力・中央揃えが完了したら入力エリア下部の「閉じる」もしくは「ウィジェット：トップページ1」パネル内の「Visual Editor」をクリックするとエディタを閉じることができます。エディタを閉じると右側に表示されているプレビュー画面が更新されて、今入力した文章が反映されたことが確認できます。

トップページ2

トップページ2 のセクションには、3 つのバナーを配置します。「ウィジェット：トップページ2」のパネルをクリックして開き、まずは「Visual Editor」ウィジェットを 1 つ追加してください。追加したら「メディアを追加」ボタンをクリックしてバナー用の画像を挿入します。トップページ 2 のカラム数は「3」としていたので、3 つのバナーが横並びに配置されることになりますが、スマートフォンサイズでの表示時には 1 カラムで表示されることになります。その際に横幅いっぱいのきれいなサイズで表示されるようには、横幅 740px 以上の画像をアップロードする必要があります。デモサイトでは 740 × 246 のサイズでバナーをアップロードしています。

バナー画像をアップロードしたら設定画面が表示されますので、「配置：なし」、「リンク先：なし」、「サイズ：フルサイズ」に設定し、「投稿に挿入」をクリックしてください。

画像の挿入が完了したら、リンクの設定を行います（実は先程の画像の設定画面で「リンク先」を設定することもできますが、そちらの画面では「別ウィンドウで開く」の設定ができません。ここで設定するリンクはサイト内リンクになるので「別ウィンドウで開く」の設定は不要ですが、今後必要になるので統一された手順でご説明したいと思います）。

エディタ上の画像をクリックすると「鉛筆マーク」が表示されるので、それをクリックしてください。すると編集画面が開きます。編集画面上の「リンク先」でリンク先を設定します。リンク先として設定したい朝食のページはまだ作成していないので、「カスタムURL」を選択し、「http://あなたのドメイン/menu/morning/」と入力してください。入力が完了したら「更新」をクリックしてください（リンクを別ウィンドウで開きたい場合は「リンクを新ウィンドウまたはタブで開く」にチェック）。

残り 2 つのバナーも同様の手順で設定します。2 つめのバナーは昼食ページ、3 つめのバナーはバーのページにリンクさせたいので、それぞれ「http://あなたのドメイン/menu/lunch/」「http://あなたのドメイン/menu/bar/」とリンク先を設定しておいてください。

トップページ3

トップページ3 のセクションには、新着情報とブログの更新情報を掲載します。「ウィジェット：トップページ3」のパネルを開き、「最近の投稿（任意の投稿タイプ）」を追加してください。追加すると設定パネルが開きますので、「タイトル：新着情報」、「投稿タイプ：新着情報」、「投稿件数：5件」と設定してください。

ブログの更新情報も同様の手順でウィジェットを追加・設定し、投稿タイプについては「ブログ」を選択してください。

トップページ4

トップページ4 のセクションにはおすすめメニューを掲載します。おすすめメニューには、商品のサムネイル写真・下線付きの商品名・商品の説明、というレイアウトで商品が掲載されていますが、これはショートコード thumbnail_text を使用したものです。ショートコードの説明については「マニュアル」をご覧ください。

「ウィジェット：トップページ4」のパネルを開き、Visual Editor ウィジェットを追加してください。追加したら、「メディアを追加」から商品の画像をアップロードします。ここで注意することは、画像をアップロードした後、画像の挿入は行わないということです。ショートコード thumbnail_text では画像の URL を指定して画像を表示するので、画像の挿入は行わずに画像の URL だけをコピーします。画像の URL は画像アップロード後の設定画面で「リンク先」を「メディアファイル」にすると確認できます。

ここでアップロードする画像も「ウィジェット：トップページ2」で設定した画像と同様、横幅 740 px のものをアップするとスマートフォン表示時も横幅いっぱいにきれいに表示されます。ここでは 740 × 740 の画像をアップロードしています。

画像 URL をコピーできたら、Visual Editor ウィジェットに次のコードを入力してください。タイトルは空白でOKです。（ショートコードが変換されてしまうため、下記のコードでは [ ] の前後に空白をいれています。コピー・アンド・ペーストする際には [ ] の前後の空白を削除してください。）

[ thumbnail_text title="明太パスタ" src="画像のURL" content="ランチメニューの定番パスタ。あっさりとした中に明太子のピリッとした辛味と海苔の香りが広がります。" ]

入力できたら Visual Editor ウィジェットを閉じ、他の 3 つのおすすめメニューについても同様に追加してください。

トップページ5

トップページ5 のセクションはトップページ1 のセクションと同じです。「ウィジェット：トップページ5」のパネルを開き、Visual Editor ウィジェットを追加してください。追加したら、下記の文章をコピー・アンド・ペーストして、全体を中央揃えにしてください。

ファイルカフェでは、大人数でのパーティー結婚式の二次会などを承っております。
お気軽にご相談ください。

TEL／03-5472-77xx

ここまでの設定が完了したらページ左上の「保存して公開」をクリックして設定を保存し、トップページを確認してみてください。ヘッダー、フッター、ヘッダー画像の設定はまだ行っていないので「White Room デモサイト」と完全に同じではありませんが、トップページのコンテンツ内の表示については同じになったのではないかと思います。同じように作業したのにうまく表示できない、という方がいらっしゃいましたらコメント欄にてご質問ください！