前回まででテーマのカスタマイズが出来ました。 ヘッダー画像でオリジナルショップ感は出せたものの…現時点ではショップサイト（フロントページ）にアクセスすると記事一覧が表示されていますよね。
これを、オススメ商品などが表示されるように変更していきましょう。
1.フロントページを指定する
最初にフロントページとして利用するテンプレートを選択します。 Woocommerceではインストール時、自動的に５つの固定ページを作成してくれています。今回はWoocommerceが用意してくれた固定ページを使用しましょう。
ショップサイトの管理画面から、設定 > 表示設定 を開きます。
ホームページの表示を固定ページに変更し、 ホームページのプルダウンで「ショップページ」を選びます。
下部にある変更を保存ボタンで、設定を保存してください。
管理バー「サイトを表示」からフロントページを確認してみましょう。
投稿記事ではなく、商品が表示されるようになりました。 2.フロントページを作る では固定ページ内で表示される内容を変更していきます。
ショップブログを書きたい場合
ショップサイト側で新商品の紹介など、ブログを書きたい場合もあると思います。 いまのままの設定ですとブログ一覧のページがありません。
ブログ一覧のページは ①新規固定ページを作成 ②表示設定の「投稿ページ」で該当の固定ページを選択 で作成することが出来ます。
①新規固定ページを作成
ブログ一覧用の固定ページはタイトル、パーマリンクのみを設定します。
②表示設定の「投稿ページ」で選択
外観のメニュー設定からヘッダーナビゲーションに追加することも出来ます。
2.フロントページを作る
フロントページに表示させる内容は、固定ページの編集画面で設定することが出来ます。
固定ページの編集画面を見てみましょう。
編集画面を開くと、空のページが表示されます。 「＋」アイコン、ブロックの追加をクリックしてください。
いくつか候補が表示されている下に「全て表示」のボタンがあります。 クリックして下さい。
WooCommemerce用のブロックがまとめて表示されている部分がありますね。 この中からフロントページに表示したいものを選択します。
最新商品をクリックしてみましょう。
エディター部分に自動的に最新商品が挿入されました。
今回は登録商品が少ないのでどれを選んでも同じ商品が表示されますが、商品数や注文数が増えてくると「ベストセラー商品」や「おすすめ商品」、タグ/カテゴリーによる表示商品の選択などが生きてきます。
追加したブロックが何の商品リストか分かるように見出しを入れておきましょう。
変更を保存して、フロントページを更新すると反映されます。
ページタイトルについて
仕様上、固定ページに入力したタイトルがフロントページにも表示されるようになっています。
固定ページのタイトルを表示させたくない場合は、 エディター画面でタイトルを空欄に変更する方法が手軽です。
おすすめ商品について
エディター画面のブロック選択の中には「おすすめ商品」があります。
「おすすめ商品」として表示される商品は、自分で設定します。 設定箇所は商品一覧画面、点線で囲った星の部分です。
※表示が無い方は上部の「表示オプション」タブを開いて、おすすめにチェックを入れると表示されます。
おすすめ欄の星が下図のように色付きになっていれば有効化されています。
これでフロントページの設定は終わりです。
見出し部分のデザインを変えたいなどの場合は子テーマのstyle.cssを使用して、サイトバーの表示項目は外観 > ウィジェットから変更可能です。