WordPressの固定ページの使い方を解説!ブロックエディタ(Gutenberg)対応

WordPressの固定ページの使い方を解説!ブロックエディタ(Gutenberg)対応

2020年6月6日
WordPress

WordPressの固定ページは会社概要やお問い合わせページを作るときに使います。
WordPress5から導入されたブロックエディタ(Gutenberg)を使えば、HTMLの知識がない方でも簡単に会社概要などのページを作れます。
今回は実際にブロックエディタで会社概要ページを作っていこうと思います。

会社概要ページの完成イメージ

今回は以下のイメージのような会社概要ページを作ろうと思います。(クリックで拡大します)

固定ページの完成イメージ

冒頭に会社の説明と写真があり、その次に会社概要の表、最後にGoogleマップを使ったアクセスマップを配置したページになります。

ページのデザインは使用するテーマによって異なります。今回は「BusinessPress」という無料テーマを使用して解説するので、完成イメージと同じデザインにしたい場合は同じテーマをインストールしてください。

会社概要の固定ページを作成する

WordPress管理画面のメニューから「固定ページ > 新規追加」をクリックしてください。

固定ページを新規追加

「タイトルを追加」という箇所に「会社概要」と入力してください。
ここに入力したテキストがページタイトルとなり、Googleの検索結果やブラウザのタブに表示されます。

固定ページのタイトルを入力

ページタイトルを入力したら一旦下書き保存します。

固定ページを下書き保存

下書き保存をした後にページタイトルをクリックすると「パーマリンク」という項目が表示されます。
パーマリンクの「編集」ボタンをクリックしてください。

パーマリンクを編集

「会社概要」を「about-us」に書き換えて「保存」ボタンをクリックします。

パーマリンクを保存

パーマリンクで設定したテキストはページのURLになります。日本語のままでもページは表示されますが、SEO的にも英語にしておいた方がベターです。

以上で固定ページの作成は完了です。次はコンテンツを作っていきます。

会社の紹介と写真を配置する

ページ冒頭の会社紹介と写真の部分を作っていきます。
本文を入力する欄をクリックすると右側に「+」アイコンが表示されるのでクリックしてください。
すると、使えるブロックの一覧が表示されるので「レイアウト要素」の中の「カラム」をクリックします。

カラムブロックを追加

一番左端の「2カラム」をクリックします。

2カラムを選択

左カラムの「+」アイコンをクリックし、「一般ブロック」の中の「画像」をクリックします。

画像を追加

「アップロード」をクリックして使いたい写真を選択します。

画像をアップロード

写真をアップロードしたら、右カラムの「+」アイコンをクリックして「段落」ブロックを追加します。

段落を追加

段落ブロックに会社の説明文を入力してください。

会社説明を入力

以上で会社説明と写真の配置は完了です。

会社概要の表を作る

次は会社概要の表を作っていきます。
まずはこのセクションの見出しを作りましょう。「見出し」ブロックを挿入してください。

見出しを追加

「会社概要」と入力してテキストを中央寄せにします。

見出しを入力して中央寄せ

見出しの下に「フォーマット」の中の「表」ブロックを挿入します。

表を挿入

列数に「2」、行数に「5」と入力して「表を作成」ボタンをクリックします。

表を作成

表が追加されるので左の列に項目のタイトル、右の列に各項目の内容を入力しましょう。

表のタイトルと内容を入力

右サイドバーの「ブロック」タブを開くと「スタイル」という項目があるので、表のスタイルを「ストライプ」に変更しましょう。

表のスタイルを変更

以上で会社概要の表の作成は完了です。

アクセスマップを作成する

最後にGoogleマップを埋め込んでアクセスマップを作成します。
会社概要の見出しと同じ要領で「アクセスマップ」という見出しを作ってください。

見出しを入力

一旦WordPressの管理画面から離れてGoogleマップに移動します。

会社の住所を検索したら、左サイドバーの「共有」アイコンをクリックしてください。

Googleマップを共有

「地図を埋め込む」タブを開いて「HTMLをコピー」をクリックします。埋め込みサイズは「大」にしておいてください。

Googleマップの埋め込みHTMLをコピー

WordPressの固定ページ編集画面に戻り、GoogleマップでコピーしたHTMLをペーストします。
自動的に「カスタムHTML」ブロックに変換されるはずです。

GoogleマップのHTMLをペースト

以上でアクセスマップの作成は完了です。

会社概要の固定ページを公開する

コンテンツの作成が完了したら「公開する」ボタンをクリックして固定ページを公開します。

固定ページを公開する

公開したら「固定ページを表示」をクリックして作成したページを確認しましょう。

固定ページを表示

完成イメージ通りの会社概要ページが出来ていると思います。(画像をクリックすると拡大します)

固定ページを確認

ページ冒頭の会社説明と写真の箇所は、レスポンシブ対応になっているのでスマートフォンで見ると縦一列になります。(画像をクリックすると拡大します)

固定ページのスマートフォン表示を確認

以上で会社概要の固定ページの作成は完了です。

ヘッダーメニューに固定ページを追加する

せっかく固定ページで会社概要などを作っても、そのページに行けなければ意味がありません。
ヘッダーメニューに固定ページを追加して、どのページからでもアクセス出来るようにしましょう。

WordPress管理画面の「外観 > メニュー」に移動します。

外観のメニューを表示

「メニュー名」に「header-menu」と入力して「メニューを作成」ボタンをクリックしてください。

メニューを作成

「メニュー項目を追加」の「固定ページ」を開き、「すべて表示」タブの中からヘッダーメニューに表示したいページにチェックを入れ、「メニューに追加」ボタンをクリックします。

固定ページをメニューに追加

必要があればメニュー構造の固定ページをドラッグ&ドロップして並び替えてください。ここに表示される順番でヘッダーメニューに表示されます。

メニューの順番を入れ替え

「メニュー設定」で表示したいメニューの位置にチェックを入れて「メニューを保存」ボタンをクリックしてください。

メニューの位置を選択

使用するテーマによって表示できる「メニューの位置」は異なります。
BusinessPressはメインナビゲーション、ヘッダーソーシャルリンク、フッターメニュー、フッターソーシャルリンクの4つの位置から選ぶことが出来ます。

これでヘッダーメニューに固定ページを追加することが出来ました。

WordPressの固定ページの使い方まとめ

WordPress5からブロックエディタ(Gutenberg)が導入されたことによって、HTMLの知識が無くても簡単に会社概要などの固定ページを作れるようになりました。
ブロックエディタを使いこなせば少し複雑なトップページも作ることが出来ます。興味がある方は以下の記事も読んでみてください。

WordPressのGutenbergでトップページを作る手順
WordPressの新しいエディタGutenbergは、以前のエディタと比べて直感的に画像を挿入したり、レイアウトを組んだりできるようになりました。 Guten…
ryob.net

ブロックエディタは直感的に固定ページを作れるので、ぜひ会社概要以外のページ作成にも挑戦してみてください。

以上、WordPressの固定ページの使い方の解説でした。