PR
WordPress

【WordPress】固定ページの作り方・使い方を図解入りで解説

【WordPress】固定ページの作り方・使い方を図解入りで解説 WordPress

WordPressの固定ページの作り方・使い方に関する詳しい情報をお探しの方向け。

 

WordPressサイトでプロフィールページ、商品・サービスの案内、会社概要、お問い合わせページ、プライバシーポリシーなどのページを作る時は、「固定ページ」を使ってページを作ります。

この記事では、WordPressの標準エディタ(ブロックエディタ)の固定ページ作成機能を使って固定ページを作る方法を解説します。

 

新規ページの作成方法から、ページタイトルの入力、画像挿入、トップページの表示方法、お問い合わせフォームの表示方法など、画像入りで詳しく解説していきます。

 

また、本記事では下記手順で解説しますので、手順通りに作業することで、ページの作り方から公開設定、応用的な使い方までマスターできるようになっています。

  • 固定ページの作り方
  • 固定ページの公開方法
  • 固定ページの応用的な使い方

 

本記事を参考にしながら、是非、ページ作成を進めてみて下さい。

 

ちなみに、「WordPressのインストールはこれから」という方は、以下の記事でインストール方法を解説していますので、是非参考にして下さい。

WordPressの固定ページで作るページとは

固定ページの作り方を紹介する前に、まずは、WordPressの固定ページで作るページはどのようなものかを解説します。

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

固定ページとは、「会社情報」や「お問い合わせ」のように、カテゴリーに属さない独立した単体ページを作る機能です。

 

投稿のように時系列で表示されませんので、下記のように時系列とは無関係なページを作成する時に使用します。

  • トップページ
  • 事業内容(商品・サービス案内)
  • プロフィール
  • 会社案内
  • お問い合わせ
  • プライバシーポリシー
  • 個人情報保護方針

 

固定ページは投稿一覧の中には表示されませんので、メニューバーなどに自分で配置する必要があります。

固定ページと投稿の違い

固定ページと投稿の違いは下記のとおりです。

  • 固定ページ → カテゴリーに属さず、会社情報やプライバシーポリシーなど、独立した内容のページ。メニューに表示したい時に使います。
  • 投稿 → ブログ記事や新着情報など、時系列で作るコンテンツページ。

 

投稿と固定ページの違いの詳細は、バズ部さんの
WordPressの固定ページと投稿の違い」で詳しく解説されていますので、是非参考にして下さい。

 

固定ページの使い道をざっくり把握したら、実際にページを作っていきましょう。

 

【基礎】WordPressの固定ページの作り方

それでは早速、WordPressの固定ページの作り方を解説します。

  • 新規ページの作成方法
  • ページタイトルの入力
  • ページ本文の入力
  • 見出しの入力
  • ページに画像挿入
  • 親子関係の設定
  • アイキャッチ画像の設定

上記のとおりです。

新規ページの作成方法

ダッシュボード>固定ページ>新規追加 を選択すると、新規ページ作成画面が開きます。

他にも、固定ページ一覧画面の新規追加ボタンでも開きます。

ヘッダー上部にある「+新規」のプルダウンメニューの「固定ページ」を選択しても新規作成画面が開きます。

下図画面が開いたら、新規ページを作ります。

上部メニューの使い方

上部メニューの使い方は下記のとおりです。

  • :固定ページ一覧画面に戻ります
  • :ブロックメニューを開きます
  • :編集/表示モードの切り替え
  • :元に戻す(操作を1つ戻す)/やり直すボタン(操作を1つ進める)
  • :コンテンツ情報(文字数・段落数など)の表示
  • :ブロックナビゲーションの表示
  • :右サイドバーの表示/非表示
  • :エディタ設定(表示方法の変更など)

右サイドバーの開き方

画面右上にある歯車のアイコンをクリックすると右サイドバーが開きます。

左側メニューの表示方法

①画面右上にあるメニュー(縦に点が3つ並んでるアイコン)をクリックし、②「フルスクリーンモード」のチェックを外します。

下図のように、左側メニューが表示されます。

左側メニューはお好みで表示/非表示を選択すると良いです。

非表示に戻したければ、フルスクリーンモードにチェックを入れれば非表示になります。

ページタイトルの入力

「タイトルを追加」という部分にページタイトルを入力します。

サンプルとして、下図のようにページタイトルを入力してみました。

ページ本文の入力

タイトルの下は、ページの本文を書くエディターの部分となっています。

ここに文章を書いたり、画像を挿入します。

ちなみに、WordPressは1行がひとつの「ブロック」となっています。

Enterキー押すと2つ目のブロックが出現します。

また、ブロックの右側にある「+」をクリックすると、段落を追加したり、画像や見出し、スペースなどを追加できるようになっています。

ブロックメニューの「すべて表示」をクリックすると、エディタの左側にブロックメニューが全て表示されます。

見出しの入力

ページの見出しを入力するには、①見出しとなる文章を入力し、②ブロック上部のアイコンをクリックします。

プルダウンメニューが表示されますので、「見出し」を選択すると、先程の文章が見出しに変わります。

ブロック上部のメニュー内にある「H2」をクリックすると、H1~H6までの見出しが選択できます。

H1の見出しは使わないようにしましょう。
H1はブログ記事のタイトルで使用されていますので、本文内でH1を使うのはSEO対策上良くないです。

 

ちなみに、見出しの使い方のルールを「見出しタグを使う意味や使い方・ルールを解説【階層構造を整えよう】」という記事で解説していますので、是非参考にして下さい。

ページに画像挿入

ページに画像を挿入するには、①ブロック右の「+」をクリックしてメニューを開き、②「画像」を選択します。

なお、①上部メニューの「+」アイコンをクリックし、②画像を選択でもOKです。

画像の挿入方法は3つ

画像の挿入方法は3つあります。

  • アップロード
  • メディアライブラリ ← 推奨
  • URLから挿入(使うことはないと思います)

アップロードを選択して直接画像を挿入してもよいですが、おすすめはメディアライブラリを選択して挿入する方法です。

メディアライブラリを使って画像を挿入する方法

メディアライブラリに挿入したい画像をドラッグ&ドロップします。

メディアライブラリにアップロードした画像が表示されますので、①画像を選択し、②「選択」をクリックします。

下図のように本文中に画像を挿入できます。

本記事では画像挿入方法のみ紹介していますが、「【WordPress】画像の挿入方法【図解入りで詳しく解説】」という記事で画像挿入に関する様々な機能や使い方を紹介していますので、興味のある方は是非どうぞ。

 

また、フリーの画像をお探しの方は、下記記事をどうぞ。

画像レイアウト

WordPressには画像レイアウトが4種類用意されています。

下記4種類のレイアウトは殆どのテーマに共通しています。

テーマを変更すると、下記4種類の他にテーマ固有のレイアウトが追加されます。
  • 画像を2つ並べて表示
  • 2カラムで画像とテキストを表示
  • 見出しを含む大きなヘッダー
  • 画像の引用

ちなみに本記事では、2つ並べて表示する方法と、2カラムで画像をテキストを表示する方法を解説します。

画像を2つ並べて表示

検索ボックスに「画像」と検索すると画像レイアウトが表示されますので、「2つ並べて表示された画像」を選択します。

下図のように画像が2つ並んで表示されます。

画像にマウスオーバーするとメニューが表示されますので、下図アイコンの「画像の置き換え」をクリックします。

メディアライブラリで画像を選択します。

下図のように、画像を挿入できました。

同じ要領で、右側の画像も変更します。

2つの画像を並べて表示することができました。

2カラムで画像とテキストを表示

「画像を含む2カラムのテキスト」を選択します。

画像にマウスカーソルを合わせると上部メニューが表示されますので、「置換」を選択します。

下図のように画像を変更できました。

画像の下のテキストも編集できます。

親子関係の設定

下記ページ構成でサイトを作る場合、「ページ属性」という項目で親子関係を設定します。

  • 事業紹介(親ページ)
    • サービスA(子ページ)
    • サービスB(子ページ)
  • 会社概要(親ページ)
    • アクセス情報(子ページ)
    • 会社の沿革(子ページ)
    • 企業理念(子ページ)
  • お問い合わせ(親ページ)

 

なお、ページ構成が下記のような場合、設定の必要はありません。

  • プロフィール
  • 事業紹介
  • 会社概要
  • お問い合わせ

 

ちなみに、ページ構成を作る方法を「【Webサイト】ページ構成(サイトマップ)の考え方を解説【サンプルあり】」という記事で紹介していますので、是非参考にして下さい。

親子関係の設定方法

親子関係の設定方法は右サイドメニューで行います。

サンプルとして、下記構成で親子関係を設定します。

  • サービス案内(親ページ)
    • サービスA(子ページ)
手順①:親ページを公開する

まずは「サービス案内」という親ページを作り、ページを公開状態にします。

手順②:子ページの作成

次に、子ページを作ります。

ページを新規作成し、右サイドバーの「ページ属性」を選択すると、親ページとなる「サービス案内」が出現しますので、親ページとして指定します。

そして、下書き保存や公開ボタンをクリックします。

固定ページ一覧画面を確認すると、下図のように表示されます。

これで親子関係の設定は完了です。

アイキャッチ画像の設定

ページのアイキャッチ画像の設定は、
①右サイドバーの「アイキャッチ画像」を選択し、②「アイキャッチ画像を設定」をクリックしてメディアライブラリを開いて画像を設定します。

固定ページではアイキャッチ画像を使うことは殆どないかもしれませんが、設定したい方はここで設定して下さい。

 

 

WordPressの固定ページの公開方法

WordPressの固定ページの公開方法は下記のとおりです。

  • :パーマリンクを設定する(URL設定)
  • :プレビューで表示を確認
  • :固定ページを公開する

上記のとおりです。

①:パーマリンクを設定する(URL設定)

ページを公開する前に、パーマリンクを設定します。

①右サイドバーの「パーマリンク」をクリックし、②URLスラッグを半角英字に編集します。

日本語URLでページを公開しないようにしましょう。

下図のように半角英字になっていればOKです。

ページ内容が推察できるような名称にするのがポイントです。

 

②:プレビューで表示を確認

ページを公開する前に、プレビューで表示を確認します。

①画面右上にある「プレビュー」をクリックするとプルダウンメニューが開きますので、②「新しいタブでプレビュー」をクリックします。

なお、タブレットやモバイルを選択すると、タブレットやスマホでの表示を確認できます。

③:固定ページを公開する

パーマリンクを設定し、プレビューで表示を確認したらページを公開しましょう。

右上の「公開」ボタンをクリックします。

さらに「公開」をクリックすると、ページは公開状態となります。

以上でWordPressの固定ページの公開は完了です。

お疲れさまでした。

 

【応用】WordPressの固定ページの使い方

WordPressで固定ページを作る時によく使用する応用的な使い方を7つ紹介します。

  • カラムレイアウトの作成方法
  • ブロックレイアウトのグルーピング
  • テーブル(表)挿入方法
  • ショートコードの挿入方法
  • パスワード保護ページの設定方法
  • 固定ページをトップページに表示する方法
  • 投稿の新着記事一覧ページの作り方

上記のとおりです。

カラムレイアウトの作成方法

カラムレイアウトは、画像やテキストを横並びで表示させるレイアウトです。

スマホでアクセスすると、縦一列に表示されます。

 

ブロックメニューの「カラム」を選択します。

カラムパターンを選択します。
サンプルとして「50/50」を選択します。

下図のようにブロックが横並びで出現します。

テキストを入力してみます。

①ブロックにカーソルを合わせると、ブロックメニューが表示されますので「段落」を選択します。

下図のようにテキストを入力できるようになります。

右カラムも文章を追加してみます。

テキストを選択して見出しに変更することもできます。

 

ちなみに、この状態でEnterキーを押すと、ブロックが追加され、カラム1の文章が下へ下へと追加されるようになります。

カラムレイアウトを設定した場合、カラム2の右下に表示されている「+」で新たなブロックを追加しない限り、カラムに分かれた状態でレイアウトが維持された状態となります。

カラムの追加

カラムの間にマウスカーソルを合わせると、「カラムを追加」という項目が表示されますので、クリックするとカラムを追加できます。

ブロックレイアウトのグルーピング

ブロック1とブロック2のテキストをマウスで選択します。

上部メニューの「オプション」をクリックします。

グループ化を選択します。

2つあったブロックが下図のように1つのブロックに合体します。

テーブル(表)挿入方法

ブロック右の「+」をクリックし、テーブルを選択します(出現しないときは、ブロックの検索で「テーブル」と入力して下さい)。

カラム数と行数を設定し、「表を作成」をクリックします。

なお、カラム数と行数の意味は下記のとおりです。

  • カラム数:縦列
  • 行数:横列

下図のようにテーブルが表示されます。

テーブルメニューの解説

下図の項目をクリックすると、テーブルブロックをグループ化したり、カラムとして表示できます。

テーブルデザインも変更できます。

下図アイコンをクリックすると、テーブル内のテキストの表示を設定できます。

下図アイコンをクリックすると、行・列の追加・削除を設定できます。

画面右上のアイコンをクリックして右サイドバーを開くと、テーブルスタイルやテーブルのヘッダー・フッターの設定ができます。

テーブルカラーの変更

右サイドバーの「色設定」でテーブルカラーを変更できます。

 

ちなみに、テーブルの内容を頻繁に更新される方や、セル数が多いテーブルを作られる方、ソート機能付きの高機能なテーブルを作成したいという方は、テーブル作成プラグインを使うと便利です。

ショートコードの挿入方法

+をクリックしてブロックメニューを開き、「ショートコード」を選択します。

下図赤枠内にショートコードを挿入します。

お問い合わせフォームもショートコードを入れるだけ

お問い合わせフォーム作成プラグイン「Contact form 7」のショートコードを入れると、フォームが表示されます。

手順は下記のとおりです。

  • ①新規ページを作成する
  • ②フォームのショートコードを貼り付ける
  • ③パーマリンクを設定して公開する

 

詳しくは「【WordPress】お問い合わせフォームを簡単設置!Contact form 7の使い方」をどうぞ。

パスワード保護ページの設定方法

下図赤枠内(「ステータスと公開状態」項目)の公開をクリックします。

公開状態というメニューが表示されますので、パスワード保護を選択し、任意のパスワードを設定します。

この状態でページを公開すると、パスワードで保護されたページを作成できます。

 

ちなみに、パスワード保護ページの文言をカスタマイズしたい方は、「【WordPress】パスワード保護ページのタイトルとテキストを変更するカスタマイズ方法」を参考にして下さい。

 

ページ単位ではなく、サイト全体を保護したいという方は「WordPressでサイト全体・ページ単位をパスワードで保護する方法」をどうぞ。

固定ページをトップページに表示する方法

ビジネスサイトやブログのトップページをサイト風に作りたいという方は、固定ページでトップページとなるページを作り、トップページに表示させます。

 

設定方法は下記のとおりです。

  • ①トップページ用のページを作成する
  • ②表示設定でトップページに表示させるページを指定

上記のとおりです。

①トップページ用のページを作成する

新規追加で新しいページを作成します。

トップページ用のページを作ります。

なお、トップページに表示されるページはタイトルが表示されませんので、ページタイトルは管理しやすい名称にしておけばOKです。

パーマリンクの設定も不要です。

ページを作成したら「公開」をクリックします。

②表示設定でトップページに表示させるページを指定

表示設定でトップページに表示させるページを指定します。
ダッシュボード>設定>表示設定 を選択します。

表示設定でトップページに表示させるページを指定します。

設定方法は下記のとおりです。

  • ①ホームページの表示:固定ページにチェックを入れます。
  • ②ホームぺージ:トップページ用の固定ページを選択します。
  • ③変更を保存:設定を保存します。

トップページ用のページが表示されるようになります。

投稿の新着記事一覧ページの作り方

お知らせページや、新着情報を一覧表示するページを作りたい方は、投稿の新着記事一覧ページを作って表示させます。

 

設定方法は下記のとおりです。

  • ①新着情報を一覧表示するページを作成する
  • ②表示設定で新着情報を一覧表示させるページを指定

上記のとおりです。

①新着情報を一覧表示するページを作成する

まずは新着情報を一覧表示するページを作ります。

作り方は下記のとおりです。

  • ①ページタイトルを入力します。
  • ②URLスラッグを編集します。
  • ③公開ボタンをクリックします。

②表示設定で新着情報を一覧表示させるページを指定

表示設定で新着情報を一覧表示させるページを指定します。
ダッシュボード>設定>表示設定 を選択します。

表示設定で新着情報を一覧表示させるページを指定します。

設定方法は下記のとおりです。

  • ①ホームページの表示:固定ページにチェックを入れます。
  • ②ホームぺージ:新着情報を一覧表示させる固定ページを選択します。
  • ③変更を保存:設定を保存します。

これで、「お知らせ」というページに新着記事一覧が表示されるようになります。

ちなみに、「1ページに表示する最大投稿数」で表示可能な投稿数を設定できます。

 

WordPressの固定ページの使い方に関するよくある疑問

最後に、WordPressの固定ページの使い方に関するよくある疑問を3つ紹介します。

  • カラフルでおしゃれな文字装飾は使えないの?
  • 動きのあるページを作りたいけど、どうやって作るの?
  • サイト内検索の検索結果に表示させたくないページがある時はどうすればいいの?

上記のとおりです。

カラフルでおしゃれな文字装飾は使えないの?

WordPressのデフォルトテーマでは、カラフルでおしゃれな文字装飾の用意はありません。

ですので、装飾を使いたい方は下記いずれかの方法を選択することになります。

  • 文字装飾が用意されているテーマを使用する(有料がほとんど)
  • 文字装飾のプラグインを導入する(無料あり)

 

有料テーマは沢山の文字装飾パターンが用意されていますので、カラフルでおしゃれな文字装飾を使いたい方は有料テーマに変更した方が早いです。

 

文字装飾のプラグインは、無料で使えるプラグインがあります。

さとしんさんの
【WordPress】ブロックエディターでマーカー風の装飾をする方法!おしゃれなマーカーも紹介!」で詳しく解説されていますので、是非参考にして下さい。

動きのあるページは作れないの?

WordPressのデフォルトテーマはアニメーション機能を実装していません。

ですので、動きのあるページを作りたいという方は、文字装飾同様、アニメーション機能を実装しているテーマを使うか、プラグインを導入するかの2択となります。

  • アニメーション機能を実装したテーマを使用する(有料がほとんど)
  • アニメーション効果が使えるプラグインを導入する(無料あり)

 

有料テーマの多くはアニメーション機能を実装していますので、動きのあるページを自作したい方は有料テーマに変更した方が早いです。

 

 

アニメーション効果が使えるプラグインは、無料で使えるプラグインがあります。

内田智士さん運営サイトの
『ブロックをアニメーション化したい!』便利&簡単なプラグインBlocks Animationを使おう」という記事で詳しく解説されていますので、ぜひ参考にしてみて下さい。

サイト内検索の検索結果に表示させたくないページがある時はどうすればいいの?

WordPressのサイト内検索は、ページタイプ(投稿・固定ページ)を問わず、全てのぺージが検索結果に表示されます。

ですので、サンクスぺージ(送信完了ページ)のように、
ユーザーに見せたくないページがある時は、プラグインを使えば簡単に非表示にできます。

詳しくは「WordPressのサイト内検索で特定ページを非表示「Search Exclude」」をどうぞ。

 

まとめ

以上、WordPressの固定ページの作り方や使い方を解説しました。

 

固定ページはブログサイトを運営される方はあまり使わないかもしれませんが、ビジネスサイトを作る方は頻繁に使う事になりますので、使い方をよく覚えておきましょう。

 

ちなみに、固定ページを作ったら、ヘッダーメニューやフッターメニューを作り、ユーザーがページアクセスできるよう、導線を作りましょう。

メニューの作り方は「【WordPress】ナビゲーションメニューの作り方【メニュー追加・階層】」をどうぞ。

 

タイトルとURLをコピーしました