固定ページを作ってみよう

固定ページを作ってみようの画像

はじめに

第12章「ホームページに必要なページを考えよう」では、ホームページに必要なページを考えました。

たとえば美容室なら、

  • トップページ
  • 初めての方へ
  • メニュー・料金
  • 店舗・スタッフ紹介
  • アクセス
  • お問い合わせ

などです。

ここまで決まったら、いよいよWordPressで実際にページを作ってみましょう。

今回は、

固定ページを1枚作る基本操作

を覚えます。

最初からきれいなデザインを作る必要はありません。

まずは、

  1. 新しい固定ページを開く
  2. タイトルを付ける
  3. 文章を書く
  4. 保存する
  5. 表示を確認する
  6. 必要なら公開する

という一連の流れを経験することが目的です。

固定ページを作る流れ

練習用として、

「初めての方へ」

という固定ページを作ってみます。

ただし、文章がまだ完成していない場合は、無理に公開する必要はありません。

WordPressでは、

下書きとして保存しておく

ことができます。

そのため今回は、

「ページを作るところまで進み、内容が整っていれば公開する」

という進め方で大丈夫です。

1.「固定ページ」から「新規追加」を開く

WordPressの管理画面へログインします。

左側メニューから、

「固定ページ」

を選びます。

すると、現在作られている固定ページの一覧が表示されます。

そこから、

「新規追加」

を選びます。

固定ページの新規追加
固定ページの新規追加2

新しい固定ページを作るための編集画面が開きます。

2.固定ページの編集画面を見てみよう

現在のWordPressでは、標準で

ブロックエディター

という編集画面が使われます。

固定ページのイメージ

最初は少し独特な画面に見えるかもしれません。

でも、大きく考えると、

  • タイトルを書く場所
  • 内容を書く場所
  • 上部の操作ボタン
  • 右側の設定

があります。

この章では、すべての機能を覚える必要はありません。

まずはタイトルと本文を書ければ十分です。

「ブロック」って何?

WordPressのブロックエディターでは、

ページの中身を、

ブロック

という単位で組み立てます。

たとえば、

  • 段落
  • 見出し
  • 画像
  • リスト
  • ボタン
  • 動画

など、それぞれが一つのブロックです。

文章・画像がブロックとして積み重なるイメージの画像

たとえばページの中に、

見出し
文章
画像
見出し
文章
ボタン

と並んでいる場合、それぞれを別のブロックとして扱うことができます。

最初は難しく考えず、

「文章や画像を、部品として一つずつ置いていく」

くらいに考えておきましょう。

3.ページのタイトルを入力する

まず、ページ上部のタイトル欄に、

初めての方へ

と入力してみましょう。

タイトルは、そのページが何について書かれているのかを表す大切な部分です。

「ページ1」

「説明」

のような曖昧な名前ではなく、

見た人が内容を想像できるタイトル

を付けます。

今回なら、

「初めての方へ」

で十分です。

4.本文を書いてみよう

次に、タイトルの下へ本文を書きます。

まずは練習なので、短い文章で構いません。

たとえば、

はじめて当店をご利用いただく方へ。

こちらのページでは、私たちが大切にしていることや、ご来店までの流れをご案内します。

のように入力してみましょう。

文章を入力すると、

段落ブロック

として扱われます。

WordPressでは、普通に文章を書くだけなら、最初から難しい操作をする必要はありません。

5.見出しを入れてみよう

ページが長くなると、文章だけが続くよりも、

見出し

があった方が読みやすくなります。

たとえば、

「私たちが大切にしていること」

という見出しを追加してみましょう。

新しいブロックを追加し、

「見出し」

を選びます。

WordPressでは「+」ボタンなどからブロックを追加できます。

また、入力場所で / を入力して、使いたいブロックを検索する方法もあります。

今はどちらか一つ使えれば十分です。

6.画像もブロックとして追加できる

写真を載せたい場合は、

画像ブロック

を追加します。

画像ブロックでは、

  • 新しく画像をアップロードする
  • すでにWordPressへ登録した画像を選ぶ

といった操作ができます。

ただし、今回は固定ページ作成の基本を覚える章なので、画像の詳しい扱い方は次の機会に分けます。

今は、

文章だけでなく、画像もブロックとして追加できる

と分かれば十分です。

7.途中なら「下書き」で保存する

ページを作っている途中で、

「今日はここまでにしたい」

ということもあります。

その場合は、

下書きとして保存

します。

保存・表示確認・公開に関係する上部操作部分のイメージ画像

下書きは、

まだ一般公開されていない作業途中の状態

です。

文章が完成していなくても保存しておけるので、安心して少しずつ作ることができます。

WordPressの画面では、自動保存が行われる場合もありますが、

作業を区切るときは、保存されたことを確認する

習慣をつけておきましょう。

8.公開する前に表示を確認する

管理画面で見えているページと、実際にホームページで表示されるページは、完全に同じ見え方とは限りません。

そのため、公開前に、

実際にはどう表示されるのか

を確認します。

WordPressには、現在の変更内容を表示確認するための機能があります。

現在のブロックエディターでは、

  • デスクトップ
  • タブレット
  • モバイル

などの見え方を確認したり、新しいタブでページを確認したりできます。

ただし、この段階では細かなレスポンシブデザイン調整まで行いません。

まずは、

  • タイトルが表示されているか
  • 文章が読めるか
  • 変なところで崩れていないか

を確認できれば十分です。

9.内容が整ったら公開する

ページを一般の人が見られる状態にするには、

公開

します。

公開ボタンを押すと、確認画面が表示される場合があります。

内容を確認して、もう一度公開を確定します。

ただし、

練習だから必ず公開しなければならない

わけではありません。

文章がまだ途中なら、下書きのままで大丈夫です。

ホームページは、

準備できたページから公開する

という進め方で構いません。

「公開」と「保存」は違う

ここは初心者が混乱しやすいところです。

下書きとして保存

作業内容は残りますが、通常は一般の訪問者には公開されません。

公開

ホームページを訪れた人が見られる状態になります。

つまり、

保存したからといって、必ず公開されたわけではありません。

逆に、一度公開したページを編集した場合は、変更内容を保存・更新して反映していきます。

10.公開したページを見てみよう

ページを公開したら、

実際のページを表示

してみましょう。

管理画面ではなく、

お客様が見る側のホームページ

として確認します。

ここで、

「管理画面で作った内容が、本当に表側へ表示された」

という流れを一度経験しておくことが大切です。

第9章で説明した、

表側のホームページと、裏側の管理画面

がここでつながります。

ページを作っただけでは、メニューに自動で並ぶとは限らない

ここで一つ注意があります。

固定ページを作って公開しても、

必ずホームページ上部のメニューへ自動で追加されるとは限りません。

ページを作ることと、

そのページへの入口をホームページに配置すること

は別の作業です。

テーマによっては、新しいページを自動的にナビゲーションへ追加する設定もあります。

そのため、

「公開したのにメニューに出てこない」

からといって、ページ作成に失敗したとは限りません。

メニューやナビゲーションの作り方は、後の章で改めて扱います。

URLについては、まだ細かく触らなくて大丈夫

固定ページを保存すると、そのページにはURLができます。

たとえば、

https://example.com/初めての方へ

のような形です。

実際には、URLの末尾部分を分かりやすい英数字へ変更することもあります。

この末尾部分は、

スラッグ

と呼ばれます。

ただし、URLの決め方には後で考えておきたいポイントがあります。

今は適当に変更せず、

ページにはそれぞれURLがある

ということだけ確認しておきましょう。

パーマリンクやスラッグについては、別の章で詳しく扱います。

今回のポイント

  • 固定ページは「固定ページ → 新規追加」から作成できる
  • 現在のWordPressではブロックエディターが標準
  • 文章・見出し・画像などを「ブロック」として組み合わせてページを作る
  • 最初はタイトルと本文を書ければ十分
  • 作業途中のページは下書きとして保存できる
  • 公開前に実際の表示を確認する
  • 「保存」と「公開」は同じ意味ではない
  • 内容が整っていなければ、無理に公開する必要はない
  • 固定ページを公開しても、必ずナビゲーションへ自動追加されるわけではない
  • URLやスラッグは後で意味を理解してから整える

今回の視点

WordPressを覚えるとき、

「このボタンは何?」

「この設定は何?」

と一つずつ全部調べようとすると、前へ進みにくくなります。

でも、今回やったことはとてもシンプルです。

ページを作る。\ 書く。\ 保存する。\ 確認する。\ 必要なら公開する。

まず、この一本の流れを覚える。

細かな機能は、そのあとで十分です。

WordPressは機能が多いから難しいのではなく、

今必要のない機能まで同時に見えている

から難しく感じることがあります。

使うものから、一つずつ覚えていきましょう。


Part 2|WordPressの基本操作を覚える

前へ:第12章「ホームページに必要なページを考えよう」

目次:初心者向け WordPressで作るホームページ完全Guide

次へ:第14章「ブロックエディターの基本を覚えよう」