WordPressでTOPページを作成して表示する方法

受講生ページ

今回は、ホームページを開いたときに最初に表示される「TOPページ」を作成します。

ChatGPTやGeminiなどのAIで作成した文章を固定ページに貼り付け、ヘッダー画像やアイキャッチ画像を設定します。

最後に、作成した固定ページをホームページのTOPページとして表示するように設定します。

今回行う作業は、次の5つです。

固定ページでTOPページを作成する
ページの一番上にヘッダー画像を入れる
アイキャッチ画像を設定する
スラッグを「top」に変更して公開する
作成した固定ページをホームページに設定する

1．固定ページでTOPページを作成する

最初に、TOPページとして使用する固定ページを作成します。

固定ページを作成する手順

WordPressの管理画面にログインします
左側メニューの「固定ページ」をクリックします
「新規固定ページを追加」をクリックします
画面上部のタイトル入力欄に、TOPページのタイトルを入力します
本文の入力欄に、ChatGPTやGeminiなどのAIで作成した文章を貼り付けます

AIで作成した文章は、タイトルと本文を分けて貼り付けます。

タイトル：固定ページ上部のタイトル入力欄に貼り付ける
本文：タイトルの下にある本文入力欄に貼り付ける

TOPページのタイトル例

〇〇整体院
〇〇美容室
〇〇公式ホームページ
初心者向けAIホームページ集客講座
AIとホームページで集客の仕組みをつくる実践講座

サイトの内容が分かるタイトルを設定してください。

2．ページの一番上にヘッダー画像を入れる

次に、固定ページの一番上にヘッダー画像を入れます。

ヘッダー画像は、ホームページを開いた人が最初に目にする大切な画像です。

商品やサービスの内容が伝わり、文字が読みやすい画像を使用します。

ヘッダー画像を入れる手順

貼り付けた本文の一番上をクリックします
文章の先頭で「Enter」キーを押し、空の行を作ります
表示された「＋」マークをクリックします
ブロックの一覧から「画像」を選択します
「アップロード」をクリックします
パソコンに保存してあるヘッダー画像を選択します
画像がページの一番上に表示されたことを確認します

「画像」が見つからない場合は、ブロックの検索欄に「画像」と入力してください。

ヘッダー画像を入れた後に確認すること

ページの一番上に画像が入っている
画像内の文字が正しく表示されている
画像が小さすぎない
画像が途中で切れていない
画像の下に本文が表示されている

画像の位置が文章の途中に入ってしまった場合は、画像ブロックを選択し、上向きの矢印を使って一番上まで移動します。

3．アイキャッチ画像を設定する

次に、固定ページのアイキャッチ画像を設定します。

アイキャッチ画像とは、ページを紹介するときに使用される代表画像です。

テーマや設定によって、次のような場所で使用される場合があります。

ページの上部
記事やページの一覧
おすすめページの表示
SNSでページを共有したとき

今回は、先ほどアップロードしたヘッダー画像と同じ画像をアイキャッチ画像に設定します。

アイキャッチ画像を設定する手順

編集画面右上の「設定」マークをクリックします
右側に表示される固定ページの設定を確認します
「アイキャッチ画像」をクリックします
「アイキャッチ画像を設定」をクリックします
「メディアライブラリ」を選択します
先ほどアップロードしたヘッダー画像を選択します
「アイキャッチ画像を設定」をクリックします

右側に画像が表示されたら、アイキャッチ画像の設定は完了です。

今回は、ヘッダー画像としてすでにアップロードした画像を使用します。「アップロード」ではなく「メディアライブラリ」から選択してください。

4．スラッグを「top」に変更して公開する

次に、固定ページのスラッグを変更します。

スラッグとは、ページごとのURLの最後に表示される文字です。

今回のTOPページでは、スラッグをtopに設定します。

例えば、ホームページのドメインが次の場合です。

https://example.com

TOPページ用に作成した固定ページのURLは、次のようになります。

https://example.com/top

スラッグを変更する手順

編集画面右側の固定ページ設定を開きます
「URL」または「パーマリンク」の項目をクリックします
スラッグの入力欄を確認します
入力されている文字を削除します
半角英字でtopと入力します
URLが〇〇〇.com/top/になっていることを確認します

スラッグは、必ず半角の小文字で入力してください。

正しい入力：top
間違った入力：TOP
間違った入力：トップ

固定ページを公開する

タイトル、本文、ヘッダー画像、アイキャッチ画像、スラッグを確認したら、固定ページを公開します。

画面右上の「公開」をクリックします
公開前の確認画面が表示されたら、もう一度「公開」をクリックします
「固定ページを公開しました」と表示されることを確認します

公開後は「固定ページを表示」をクリックし、実際のページを確認します。

公開前に確認すること

TOPページのタイトルが入っている
本文がすべて貼り付けられている
ページの一番上にヘッダー画像が入っている
アイキャッチ画像が設定されている
スラッグがtopになっている

5．作成した固定ページをホームページに設定する

固定ページを公開しただけでは、まだホームページを開いたときのTOPページにはなりません。

最後に、作成した固定ページをホームページのTOPページとして表示するように設定します。

TOPページとして表示する設定

WordPress管理画面の左側メニューから「設定」をクリックします
「表示設定」をクリックします
「ホームページの表示」を確認します
「固定ページ」を選択します
「ホームページ」の選択欄をクリックします
先ほど作成したTOPページのタイトルを選択します
画面下部の「変更を保存」をクリックします

これで、作成した固定ページがホームページのTOPページとして表示されます。WordPressでは、「設定」から「表示設定」を開き、公開済みの固定ページをホームページに指定できます。WordPressの案内

固定ページを選択しただけでは設定は完了しません。必ず画面下部の「変更を保存」をクリックしてください。

作成した固定ページが選択欄に表示されない場合

作成したTOPページが「ホームページ」の選択欄に表示されない場合は、次の点を確認してください。

固定ページが公開されているか
下書きの状態になっていないか
固定ページのタイトルが設定されているか
「投稿」ではなく「固定ページ」で作成しているか

固定ページが下書きの場合は、編集画面を開いて「公開」をクリックしてください。

公開後に「設定」から「表示設定」を開き直すと、選択欄に表示されます。

TOPページが設定できたか確認する

設定を保存したら、ホームページを実際に開いて確認します。

WordPress管理画面の左上にあるサイト名をクリックします
「サイトを表示」をクリックします
作成したTOPページが表示されることを確認します

確認するポイント

作成した固定ページが最初に表示される
ヘッダー画像が正しく表示されている
タイトルと本文が正しく表示されている
文字や画像が途中で切れていない
スマートフォンでも見やすく表示されている
不要なコメント欄が表示されていない

TOPページ作成の最終チェック

最後に、すべての設定が完了しているか確認しましょう。

固定ページ

固定ページでTOPページを作成した
タイトルを入力した
AIで作成した本文を貼り付けた

画像

ページの一番上にヘッダー画像を入れた
アイキャッチ画像を設定した
ヘッダー画像とアイキャッチ画像に同じ画像を使用した

URLと公開

スラッグをtopに変更した
固定ページを公開した
公開後のページを確認した

表示設定

「設定」から「表示設定」を開いた
「ホームページの表示」で「固定ページ」を選択した
「ホームページ」で作成したTOPページを選択した
「変更を保存」をクリックした

すべて完了したら、TOPページの作成と表示設定は完了です。

今後、文章や画像を変更したい場合は、WordPress管理画面の「固定ページ」からTOPページを開いて編集します。