WordPressのブロックテーマでトップページを作るには、固定ページの作成と、エディターで作れるテンプレートが必要です。トップページは以下の手順で作成することができます。
- 外観/エディターから新しいテンプレートを作成し
- ヘッダーとフッターを作成
- 中身のコンテンツを作成
- テンプレートを保存してトップページを確認
- 作成したものが表示されていれば完了
テンプレートを再編集したい場合は、同じ方法でテンプレートを開いて編集してください。
以前のWordpressテーマのように固定ページで作って表示設定からトップページとして表示することも可能です。こちらは後ほど解説します。
WordPressのフルサイトエディターはかなり使いやすくなったとはいえ、ゼロからサイトを作るのは結構大変。今すぐWordpressでサイト作りたい！という方はコピペできるブロックやテンプレートを配布しているのでぜひ使ってみてください。
ここからは詳しいやり方を解説していきます。
ブロックテーマでトップページを作る手順
エディターからテンプレートを作成する
まずはWordpressの管理画面メニューにある「外観/エディター」からエディターページを開いて左のメニューにある「テンプレート」を選びます。
すると画像のようなページが表示されるので、右上にあるテンプレート追加ボタンを押します。
ここで作成するテンプレートの種類を選ぶことができます。今回はトップページなので「フロントページ」を選びます。
クリックして空白の編集ページが表示されればテンプレートの作成完了です。
ヘッダーとフッターを作成
次にヘッダーとフッターを作成していきます。
編集ページの左上にある「+」アイコンのボタンを押すと設置できるブロック一覧が表示されるので、この中から選んでヘッダーを作成していきます。
フッターも同様に作成していきます。
冒頭にも書いたようにいきなり作るといわれてもレイアウトやデザインは結構時間のかかる作業になってしまうので、効率化したい場合はコピーできるテンプレートを使いましょう。
OrigamiUIストアではヘッダーやフッターなどのパーツごとにテンプレートを用意しています。特定のパーツだけに絞り込んで探すこともできるのでぜひ活用してみてください。
中身のコンテンツを作成
続けて中身のコンテンツも同様に作成していきます。こちらも先ほどのヘッダー、フッターと同様にブロックを設置してレイアウトを作っていきます。
テーマによってはオリジナルのパターンが多数同梱されている場合もあります。
また、設置したブロックは左のパネルで色や文字サイズなどのスタイルを変更することができます。
テンプレートを保存してトップページを確認
コンテンツの作成が完了したら、右上の保存ボタンで忘れずに保存しておきましょう。
保存できたらトップページを確認してみてください。とくに設定する必要なく先ほど作ったトップページが表示されます。
作成したものが表示されていれば完了
トップページを見て作成した通りに表示されていれば完了です。
ここではブロックの使い方やスタイル方法については省きましたが、以下のページで詳しく解説しているので参考にしてみてください。
テンプレートではなく固定ページでトップページを作るには？
ブロックテーマでは、トップページをテンプレートで作る方法だけでなく、固定ページをトップページに設定する方法もあります。こちらの方法なら、ページ単位で自由にデザインでき、他の固定ページと同じ操作感で編集できます。
手順は以下の通りです。
- 通常通り固定ページを新規作成
- 管理画面の左メニューから「設定 → 表示設定」を開く
- 作成した固定ページをトップに設定
固定ページの作成の際、テーマ側で用意されたテンプレートをそのまま使う場合は「テンプレート」のところはそのままにしておきます。
ヘッダーとフッターだけを入れたテンプレートを使う場合は「テンプレート」で使用するテンプレートを入れ替える必要があります。
トップページをCSSでスタイル変更したいときは？
トップページの見た目（文字の色、余白、背景など）を調整したいときは、ブロックのスタイル設定を変更する方法と、CSSコードを追加する方法の2つがあります。
手順は以下の通りです。
- 管理画面の左メニューから「ツール → テーマファイルエディター」を開く
- 編集画面右側のファイル一覧から「style.css」をクリック
- 編集エリア内に変更したいCSSコードを追加して保存
WordPressのブロックテーマでCSSコードを追加するには、ツール->テーマファイルエディタからテーマファイルの編集画面を開いて、style.cssに必要なスタイルを追加してください。
注意点としては、ここでの変更はテーマ全体に反映されること、テーマをアップデートすると変更内容が上書きされてしまう場合があることです。
安全にカスタマイズしたい場合は「子テーマ」を作成してそちらにCSSを追加するのがおすすめです。
トップページにお知らせを表示するには？
WordPressではクエリループというブロックを設置することで、トップページに「お知らせ」や「ブログ」のような投稿記事一覧を表示することができます。
方法は以下の通りです。
- 編集ページの左上の「+」アイコンをクリック
- ブロック一覧から「クエリループ」を選択して設置
- 表示するカテゴリや投稿タイプなどの設定
- クエリループ内で使えるブロックを設置してレイアウトを作成
クエリループの設定で「カスタム」を選ぶことで、投稿タイプを選択したり、カテゴリで絞り込んだり、表示数を変更することができます。
トップページのお知らせでカスタム投稿タイプやカスタムタクソノミーを表示するには？
WordPressでは「Custom Post Type UI」という無料プラグインを使うことで投稿タイプを追加したり、新しいタクソノミーを追加できます。
お知らせコンテンツを「投稿」ではなく「お知らせ」のような投稿タイプを追加し、カテゴリやタグではなく新しく「news-type」のような分類(カスタムタクソノミー)を追加した場合の設定手順は以下の通りです。
- クエリーループで「投稿タイプ」を「お知らせ」に変更
- クエリーループのブロック内に「news-type」ブロックを設置
- 必要に応じてブロックの設定を行う
「Custom Post Type UI」でカスタムタクソノミーを追加すると同じ名前のブロックが追加されるのでそれを使って表示することができます。
もっと効率よくトップページを作るには？
WordPressのフルサイトエディターを使ってコーディングすることなくページを作れるようになりましたが、ゼロからレイアウトを作るのは時間がかかる作業です。
効率よくトップページを作るにはコピペできるテンプレートを活用することをおすすめします。
WordPressでは編集画面に設置したブロックをスタイルやレイアウトの情報を保持したままコピーすることができます。
この機能を使ってWebサイトによくあるパターンをOrigamiUIストアにまとめています。
OrigamiUIストアでは、ページ全体のテンプレートだけでなく、「お知らせ」「お客様の声」「料金プラン」「CTA（お問い合わせ）セクション」など、部分的なブロックテンプレートも豊富にそろっています。
作りたいホームページの内容に合わせて必要なパーツを組み合わせるだけでOK。デザインの一貫性を保ちながら、オリジナルのトップページをすぐに完成できます。
まとめ
ここまでの内容をまとめるとこちらのようになります。
- 「外観 → エディター」から新しいテンプレート作成からトップページを作れる
- テンプレートではなく固定ページでもトップページを作成可能
- 「ツール → テーマファイルエディター」でCSSを編集できる
- クエリループブロックを使うことで、投稿一覧をトップページに表示できる
- 「Custom Post Type UI」プラグインで投稿タイプや分類（タクソノミー）を追加可能
- 効率的に作りたい場合は、テンプレートを活用するのがおすすめ
テンプレートをうまく活用できれば、ブロックをコピー＆ペーストするだけでページを作成できるのでかなり作業効率を上がります。
