『しろくまフリーランス』は、現役フリーランス運営の「個人を豊かにする情報発信メディア」です。

ワードプレスブログのトップページにメニューを表示する方法【初心者向け】

ワードプレスブログのトップページにメニューを表示する方法【初心者向け】

この記事が解決するお悩み

WordPress(ワードプレス)で構築したブログにトップメニューを作りたい。

この記事では、ワードプレスでトップメニューをつくる方法を図解していく。

MEMO
WordPress(ワードプレス)では、全てのページに常に表示しているメニューを「グローバルメニュー」と呼ぶが、本記事は初心者の皆さまが理解しやすいよう、「トップメニュー」と表記する。
STEP.1
メニューに表示するページを作成しよう
トップメニューとして表示するためのページを作成する。
STEP.2
メニューを作成しよう
続いて、トップメニューをつくる。この段階ではまだメニューは空っぽのままだ。
STEP.3
作成したページをメニューに設定しよう
最初に作成したページをトップメニューに設定する。

STEP1. メニューに表示するページを作成しよう

まずはメニューに表示するためのページをつくる。
好きなページをのせられるが、参考としてこの記事ではお問い合わせページをメニューにのせていく。

お問い合わせページをつくるやり方は以下記事で図解しているので、この記事ではスキップさせていただく。

WordPressブログにお問い合わせフォームを作るやり方【Contact Form 7】

STEP2. メニューを作成しよう

では、トップページに記載するメニューを作成する。

メニューの設定画面をひらく

ワードプレス管理画面から[外観][メニュー]をクリックしよう。

ワードプレスでトップページにメニューを設定する方法

メニューを作成する

メニューの名前を入力して[メニューを作成]をクリックすれば、メニューが作成される。

ワードプレスでトップページにメニューを設定する方法

ただし、いま作成したのはあくまでメニューの入れ物。中身は空っぽなので、メニューに表示するページを設定しなければならない。

STEP3. 作成したページをメニューに設定しよう

表示したいページを選択する

「メニュー」ページの左側に「固定ページ」の一覧が表示されている。メニューに表示したいページを✔︎して、[メニューに追加]をクリックしよう。

ワードプレスでトップページにメニューを設定する方法

ページ名を変更する

このままでは、メニューに”お問い合わせページ”と表示される。しかしこれでは長すぎてスマホユーザーにとって利便性が低いので、メニューに表示するページ名を変更する。

ページ名(ここでは”お問い合わせページ”)をクリックして、ナビゲーションラベルと書かれた部分を変更するだけでいい。

ワードプレスでトップページにメニューを設定する方法

表示するメニューを選択する

最後に、どのメニューに表示するのか決定する。

「メニュー設定」の下にある、

  • ヘッダーメニュー(PCでのみ表示)
  • スライドメニュー(モバイルのみ)

を選択して、[メニューを保存]をクリックしよう。

ワードプレスでトップページにメニューを設定する方法

メニュー設定はテーマによって変わる
最後に設定したメニュー設定は、使っているワードプレステーマによって変わる可能性がある。このブログでは『SANGO(サンゴ)』というテーマを利用している。

トップページを見て確認してみよう

実際にこのブログのトップページを開いてみて、メニューがきちんと表示されているか確認しよう。
作成した直後では以下のように表示されていた。

ワードプレスでトップページにメニューを設定する方法

error: