【TT2】固定ページをフロントページ(ホームページ)にする方法

公開日:2022(令和4)年12月30日/最終更新日:

Twenty Twenty-Two Theme Customize | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



TT2では、サイトのフロントページは「ホーム」というテンプレートを通して表示されるので、単純に言えば、この「ホーム」テンプレートを直接編集してしまうのが、ブログ一覧(投稿一覧)ではないフロントページを表示させるのに一番簡単な方法ではあります。

でも、それ以外にもいろいろな方法で投稿一覧でないフロントページのあるサイトを構築することも可能で、そこがTT2のようなブロックテーマのいいところでもあり、迷う部分でもあります。

そこで本ページでは、TT2テーマで作成したサイトのフロントページを通常の投稿一覧とは違ったものにしたい場合の、代表的な以下の4つの方法を紹介していきます。

  1. 普通にフロントページ用に作成した固定ページを普通にフロントページにする方法
  2. フロントページ用の固定ページを、別のテンプレート経由で表示させる方法
  3. フロントページ用のテンプレートを追加して、直接テンプレートに必要なコンテンツを入れて作成する方法
  4. フロントページ用の固定ページ、ブログ一覧用の固定ページを作り、さらにフロントページ用のテンプレートを通じて表示させる方法

いろいろなやり方を知った上で、自分のサイトに合ったサイト構成を行う上でのヒントになれば幸いです。

サイトアドレスへアクセスした時に表示されるページに対して、トップページ、ホームページ、フロントページ..と呼び方が複数あるので、本ページでは、「フロントページ」と表記します

【方法1】固定ページをフロントページとして表示する

特に他の固定ページと区別することなく、フロントページ用に作成した固定ページをフロントページとして表示させる、一番一般的な方法です。

他の固定ページとはデザインを異なるものにしたい場合には、【方法2】以降の方法がおすすめです

フロントページにする固定ページを作る

通常の投稿と同じような手順で、フロントページにする固定ページを1つ作成します。

必要でない場合には後程紹介するCSSコード例を使って固定ページのタイトルやアイキャッチ画像を非表示にさせることができますが、HTML上(目に見えないプログラムソース上)で表記されたものを目に見えなくしているだけですので、ページのタイトルはサイト名などにするとよいでしょう

投稿一覧にする固定ページを作る

最新の投稿の一覧を表示させるためのページを作成します。

固定ページを新たに作成し、ページタイトルだけ、管理しやすい適当な文字列(アーカイブなど)にして、中身は空のまま保存します。

このページはメニューなどに追加して呼び出せるようにしない限り、通常は表示されることはありませんが、自動で投稿一覧を作成してくれる旧来からのWordPressの機能ですので、設置しておきましょう

固定ページのパーマリンク構造は、投稿とは違い、「ページタイトル」になります。URLはできる限り簡単な方がよいと思いますので、ページ作成時に右サイドバーの「URL」欄をクリックして、「post-list」など簡単な文字列にしておくとよいかも知れません

WordPressの設定を変更する

これまで作成した固定ページ(フロント用、一覧用の2つ)をWordPressが認識して表示できるよう、WordPress本体の設定を変更します。

管理画面から、「設定」→「表示設定」を開きます

【TT2】固定ページをフロントページ(ホームページ)にする方法|Personal WP Customization Notes (PWCN)

「ホームページの表示」にある選択肢を「最新の投稿」から「固定ページ」へ変更します

「ホームページ」には、フロントページ用に作成した固定ページを、「投稿ページ」には、投稿一覧用に作成した固定ページをそれぞれ指定します

「変更を保存」をクリックして設定画面を保存します

終わったら、サイトを表示して確認してください

CSSでフロントページのタイトルやアイキャッチ画像を非表示にする

本項の方法では、通常の固定ページテンプレートを通じてフロントページ表示をするため、フロントページ用の固定ページタイトルが通常通りに表示されます。

しかしながら、フロントページでは、ページタイトルの表示が不要となるケースが多くあります。

そんな時は、以下のスタイルコードをテーマのCSSへ追加して非表示にします。

body.home .wp-block-post-title {
    display: none;
}

また、アイキャッチ画像が不要な場合には、以下のスタイルコードを追加します。

body.home .wp-block-post-featured-image {
    display: none;
}

【方法2】フロントページ用の固定ページを、別のテンプレート経由で表示させる

フロントページ用に作成した固定ページを、通常の固定ページテンプレート経由ではない、独自のテンプレートを通じて表示させたい以下のような場合におすすめの方法です。

  • 通常の固定ページはサイドバー付きだけどフロントページはサイドバーなしにしたい
  • 通常の固定ページとは、ページ幅を変えたい
  • 通常の固定ページとはヘッダー部分を変えたい

この方法では、すべての固定ページ編集画面でここで作成したテンプレートの選択ができるようになります。フロントページ専用のテンプレートとして動作させたい場合には、【方法3】【方法4】がおすすめです。

通常の固定ページテンプレートとは異なるテンプレートを作成する

通常の固定ページが表示されるテンプレートとは異なる、新規テンプレートを作成します。

テンプレートの追加方法については以下のページを参照ください。

フロントページ用の固定ページを作成する

通常の固定ページ(投稿)と同じように、固定ページを新規作成します。

【方法1】と異なるのは、編集画面の右サイドバーにあるテンプレート選択で、使用するテンプレートを先ほど作成したテンプレートに変えることです。

【TT2】固定ページをフロントページ(ホームページ)にする方法|Personal WP Customization Notes (PWCN)

WordPressの設定を変更する

これまで作成した固定ページ(フロント用、一覧用の2つ)をWordPressが認識して表示できるよう、WordPress本体の設定を変更します。

管理画面から、「設定」→「表示設定」を開きます

【TT2】固定ページをフロントページ(ホームページ)にする方法|Personal WP Customization Notes (PWCN)

「ホームページの表示」にある選択肢を「最新の投稿」から「固定ページ」へ変更します

「ホームページ」には、フロントページ用に作成した固定ページを、「投稿ページ」には、投稿一覧用に作成した固定ページをそれぞれ指定します

「変更を保存」をクリックして設定画面を保存します

終わったら、サイトを表示して確認してください

【方法3】テンプレートで直接フロントページを作成する場合

WordPressで固定ページをフロントページにした場合の標準機能である、指定した固定ページで投稿一覧表示をする機能を利用しない場合には、この方法がおすすめです。

フロントページ用のテンプレートを追加する

TT2などのブロックテーマには、フロントページ用のテンプレートが用意されており、デフォルトではこのテンプレートは未追加の状態になっています(TT2以外では未確認です)。

このフロントページテンプレートを追加することで、フロントページとなるもの(固定ページ、未指定の場合はこのテンプレートの内容そのもの)が、フロントページとして表示されるようになります。

フロントページテンプレートは、「外観」→「エディター」を開き、以下の①~③の順にクリックして追加します。

【TT2】固定ページをフロントページ(ホームページ)にする方法|Personal WP Customization Notes (PWCN)

フロントページの内容を編集する

TT2で試した限りでは、追加したフロントページ用テンプレートは「ホーム」テンプレートの内容がコピーされるようです。

これを基にして、直接テンプレートに必要なものを追加、不要なものを削除して直接フロントページを構築していきます。

テンプレートの編集方法については、以下のページを参照ください。

【方法4】固定ページをフロントページとする場合

WordPressで固定ページをフロントページにした場合で、指定した固定ページで投稿一覧表示をする機能も利用したい場合には、この方法がおすすめです。

クラシックテーマで固定ページをフロントページにしていた方、した経験のある方はこの流れが一番しっくりくるかも知れません。

必要なページの追加

フロント用の固定ページを作成する

フロントページとなる固定ページを作成します。

投稿一覧用の固定ページを用意する

投稿の一覧(ブログ形式の場合と同じ一覧)を表示させるための固定ページを用意します。

固定ページの新規作成クリック後、適当なタイトル(ブログロールなどといった自身で分かりやすいタイトル)だけを設定して、内容は空のまま公開します。

フロントページテンプレートを追加する

フロントページ用のテンプレートの追加は、前項の【方法3】と同じですのでそちらを参照ください。

WordPressの設定を変更する

これまで作成した固定ページ(フロント用、一覧用の2つ)をWordPressが認識して表示できるよう、WordPress本体の設定を変更します。

管理画面から、「設定」→「表示設定」を開きます

【TT2】固定ページをフロントページ(ホームページ)にする方法|Personal WP Customization Notes (PWCN)

「ホームページの表示」にある選択肢を「最新の投稿」から「固定ページ」へ変更します

「ホームページ」には、フロントページ用に作成した固定ページを、「投稿ページ」には、投稿一覧用に作成した固定ページをそれぞれ指定します

「変更を保存」をクリックして設定画面を保存します

終わったら、サイトを表示して確認してください


どうでしたか?似てるような似てないような...本当に自由というか、惑わせるというか..いろいろな方法がありますね。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)
一覧用テンプレート内のクエリーループブロックで複数の投稿タイプを含めて表示させるようにする方法