WordPressのトップページを固定ページにしてカスタマイズ

WordPressはトップページにブログとしての投稿ページ一覧表示だけではなく、固定ページを使用してトップページをホームページとして表示することができる設定があります。

しかし固定ページをトップページにはできるけど、トップページに表示する内容を固定ページの編集画面で作成しただけでは、トップページとしての物足りなさを感じることがあります。

物足りなさを感じた私はWordPressのトップページに表示する固定ページのテンプレートから作成してカスタマイズチャレンジすることを決断。

WordPressのトップページを固定ページでオリジナルなトップページにしたい方に参考になればと思います。

WordPressのトップページを固定ページにする

基本的なこととしてWordPressのトップページを固定ページにする場合には、管理画面の固定ページから新規作成でトップページに表示する固定ページを作成します。

作成した固定ページはWordPressの設定から「表示設定」に進んだホームページの設定で固定ページを選択してホームページにする新規作成した固定ページを選びます。

WordPressでホームページを固定ページで表示する設定方法

テーマによってはカスタマイズ設定でトップページに固定ページを設定して表示することもできます。

トップページにした固定ページをカスタマイズ

WordPressのトップページにした固定ページは、固定ページの編集画面で投稿記事を作成するときのようにブロックエディタなどでコンテンツ作成できますが、トップページとして作成する場合は、カスタマイズの幅に物足りなさを感じてしまうことが多いです。

そんなときにはWordPressプラグインの「Elementor Page Builder」でコンテンツを組み立てるという方法もあります。elementorはトップページにした固定ページのカスタマイズが充実します。

たとえば上画像のようにWordPressのトップページに表示した固定ページにスライダーを実装するなどのカスタマイズができます。実装したコンテンツにはCSSでカラーやサイズ、余白などをサイトのレイアウトに合わせてカスタマイズしていくことができます。

elementorはWordPressのトップページにした固定ページをカスタマイズすることに関して、とても活躍するプラグインなので、手軽な作成で済ませたい場合はとても良いと思います。

ただWordPressのトップページにする固定ページの編集画面からカスタマイズする以外にも手を加えて、もっとトップページを丸ごと自分がイメージするレイアウトやデザインでカスタマイズしたい。

という場合にはWordPressでトップページにする固定ページのテンプレートを、自分で作成してしまうことでWordPressの自由度を最大限に活かしたトップページにする固定ページにできます。

固定ページのテンプレートを作成する

WordPressで固定ページのテンプレートは「page.php」です。だいたいどのテーマにも固定ページのテンプレートとしてpage.phpがあります。

固定ページのテンプレート作成は、親テーマのpage.phpをコピペで子テーマのpage.phpとして作成し、WordPressのトップページに使用する独自の固定ページテンプレートに作り直して使用します。

具体的には、親テーマのpage.phpを子テーマのフォルダにコピペします。そしてファイル名を任意の名前にして拡張子を.phpにした固定ページ用テンプレートにします。たとえばkotei.phpとかです。

子テーマに作成した固定ページのテンプレートファイルはテキストエディタで開いて、テンプレートファイル内の先頭に以下のようにコメントを必ず書きます。

<?php/*Template Name: トップ用固定ページ*/?>

コメント文を必ず書く理由は、作成したWordPressのトップページ用の固定ページをWordPressがコメントで認識することで、固定ページの編集画面のページ属性で作成したテンプレートを選択できるようにするためです。

コメント文を書き終え保存したら、WordPressの固定ページの新規作成から「ページ属性」で、子テーマにしたpage.phpに記述のコメントと同じ名前で固定ページを選択できるようになります。トップページにする固定ページとして選択します。

次にWordPressの設定の「表示設定」に進み、トップページにするために子テーマに作成したpage.phpに記述したコメントと同じ名前の固定ページでホームページの設定からトップページにします。

そうすると、WordPressのトップページとして表示するために作成した固定ページのテンプレートの内容がWordPressのトップページに表示できています。

この時点で固定ページ作成したテンプレートをWordPressのトップページに表示できてるのでカスタマイズすることが可能ですが、ヘッダーもトップページ用にカスタマイズしたい場合には、トップページ用に作成したpage.phpにテンプレートパーツを組んでカスタマイズの幅を広げます。

page.phpにテンプレートパーツを組む

トップページ用の固定ページとして作成したpage.php、今回を例にするとkotei.phpにテンプレートをパーツにして組み込むことでトップページに表示する固定ページを、さらにカスタマイズします。

親テーマのheader.phpを子テーマのフォルダにコピペしてテンプレート名をheader-○○○.phpとつけます。たとえばheader-kotei.phpのようにします。

次にトップページに使う固定ページのpage.php(例kotei.php)に子テーマのフォルダにコピペしたheader.phpを以下のように読み込みます。

<?php get_header('kotei'); ?>

これで固定ページをトップページにしたときに表示されるヘッダーも、トップページにする固定ページ用のヘッダーとして組み込むことでき、WordPressのトップページにする固定ページ用のヘッダーとしてカスタマイズできるようになります。

ヘッダーを変えずにサイトでどのページでも統一したい場合は必要ない作業ですが、テクニックとして覚えておくと今後に役立つと思います。

固定ページをHTMLやPHPで編集

次はWordPressのトップページに表示するコンテンツをHTMLやPHPで編集して作ります。そのためにまずは必要ないHTMLやPHPの記述は削除して、使用できるHTMLとPHPは残します。

トップページのヘッダーは<?php get_header(‘kotei’); ?>で固定ページ用のヘッダーとして読み込んでるので記述を残します。

トップページのフッターは今回カスタマイズしないのでget_footerの記述も残します。

あとの記述は全て削除します。

そしてコンテンツ部分をHTMLでマークアップしたりPHPでループしてWordPressのトップページに表示したいそれぞれのサイトに合わせて編集して仕上げます。

WordPressのトップページにする固定ページ用に作成したheader.php(例ではheader-kotei.php)もHTMLやPHPで編集してトップページとして表示したいヘッダーをコーディングします。

ヘッダーなのでwp_headやCSSの読み込み、サイトタイトルなどのヘッダー構造の記述も忘れないようにし、必要ならばカスタムメニュー機能でグローバルメニューを加えてもいいと思います。

トップページをCSSでデザインして完成

WordPressのトップページを固定ページにしてHTMLやPHPで編集したら、後はトップページをCSSでデザインして完成させます。

WordPressのトップページを固定ページにしてどのようなレイアウトやデザインにするかはサイトによりけりなので、とりあえずトップページを固定ページにしてカスタマイズしたデザインの変化がわかるように画像にしました。

WordPressテーマのトップページが上画像のようなレイアウトだったのを固定ページにしてトップページにすると以下の画像のようなトップページにできます。

うん…逆にダサくなったかも。しかもアイキャッチがブラウン管テレビっぽい…

というようにWordPressのトップページを固定ページにしたはいいものの、私のように思いつきでデザインやレイアウトをしてしまわないように、トップページをCSSでデザインして完成させてください。

WordPressのトップページを固定ページにした感想

WordPressのトップページを固定ページにしてカスタマイズすると、トップページとして使用するテンプレートを好きにいじれる範囲が広がるのを実感できました。

今回は一つの固定ページのテンプレートを作成してトップページにしただけですが、固定ページのテンプレートを複数用意することで、WordPressのトップページ設定で簡単に切り替えが可能になるのも利点になるかと思えたWordPressの固定ページをトップページにするパターンでした。