WordPress固定ページ作り方と編集方法

本記事は広告が含まれる場合があります WordPress

【初心者向け】WordPress固定ページの作り方と編集方法

WordPress(ワードプレス)を始めたばかりの初心者の方で、固定ページの意味や使い方がよくわからず、悩んでいる方も多いのでしょうか。

今回は、WordPress固定ページの編集方法や表示の仕方・使い方全般を説明していきます。

 

 

 

WordPress固定ページとは

固定ページとは単体ページを作成する機能

WordPress固定ページ

 

固定ページとは、「会社情報」や「お問い合わせ」のように、単体ページを作成する際に利用する機能です。固定ページで作成したページは投稿と違って投稿一覧の中には表示されないため、メニューバーなどに自分で配置する必要があります。

 

■例)固定ページで作成したお問い合わせページ
ワードプレス固定ページの例

 

固定ページと投稿の違いと使い分け方

「固定ページ」と同様にページを作成する機能に「投稿」という機能があります。

一般的に固定ページでは「会社情報」や「お問い合わせ」などページ単体で独立しているページで利用します。

一方、ブログやお知らせのような時系列で作成するページは「投稿」を利用します。

ワードプレスの投稿と固定ページの違い

 

「投稿」はカテゴリーやタグによりページ同士をジャンル分けして一覧表示することができるのに対して、「固定ページ」は通常カテゴリーやタグという概念がなく、ページ単体で独立しています。

 

項目 投稿 固定ページ
特徴 ブログのようなコンテンツは投稿で作成する
例)コラム、技術情報、お知らせ・ニュース、イベント、商品ページなど
ページ単体で完結できるようなコンテンツを書くのに向いている。
例)トップページ、会社情報、お問い合わせ、アクセス、採用情報、ランディングページなど
できること
  • カテゴリー・タグによる投稿の関連付けができる
  • 投稿一覧、カテゴリー一覧、タグ一覧から各ページを一覧表示できる
  • 複数のブログタイプ(カスタム投稿タイプ)を作ることができる
  • 固定ページ同士で親子関係を作ることができる
  • ページごとにデザインテンプレートを作成・選ぶことができる
できないこと
  • 投稿同士で親子関係を作ることができない。
  • ページごとにデザインテンプレートを選択することができない。
  • カテゴリー・タグによる投稿の関連付けができない
  • 固定ページ一覧、カテゴリー一覧、タグ一覧などで各ページを一覧表示できない

 

(関連記事)
WordPress投稿と固定ページの違いと使い分け方
WordPress投稿の書き方・使い方
 

固定ページの新規追加および編集・削除方法

まずは、固定ページの新規追加や編集方法などを説明します。

本例では、「Lightning」というテーマを使用した例で説明していきますので、同じテーマを利用したい方は「Lightning」をご利用ください。●WordPressテーマの適用方法はこちら
 

【超基本】固定ページを新規追加する方法

まず試しに固定ページを作成してみましょう。固定ページ>固定ページ一覧(新規追加でもOK)を押下します。
固定ページ>固定ページ一覧

 

固定ページ>新規追加ボタンを押下します。
固定ページ>新規追加

 

はじめてブロックエディターの画面を開いた時には、ガイドが表示されます。今回は「×」を押していったん閉じます。
ブロックエディター  はじめに ガイドを閉じる

 

下記のような編集画面が初期状態で表示されます。大きく、メインのエディターエリアと上部ツールバー、右のツールバーがあります。
WordPress6.3.1のエディター画面
(※)上記はWordPress6.3.1の画面です。バージョンによって若干の差異があるのでその場合はご自身のご利用の画面に合わせて読み替えてください。

 

まずはタイトルと文章を書いたのち公開をして表示を確認してみましょう。

 

詳細なエディターの説明は後ほど説明をしていきます。ここではいったん、作成した固定ページをメニューバーに表示する方法を説明していきます。

ここでは、固定ページをいくつか作成・公開してみましょう。

■固定ページの例

  • HOME※
  • 会社情報
  • お客様の声
  • ブログ※
  • お問い合わせ

※ブログやHOMEはあとで設定する特殊なページ用です(後述で解説します)。
※編集画面の操作方法は「固定ページ編集画面(ブロックエディター)でのページ編集方法」をご参照ください。

 

【超基本】メニューバーに固定ページを設定する

次に、作成した固定ページを設定しましょう(メニューバーの使い方を知っている方は本手順不要です)。

 

管理画面から外観>メニューの設定を選択します。

WordPress 外観>メニュー

WordPress 外観>メニュー

 

まずメニューを作成します。ここでは、「メインメニュー」(※)と入力してメニューを作成ボタンを押下します。
メインメニューと入力してメニューを作成する
(※)名称はなんでもOKです。

 

メインメニューが作成されました。事前に作った固定ページが表示されます。先ほど作成した固定ページをチェックして、「メニューに追加」ボタンを押下します。
事前に作成した固定ページにチェックを入れてメニューバーに追加ボタンを押下する

 

追加したメニューは、ドラッグ&ドロップでメニューの順番を変えることができます。

 

最後にメニューの設定を行います。ここではHeader NavigationとFooterNavigationにチェックを入れて最後にメニューを保存ボタンを押下します。
ここではHeader NavigationとFooterNavigationにチェックを入れて最後にメニューを保存ボタンを押下します

(※)Header NavigationとFooterNavigationという名称はご利用のテーマによって違います。また、テーマによっては1つしかチェックができない場合も3つある場合もあります。

 

メニューバーに作成した固定ページが表示されていれば完了です。

 

ここでは、メニューバーに関する詳しい説明は割愛しますが、メニューバーで固定ページを表示する方法は「【WordPressメニューバー】作り方とカスタマイズ方法を解説」の記事をご参照ください。

 

作成した固定ページを編集・削除する方法

作成した固定ページを編集する

一度作成した固定ページは、固定ページ>固定ページ一覧から編集できます。
固定ページ>固定ページ一覧

 

タイトル下付近にマウスカーソルを合わせると「固定ページ編集」リンクが表示されますのでクリックします。
固定ページ>編集

 

固定ページ編集画面が表示され、固定ページを編集することができます。
固定ページ編集画面 ブロックエディター版

編集画面の操作方法は「固定ページ編集画面(ブロックエディター)での

ページ編集方法」をご参照ください。
 

クイック編集では簡単な情報を編集できます

「クイック編集」では、簡単な情報を編集できます。
固定ページ>クイック編集

 

クイック編集では固定ページ本文以外のタイトルやスラッグ、公開ステータスなどの情報を簡単に編集することができます。
固定ページ>クイック編集画面

 

作成した固定ページを削除する方法

一度作成した記事の削除する方法を説明していきます。固定ページ>固定ページ一覧をクリックします。
固定ページ>固定ページ一覧

 

タイトル下付近にマウスカーソルを合わせると「ゴミ箱」リンクが表示されますのでクリックします。
固定ページ>ゴミ箱

 

以上で削除は完了です。

 

なお、誤って消した場合は、ゴミ箱リンクから復元することができます。
削除済みの固定ページの復元方法

 

以上で、固定ページの追加・編集・削除方法の説明は終わりです。ここからはより具体的なエディターの基本的な使い方を説明していきます。

 

作成した固定ページをトップページに割り当て・表示する

トップページは初期状態では、最新の投稿記事が表示されています。WordPressではトップページに任意の固定ページを割り当てることができます。
トップページに任意の固定ページを割り当てる
 

ここでは、固定ページをトップページに割り当てる表示設定を行なっていきます。

ダッシュボードの設定>表示設定を選択します。
設定>表示設定

 

表示設定が表示されます。
表示設定

 

初期設定は、トップページの表示が「最新の投稿」一覧が表示される設定になっています。
表示設定 トップページに最新の投稿一覧が表示される設定になっている

 

トップページに事前に作成した固定ページ(ここではHOME)を割り当てます。
表示設定 トップページに固定ページを設定する

 

さらに、元々トップページに表示されていたブログ一覧ページは任意に固定ページに割り当てることができます。

「投稿ページ」に事前に作成した固定ページ「ブログ」を割り当てましょう。
表示設定 投稿ページに固定ページを設定する

 

設定が完了したら最後に変更を保存しましょう。

 

以上で設定は完了です。トップページに「HOME」の内容が、「ブログ」にはブログ一覧が表示されて入れば完了です。

 

固定ページ編集画面(ブロックエディター)のページ編集方法

ここからは固定ページ編集画面(ブロックエディター)でのページの編集方法を説明していきます。

編集画面が初期状態で表示されます。大きく、メインのエディターエリアと上部ツールバー、右のツールバーがあります。
WordPress6.3.1のエディター画面
(※)上記はWordPress6.3.1の画面です。バージョンによって若干の差異があるのでその場合はご自身のご利用の画面に合わせて読み替えてください。

 

  • メインエリア・・・タイトルや本文を作成するエディター画面。ブロック単位でページを作成していくメインエリア
  • 上部ツールバー・・・管理画面への移動や公開設定・エディター設定・ブロック追加などの基本項目を設定できる
  • 右ツールバー・・・アイキャッチ・公開設定・パーマリンクなどの文書設定や、各ブロックの設定を行うことができる

 

WordPress5.0から標準エディターとなったブロックエディター

2018年12月末にリリースされたWordPress5.0から「ブロックエディター」が標準エディターになっています。

2018年以前はWordのようなエディター(クラシックエディター)が標準となっていました。
ワードプレスの新旧エディター(Classic EditorとGutenberg Editor)
 

旧エディター(クラシックエディター)の方にあえて戻したい場合は、プラグイン「Classic Editor」を利用することで従来のエディターに戻すことができます。ただし、今から新しくWordPressを覚えるなら、ブロックエディターで覚えると良いでしょう。

【Classic Editor】WordPressを旧エディターに戻す方法

 
それでは、ブロックエディターの基本的な使い方について詳しく説明していきます。

エディター内の+ボタンを押下することでブロックの追加ができます。※ご利用のバージョンによって若干画面が違う場合があります。
ブロックエディター  ブロックの追加
 

【超基本】テキスト・見出し・画像・リストを使ってページ作成する

まず基本的なブロック(テキスト・見出し・画像やリスト)を使ってページ作成していきましょう。

<4>段落ブロックでテキストを入力する

まずは段落ブロックを挿入してみましょう。段落ブロックは通常エディター末尾でエンターボタンを押下することで追加されます。あるいは+ボタンから「段落」を選択して挿入することができます。


 

Enterによる改行とShift+Enterによる改行の違い

また、段落で文章を書いている途中でShift+Enterボタンを押下すると、同じ段落のまま改行されます(行間が大きく開きません)。
Enterボタンを押すと新しい段落ブロックとして改行されます(行間が大きくあきます)。

■Shift+Enterによる改行と、Enterによる改行の違い


 

段落ブロックのスタイル変更

段落ブロックで挿入したテキストを装飾したい場合は、右側にあるメニューか、ブロック上部にあるツールバーから設定変更することができます。

段落ブロック以外のブロックでも、右側にあるメニューか、ブロック上部にあるツールバーから設定変更することができますので覚えておきましょう。

 

見出しブロックを挿入して見出しを作る

次に見出しを挿入してみましょう。+ボタンを押して、「見出し」を選択します。ブロック間の間にカーソルを合わせて表示される+からブロックを間に挿入することもできます。

 

なお、ブロックを選択すると、下記のようにブロックのすぐ上にツールバーが表示されます。見出しの場合は、見出しレベル(※)の変更やテキスト揃え、太字斜体などの設定ができます。また、右のメニューアイコンからブロック削除することもできます。


 

また、見出しのブロックを選んだ状態で、右サイドバーから(表示されていない場合は、右上の設定アイコンを押して表示できます)、色やその他の設定ができます。

 

画像ブロックを挿入して画像を表示する

次に画像を挿入してみましょう。右下+ボタンを押して「画像」を選択、自分の好きな画像を選択します。必要に応じて右ツールバーから画像ブロックの設定もできます。

 

(※)画像ブロックの詳細は「【画像ブロック】WordPressブロックエディター画像ブロックの使い方」をご参照ください。
 

リストブロックを挿入して箇条書きを作る

次にリストブロックを利用して箇条書きを作ってみましょう。リストのアイコンを選択すると、箇条書きを作ることができます。


 

なお、リストブロックには外側の「リスト」ブロックと内側の「リスト項目」から構成されています。

外側のリストブロックでは、リスト全体の 装飾・スタイルなどを行えるのに対して、内側の各リスト項目ブロックでは、各リストの色や大きさなどの設定をそれぞれ設定できます。

リストの構造
 

(※)リストブロックの詳細は「WordPress箇条書き/番号付きリストの作り方【リストブロック】」をご参照ください。
 

2カラム(2列横並び)のレイアウトを作成する

次に少し応用で、カラムブロックを利用して2列横並びのレイアウトを作成してみましょう。

カラムを選択すると、2列や3列などの横並びのブロックを挿入することができます。カラムは後から比率を変えたり列数を変えたりできます。

 

■表示例(PCでは横並びでスマホの場合は縦に並びます)

 

旧エディターでは横並び表示するのは難しかったので、これは便利な機能ですね!!

 

挿入しようとするブロックの位置に注意

カラムなどの外枠を作るブロックを利用することでレイアウト構造が複雑になってくるので、自分が意図する場所にブロックが挿入されないということもでてきます。

左下のブロックのナビゲーションを確認することで自分が追加しようと知っているブロックの位置を確認することができます(次で詳しく説明)
挿入しようとしているブロックの位置に注意
 

■複数の+がある場合にブロック挿入位置が変わることに注意

 

ブロックを選択しにくい時はブロックナビゲーションが便利

ブロックの組み合わせが複雑になってきた時は、ブロックナビゲーションが便利です。

ブロックナビゲーションを選択すると、ブロックの階層構造を表示でき、選択したいブロックを選ぶことが便利です。
ブロックナビゲーション、ブロックのぱんくずリスト

 

■ブロックナビゲーションを活用して複雑なブロックからピンポイントで対象ブロックを選択する

 

 

固定ページを下書き保存・公開をする

ある程度ページを作成したら、保存しましょう。下書き保存を選択すると、下書き(公開していない)でページを保存することができます。

 

固定ページを公開をする

ページを公開しても良い場合は、「公開」ボタンを押下して保存しましょう。ページが公開されて一般の人も閲覧できるようになります。

 

固定ページを下書きに戻す

一度ページを公開してから再度下書きに戻したい場合は「設定」の固定ページタブの中にある「下書きへ切り替え」ボタンを押下します。

 

ブロックをあとから挿入・移動・削除する

既存のブロックの間に新たにブロックを挿入したり、既存のブロックを移動したり、削除することもできます。

 

既存のブロックの間に挿入する

すでに作成したブロックとブロック境目にカーソルを合わせると「+」ボタンが表示されます。「+」ボタンを押下すると既存のブロックの間に新しいブロックを挿入することができます。

 

うまく「+」ボタンが出てこない場合は、一度エンターを押して空白を作ってから右にある「+」を押すとブロック間に新しいブロックを挿入できます。

 

既存のブロックを移動する

既存のブロックの左側の矢印を選択すると、ブロックの順番を変更することができます。

 

SHIFTボタンを押しながら複数のブロックを選択した状態で矢印を選択すると、複数ブロックまとめて順番を変更することもできます。

 

また、点々のあるアイコンをクリックしたままドラッグ&ドロップでブロックを任意の場所に移動することもできます。

 

既存のブロックを削除する

既存のブロックを削除したい場合は、既存のブロックを選択して、詳細設定アイコンを選択してブロックを削除をすることができます。

 

このように、新しいエディターでは「ブロック」と言われる単位を挿入していくことでページを作成していくことができます。

 

【参考】WordPressのエディターで利用できる様々なブロック一覧

利用できるブロックはこのほかにもたくさんあります。

よく利用するブロックは下記の通り

項目 説明
段落ブロック 通常のテキストを入力するためのブロック ※詳細記事
見出しブロック 見出しを入力するためのブロック ※詳細記事
リストブロック リスト(箇条書き)を入力するためのブロック ※詳細記事
テーブルブロック テーブル(表)を入力するためのブロック ※詳細記事
画像ブロック 画像を入力するためのブロック ※詳細記事
ギャラリーブロック ギャラリー画像(画像を一覧表示したもの)を入力するためのブロック ※詳細記事
動画ブロック 動画(mp4)を入力するためのブロック
カラムブロック カラム(2列・3列横並び)を定義するためのブロック ※詳細記事
スペーサーブロック 縦に空白を入れるためのブロック ※詳細記事
ショートコードブロック ショートコードを入力するためのブロック
グループブロック ブロック同士をグルーピングするブロック ※詳細記事
カスタムHTMLブロック HTML文を入力するためのブロック ※詳細記事
最新の投稿ブロック WordPressの最新の投稿一覧を挿入するためのブロック

 

ブロックエディターの詳しい使い方は 「【総まとめ版】WordPressブロックエディターの使い方」に記載しています。

ほかにも、WordPressの有料テーマではオリジナルのカスタムブロックが利用できることも多いです。

(参考)目的別WordPressおすすめ無料テーマ6選
(参考)WordPressおすすめ有料テーマ10選
 
 

【参考】ブロックエディター編集画面の各項目の説明

メインエリア(エディター)でできること

メインエリアでは、タイトルや文章画像などをブロックという単位で作成していきます。
ブロックエディター  メインエリア

 

詳細なブロックの説明は後ほど説明をしていきます。ここではいったん、上部ツールバーや右ツールバーなどの全体の概要について先に説明していきます。

 

上部ツールバーでできること

上部ツールバーでは、管理画面への移動や公開設定・エディター設定・ブロック追加などの基本項目を設定・確認するできます。
ブロックエディター  上部ツールバー

 

上部ツールバーで設定できる項目は下記の通りです。

項目(アイコン) 説明
管理画面への移動ボタン 管理画面への移動(固定ページ一覧または投稿一覧へ戻ることができる)
管理画面(固定ページ一覧または投稿一覧)に戻るアイコン
ブロックの追加アイコン ブロックを追加することができる
ブロックの追加アイコン
編集モードの切り替えアイコン ブロックの選択・編集モードを切り替えることができる
ブロックエディター >上部ツールバー>ツールアイコン
前へ戻る・次へ進むアイコン 一つ前の操作に戻る・一つ後の操作に次へ進むことができる
ブロックエディター >上部ツールバー>元に戻す・次へ進むアイコン
ブロックナビゲーションアイコン ブロックナビゲーション。「リストビュー」タブでは現在アクティブな箇所のブロックの位置がわかる「アウトライン」タブでは文書の概要や利用ブロックの種類・数がわかる

ブロックエディター >上部ツールバー>ブロックナビゲーションアイコン

下書き保存・プレビュー・公開 下書き保存・プレビュー画面表示・公開がそれぞれできるPCアイコンをクリックするとタブレット・モバイルでのプレビューも可能

PCアイコンをクリックするとタブレット・モバイルでのプラビューも可能

設定アイコン エディターの設定ボタン。右ツールバーの表示・非表示の切り替えができる
ブロックエディター >上部ツールバー>設定アイコン
ツールと設定をさらに表示アイコン
ツールと設定をさらに表示
ツールと設定をさらに表示できる。具体的には表示モードやエディターモード、ツール、オプション設定が可能
ブロックエディター >上部ツールバー>さらに設定を表示アイコン

 

■固定ページを開いた状態から固定ページ一覧へ戻る例

 

■ブロックを追加する例。※追加した後は右ツールバーが非表示になるので「設定」ボタンから再度表示して設定できます。

 

右ツールバーでできること

右ツールバーでは、ページの設定や各ブロックの設定ができます。

 

「固定ページ」タブを選択すると、公開の設定やパーマリンク、アイキャッチ、(投稿の場合は)カテゴリー・タグなどの、この文書(ページ)全体の設定ができます。
ブロックエディター >右ツールバー>文書タブ

 

この文書タブで設定できる主な項目については、また後述で説明していきます。

 

また、任意のブロックにカーソルを合わせると、(「ブロック」タグが選択されている状態の)右側メニューでそのブロックの設定ができます。
ブロックの設定。ブロックにカーソルを合わせると、右側メニューでそのブロックの設定ができます。

 

設定項目はブロックにより異なりますが、色やデザインなどを調整したりすることができます。

 

固定ページの色々な使い方を覚える

固定ページでアイキャッチを追加する

固定ページでは「アイキャッチ」という、いわゆるサムネイル表示機能があります。アイキャッチを設定していると、FacebookやTwitterでシェアした際にアイキャッチに設定した画像を表示することができます。

 

アイキャッチは固定ページ編集画面右下の「アイキャッチ画像を設定」から設定することができます。
固定ページ>アイキャッチの設定

 

下記のようにアイキャッチ画像を設定しましょう。

 

固定ページで記事のURLを変更する

固定ページのURLは「概要」項目の中にあるURLをクリックすることで変更できます。
固定ページ>パーマリンクの設定

 

下記のようにURLを変更してみましょう。

 

(補足)パーマリンクとスラッグの違い

パーマリンクのほかに「スラッグ」という用語が出てきましたが、パーマリンクはURL全体を指すのに対して、スラッグはURLの末尾部分を指します。
WordPress 投稿画面 URLスラッグ

 

パーマリンクとスラッグの違い

パーマリンクとスラッグについての詳しい説明は「WordPressパーマリンク/スラッグの変更方法&おすすめ設定」をご参照ください。

 

テンプレートを変更する

ページによってはサイドバーありページとサイドバーなし(1カラム)ページなどレイアウトを変えたい場合があると思います。

固定ページでは、あらかじめ用意されている複数のレイアウトテンプレートからどれにするかを選択することができます。

テンプレートの変更方法は、右側にある「テンプレート」から変更できます。

(※)テンプレート名や種類は適用しているテーマによって異なります。

 

ページ間で親子関係を作成する

固定ページでは親となる固定ページを指定でき、ページ間で親子関係を作ることができます。
固定ページ親子関係の設定

 

なお、親子関係を作ると、URLの末尾が「.../親固定ページスラッグ/子固定ページスラッグ/」になります

 

■親ページを指定する例

 

パスワード付き固定ページを作成する

「表示状態」を「パスワード保護」に変更し、任意のパスワードを設定することで公開範囲を設定することもできます。
パスワード保護の設定

 

パスワード保護設定をしたページについては、パスワードを知っている人だけがページを閲覧できるようになります。

 

(関連記事)【Password Protectedの使い方】WordPressパスワード保護方法

 

まとめ

まとめです。今回は、WordPressの固定ページを利用して、ページの作成や編集方法、使い方全般を説明しました。

固定ページは「会社情報」や「HOME(トップページ)」「お問い合わせ」など独立したページで利用します。

なお、WordPressの有料テーマや一部の有名テーマでは、WordPress標準にはない綺麗なデザインのレイアウト・便利なブロックが用意されています。

WordPressのテーマ選びがまだの方は「WordPressおすすめ有料テーマ10選」をご参照ください。

今回は以上になります。最後までご覧いただきありがとうございました。

 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

-WordPress
-, ,