はじめに
第23章「トップページを作ろう」では、
トップページには何を載せればよいのか
を考えました。
トップページは、
すべてを詳しく説明するページではなく、
このホームページが何なのかを伝え、必要なページへ案内する入口
でした。
では、実際にWordPressで作った固定ページを、
サイトを開いたときに最初に表示されるトップページ
として設定してみましょう。
今回はあわせて、
ブログ記事を一覧で表示するページ
も分けて設定します。
ここで、
- 固定ページ
- 投稿
- トップページ
- 投稿一覧ページ
の関係が、実際のWordPress上でつながります。
WordPressは初期状態だと「最新の投稿」を表示することがある
WordPressはもともとブログ用途から発展してきた仕組みです。
そのため設定によっては、
サイトのトップに、
最新の投稿一覧
が表示されます。
新しい記事を書くたびに、
トップページの内容が自動的に変わっていく形です。
ブログが中心のサイトなら、
この使い方でも構いません。
しかし、美容室や会社のホームページでは、
- ファーストビュー
- 初めての方へ
- サービス紹介
- 店舗紹介
- アクセス
- お問い合わせ
などを自由に配置した、
専用のトップページ
を作りたいことが多くあります。
その場合は、
固定ページをトップページとして指定
します。
今回作る構成
このシリーズでは、
次のような構成にします。
サイトトップ
↓
固定ページ「ホーム」
ブログ
↓
投稿一覧
個別記事
↓
投稿
つまり、
トップページとブログ一覧を分ける
ということです。
まず2つの固定ページを用意する
設定を始める前に、
次の2ページを用意します。
- ホーム
- ブログ
「ホーム」ページ
これは、
第23章で考えたトップページ用の固定ページです。
まだ完成していなくても構いません。
最初は、
「ホーム」
というタイトルだけのページを作っても大丈夫です。
これから少しずつ内容を作っていきます。
「ブログ」ページ
もう一つ、
「ブログ」
という固定ページを作ります。
ここで少し不思議に感じるかもしれません。
「ブログの記事は投稿で作るのに、なぜ固定ページの『ブログ』を作るの？」
という疑問です。
この固定ページは、
ブログ記事そのものを書くページではありません。
WordPressへ、
「投稿一覧をここに表示してください」
と指定するための入口として使います。
「ブログ」ページの本文は空でもよい
投稿一覧ページとして指定する「ブログ」は、
基本的には、
タイトルだけ作り、本文は空の状態
でも構いません。
なぜなら、
WordPressの「投稿ページ」として指定すると、
そのページに入力した本文ではなく、
テーマ側の投稿一覧表示
が使われるためです。
これは初心者がかなり混乱しやすいところです。
「ブログという固定ページを編集したのに、書いた文章が表示されない」
という場合、
投稿一覧ページとして設定されていることが理由かもしれません。
固定ページをトップページに設定する
1．「設定」から「表示設定」を開く
WordPress管理画面へログインします。
左側メニューから、
「設定」→「表示設定」
を開きます。
表示設定には、
ホームページに何を表示するか、
ブログ一覧に何件の記事を表示するか、
検索エンジンへの表示に関する設定などがあります。
今回は、
ホームページの表示
だけを変更します。
2．「固定ページ」を選ぶ
「ホームページの表示」という項目に、
- 最新の投稿
- 固定ページ
という選択肢があります。
ここで、
「固定ページ」
を選びます。
すると、
- ホームページ
- 投稿ページ
を選択できるようになります。
3．ホームページに「ホーム」を指定する
「ホームページ」の選択欄から、
先ほど作った、
「ホーム」
を選びます。
これで、
サイトのトップURLへアクセスしたときに、
固定ページ「ホーム」が表示されるようになります。
たとえば、
を開いたときに、
「ホーム」の内容が表示されます。
4．投稿ページに「ブログ」を指定する
次に、
「投稿ページ」の選択欄から、
「ブログ」
を選びます。
これによって、
投稿として公開した記事を一覧表示する場所が、
「ブログ」ページになります。
ホームページと投稿ページは同じページにできない
ここは重要です。
WordPressでは、
ホームページと投稿ページに同じ固定ページを指定することはできません。
それぞれ役割が違うためです。
ホームページ
サイトの入口として使う固定ページ。
投稿ページ
投稿を一覧表示するためのページ。
この2つを分けて設定します。
5．変更を保存する
設定ができたら、
画面下部の、
「変更を保存」
を押します。
保存すると、
WordPressのトップページ表示が切り替わります。
6．トップページを確認する
次に、
実際のサイトを開きます。
トップURL、
たとえば、
へアクセスします。
固定ページ「ホーム」が表示されていれば成功です。
まだ内容をほとんど作っていない場合は、
シンプルなページでも構いません。
ここでは、
設定が正しく切り替わったこと
を確認します。
7．ブログページも確認する
次に、
「ブログ」ページを開きます。
そこに、
公開済みの投稿記事が一覧表示されることを確認します。
投稿がまだ1件もない場合は、
一覧が空に見えることがあります。
その場合は、
設定に失敗したとは限りません。
投稿を公開したあとに改めて確認しましょう。
設定後に確認しておきたいこと
「ブログ」ページの見た目はテーマによって違う
投稿一覧ページでは、
テーマによって、
- 記事タイトル
- アイキャッチ画像
- 投稿日
- 抜粋
- カテゴリー
- 著者情報
などの表示方法が違います。
ブロックテーマの場合は、
投稿一覧を表示するテンプレート
をサイトエディターから編集できる場合があります。
そのため、
「ブログページを開いたら、自分が固定ページに書いたデザインと違う」
ことがあっても不思議ではありません。
投稿ページは、
通常の固定ページとは少し違う特殊な役割
を持っています。
トップページをメニューに入れるなら「ホーム」として追加できる
固定ページ「ホーム」をトップページへ指定したあと、
ナビゲーションに、
「ホーム」
という項目を追加することもできます。
ただし、
ヘッダーのロゴやサイト名を押せばトップへ戻れる設計なら、
必ず「ホーム」をメニューに入れなければならないわけではありません。
メニュー項目を増やしすぎないために、
省略する方法もあります。
ここも、
利用者が迷わないか
を基準に決めます。
ブログページはナビゲーションへ追加する
このシリーズでは、
WordPressに関する記事や、
ホームページ運営の記事などを投稿として増やしていきます。
そのため、
「ブログ」
または、
「記事」
などの項目をナビゲーションへ追加しておくと、
投稿一覧へ移動しやすくなります。
第21章で作ったナビゲーションへ、
「ブログ」ページを追加します。
「ホーム」というタイトルを画面に表示したくない場合
固定ページ「ホーム」を作ると、
テーマによっては、
ページ上部に、
「ホーム」
というページタイトルが表示される場合があります。
トップページでは、
このタイトルを表示したくないこともあります。
その場合の方法は、
- テンプレート側でタイトル表示を調整する
- トップページ専用テンプレートを使う
- テーマ側の設定を利用する
など、テーマによって異なります。
ここでは無理に変更せず、
トップページの設定が完了してからデザインを整える
ようにしましょう。
「ホーム」固定ページのURLはどうなる？
固定ページとして「ホーム」を作ると、
編集画面では、
/home/
のようなURLが設定されることがあります。
しかし、そのページをWordPressのホームページとして指定すると、
実際のサイトトップでは、
から表示されます。
つまり、
サイトのトップURLそのものが「ホーム」ページの入口になる
ということです。
細かなURLの仕組みは、パーマリンクの章で詳しく扱います。
トップページを変更するときも同じ
将来、
別の固定ページをトップページとして使いたくなった場合は、
同じ、
「設定 → 表示設定」
から変更できます。
たとえば、
固定ページ「ホーム2」を作り、
トップページとして指定し直すこともできます。
そのため、
WordPressでは、
トップページの中身と、どのページをトップにするかを分けて管理できる
と覚えておきましょう。
「検索エンジンでの表示」は今は触らない
表示設定の画面を見ると、
「検索エンジンでの表示」
という項目があります。
ここには、
検索エンジンがサイトをインデックスしないよう促す設定があります。
制作途中のサイトで利用する場合もありますが、
公開時に解除し忘れると、
検索結果へ出にくくなる原因になります。
今回は、
トップページ設定だけを変更し、意味が分からない設定は触らない
ようにしましょう。
検索エンジン公開の設定については、公開前チェックの章で改めて確認します。
「ブログページに表示する最大投稿数」もあとで調整できる
同じ表示設定には、
ブログページに最大何件の投稿を表示するか
という設定もあります。
現在のWordPressでは、
「1ページに表示する最大投稿数」
を指定できます。
ただし、
実際の表示件数はテーマやQuery Loopなどの設定と関係する場合もあります。
今は初期値のままでも構いません。
投稿が増えてから、
一覧の見やすさを確認して調整します。
今回の操作でサイトの構造がはっきりする
今回の設定によって、
ホームページ全体が、
example.com/
↓
固定ページ「ホーム」
example.com/blog/
↓
投稿一覧
個別の記事
↓
各投稿という形になります。
ここまで来ると、
第11章で学んだ、
投稿と固定ページの違い
が、かなり具体的に見えてきます。
このシリーズ自体も同じ構造で公開できる
この「初心者向けWordPress」シリーズも、
同じ考え方で整理できます。
たとえば、
固定ページ
初心者向け WordPressでホームページを作る
→ シリーズ全体の目次・入口
投稿
- 第1章 ホームページとは何か？
- 第2章 ホームページはどうやって表示されるのか？
- 第3章 サーバーとは何か？
- …
- 各章の記事
という構成です。
つまり、
今回自分で作っているWordPressサイトの仕組みそのものを使って、
このWordPress講座も公開できる
ということです。
今回のポイント
- WordPressでは初期設定で最新投稿がトップに表示される場合がある
- 店舗・会社サイトでは固定ページをトップページに設定できる
- 「ホーム」と「ブログ」の2つの固定ページを用意する
- 投稿ページ用の「ブログ」は本文が空でも構わない
- 「設定 → 表示設定」からホームページの表示を変更する
- 「固定ページ」を選び、ホームページに「ホーム」を指定する
- 投稿ページには「ブログ」を指定する
- ホームページと投稿ページは同じ固定ページにできない
- 設定後はトップページとブログ一覧の両方を実際に確認する
- 投稿ページの表示はテーマ側のテンプレートで決まる
- トップページ用固定ページのタイトル表示はテーマによって調整方法が違う
- 表示設定の「検索エンジンでの表示」は意味を理解せず変更しない
- 投稿一覧の表示件数はあとから調整できる
- 固定ページのトップ、投稿一覧、個別投稿を分けるとサイト構造が整理しやすい
今回の視点
WordPressでは、
「ページを作ること」と「そのページに役割を与えること」
は別です。
「ホーム」という固定ページを作っただけでは、
まだトップページではありません。
「ブログ」という固定ページを作っただけでは、
まだ投稿一覧ではありません。
WordPressへ、
このページは何のために使うのか
を設定することで、役割が決まります。
ページを作る。
役割を決める。
つなげる。
この考え方が分かると、
WordPressのサイト構成がかなり見えやすくなります。
Part 3｜ホームページの見た目と構造を作る