【徹底解説】WordPressでフロントページを設定してデザイン性のあるサイトにする方法

「このホームページのトップページかっこいいな」って思うホームページがWordPressで作られていれば、ほとんどが固定ページをフロントページとして活用しています。

初めて聞く方にとっては、固定ページ?をフロントページ?と混乱するかもしれません。ただ、今後もっとクオリティの高いホームページを構築していくのであれば必須の知識となります。

そこで今回は、運営しているホームページのクオリティを上げるために知っておくべきフロントページについてご紹介していきます。

この記事を最後まで読むことで、固定ページを使ったフロントページの設定方法について基本的な操作と注意点について理解できるので、参考にしてくださいね。

フロントページとは?

フロントページとは、固定ページを使用して作成されるトップページのことです。

つまり、ホーム画面が固定ページで作られたものがフロントページと呼ばれます。

デザインの自由度が高いだけではなく、思い通りの配置にすることができるので、弊社ホームページだけではなく、ほとんどの企業ページがフロントページとして固定ページを使用されているのです。

ただし、ブログの場合はテーマでデフォルトで設定されているトップページでも十分デザイン性があるので、フロントページを設定したトップページをする必要があるのか検討する必要があります。目安としては、もっとメルマガの登録数をあげたいなとか、そうした「やりたいこと」が増えてきたら変更を検討してもいいかもしれませんね。

フロントページを変更する際の注意点として、ローカル環境で試してから本番環境に反映させましょう。

こちらの記事でローカル環境の作り方について詳しく説明していますので、参考にしてくださいね。→【初心者向け】WordPressのローカル環境を簡単に構築する方法について

固定ページでフロントページを作成する方法

固定ページで投稿画面を作成

1.「固定ページ」→「新規追加」を選択します。

2.投稿画面で本文作成

テストページとして、一旦完成です。手のこんだフロントページにする場合は、投稿画面でブロックを追加したり、CSSを設定することになります。

また、HTMLとCSSが分かる人であれば、フロントページには何も入力せず、コーディングをして作成する方法もありますが、プログラミング知識がないと難しいかもしれません。

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

フロントページを設定していない状態のトップページはこのような形となっています。投稿に応じて新着記事が表示される状態です。

これを先ほど作成したフロントページに設定します。

1.「設定」→「表示設定」を選択します。

2.ホームページの表示欄の「固定ページ」を選択し、ホームページ欄で先ほど作成したページタイトル「フロントページ」を選択します。

3.表示を確認して、トップページに反映されていれば完成です。

ちなみに、デザインや配置を作り込むことで、以下画像のように表示させることができます。

トップページっぽくする方法

作る上で知っておくとそれっぽく見えるようになるポイントをご説明します。

それっぽく見えるために必要な要素は、「新規投稿記事」「おすすめ記事」の設定です。投稿画面で新規投稿記事とオススメ記事を表示させる投稿方法についてご紹介しますので、参考にしてくださいね。

新規投稿記事を固定ページで編集する方法

1.ブロックを選択を選択し、左サイドに表示されたブロック一覧から「最新の投稿」を選択

2.右サイドに表示からブロックタブを選択し、任意の表示に設定

3.プレビューを確認し、問題なければ、変更を選択して完了です。

おすすめ記事を固定ページで編集する方法

特にブロックが準備されていないので、トップ画面で表示したい投稿のURLをコピーして、呼び出す方法をとります。

1.ブロックを選択を選択し、左サイドに表示されたブロック一覧から「カラム」を選択

2.カラム数を決めたら、+ボタンを押して、「埋め込み」を選択し、おすすめ記事に表示したい投稿のURLを入力

3.プレビューを確認し、問題なければ、変更を選択して完了です。

固定ページをデザイン性のあるトップページに編集するのは、意外と難易度が高いので、知識が必要ですので、いろんなホームページを見て研究してみましょう。

まとめ

固定ページで作成したフロントページとして反映させる方法について解説しました。

ブログやホームページの運営を始めたばかりの段階では、そこまで気にする必要ありませんが、大きく飛躍させるためには必要な設定となります。

簡単に流れをおさらいすると、

固定ページで投稿を作成し、設定画面でフロントページを選択で完了です。

覚えてしまえば簡単な設定なので、是非挑戦してみてくださいね。