ワードプレスのメニューバーをサクッと作成!外部リンクも階層も簡単!

こんにちは!
もブログの千明です。

この記事では、ワードプレスのメニューバーを作っていきます。

ワードプレスに限らず、ほぼすべてのサイトには、ぽちっと押すと、お問い合わせに行ったり、作者のページに行ったりする便利な「メニューバー」が設置されてますね。

メニューバーがないと、読者さんが読みたい記事を探すことができず、迷子になりますよね。せっかく書いた記事も埋もれてしまい二度と日の目を見なくなってしまいます。

これでは、読者さんにとっても、運営にとっても、大きい損失になってしまいます。

とても便利なメニューバーをサクッと設置しちゃいましょう。

ワードプレスのメニューバーの設置位置

ワードプレスには、初期設定でメニューバーが2か所設置できるようになっています。

上から、ヘッダー回りに設置する、グローバルナビゲーションメニュー。略してグローバルメニューとか、グローバルナビとか言います。

ページの一番下に設置する、フッターメニュー

どのサイトもメニューバーは大体この2か所になっています。

ヘッダー回りのグローバルメニューがパッと目につくので、メインのメニューバーとなります。

メニューバーには何を入れる?

グローバルメニューの内容

目立つところにあるグローバルメニューには、見てほしい項目を入れていきましょう。

  • お問い合わせページ、プロフィールなどの固定ページ
  • カテゴリーごとの分類ページ
  • リンク指定した特定のページ(外部サイト)

人の目は、サイトを見た時に、左から右、という順番で見るので、左から見せたいものを順に入れていきます。

フッターメニューの内容

フッターメニューには、サイトマップ特定商取引法表示プライバシーポリシー、などを入れることが多いです。これは、目立たせなくてもよいが、見せないといけないものです。

ワードプレス メニューの作り方手順

ワードプレスは簡単に2種類のやり方でメニューを作ることができます。細かい表示などはテーマによって変わります。例はCocoonを使っています。古いテーマだと、2のやり方には対応していないかもしれません。

1.ダッシュボードから作成
2.サイトを見ながら作成

では順にみていきましょう。グローバルメニュー、フッターメニューともやり方は共通です。

1.ダッシュボードから作成

ダッシュボード左の欄、外観からメニューに入ります。

ワードプレス メニューバーの作り方

こちらがメニュー画面です。

メニュー名を入れ、メニューを作成ボタンをクリック。

ワードプレス メニューバーの作り方

大まかな流れとしては、

  1. 入れたい項目に☑
  2. メニューに追加をクリック
  3. メニュー設定で位置を指定
  4. メニューを保存をクリック

となります。

ワードプレス メニューバーの作り方

各項目を見てみましょう。

固定ページや投稿をメニューに入れる方法

固定ページで入れたい項目に☑して、メニューに追加をクリック。

ワードプレス メニューバーの作り方

右側に☑した項目が表示されます。

ワードプレス メニューバーの作り方

一度指定した項目を削除するには、▲マークをクリックすると、下に削除の文字が出ますので、クリック。

ワードプレス メニューバーの作り方

各項目の内容を表示したいときは、▼をクリックすると、内容が表示されます。設定したい投稿に☑し、メニューに追加すると、投稿も指定できます。

ワードプレス メニューバーの作り方

メニューに外部サイトのリンク入れる方法

外部サイトならカスタムリンクを指定します。

URLにリンク先を入れ、リンク文字列には、グローバルメニューに表示したい文字列を入れます。

千明
千明

あああ。http://を削除してませんね。https://からにしないと、いけませんねえ。

ワードプレス メニューにリンクを設定

カテゴリーの入れ方とメニューを階層表示させる方法

カテゴリーはおすすめです。指定したいカテゴリーに☑。

ワードプレス メニューの階層表示

右欄では、順番をドラッグアンドドロップで入れ替えられます。上から左に表示されます。

子カテゴリーなど、階層表示したいときは、右にずらします。

ワードプレス メニューの階層表示

内容が良ければ、メニュー設定で場所を指定。ヘッダー回りには、ヘッダーナビ、サイトの下へは、フッターナビです。

メニューを保存しましょう。

サンプルカテゴリーの下に、さんぷる2カテゴリーが表示されています。↓

ワードプレス メニューの階層表示
ワードプレス メニューバーの作り方

メニューの削除

メニュー全体を削除するには、メニューを削除を押します。そして、メニューを保存をクリック。

入れた項目を削除

ワードプレス メニューバーの作り方

2.サイトを見ながら作成

サイトを見ながら作成することもできます。

サイトを表示させ、上のタスクバー、カスタマイズを押します。

ワードプレス メニューバーの作り方

このようなバーが現れますので、メニューをクリック。

ワードプレス メニューバーの作り方

メニューを新規作成をクリック。

ワードプレス メニューバーの作り方

メニュー名を入れ、表示させたい位置を次へをクリック。

ワードプレス メニューバーの作り方

フッターメニューの場合はこうなります↓。今回はフッターメニューを製作しましょう。

ワードプレス メニューバーの作り方

入れたいものを指定します。項目を追加をクリック。

ワードプレス メニューバーの作り方

あとは、先ほどと似ています。入れたい項目をクリックします。各項目の内容を出したいときは▼をクリックすると、表示されます。

ワードプレス メニューバーの作り方

順番の入れ替えも先ほどと同様です。

良ければ、公開をクリック。

ワードプレス メニューバーの作り方

左に出ているバーを閉じるには、×をクリック。作成したもの(今回はメニュー)を保存したくないときは、公開を押さずに、×をクリックすると、反映されません。

ワードプレス メニューバーの作り方

このように、サイトの一番下に、表示されました。

ワードプレス メニューバーの作り方

メニューのスマホ表示

ちなみに、スマホではこのように表示されます。

ワードプレス メニューバーの作り方

モバイルヘッダーナビを選ぶと、このように表示されます。

ワードプレス メニューバーの作り方

ワードプレスの各種メニューバーの作り方まとめ

使用しているテーマによって多少変化はあると思います。これはCocoonを例に使っています。

グローバルメニュー、フッターナビメニューとも、基本的な作り方は同じで、表示場所が違うだけですね。

固定ページは、メニューやサイドバーからの表示にしないと、自動では表示されませんので、必ずどこかに表示させるようにしてくださいね。

溜まってきた記事は、カテゴリーごとに分類して、グローバルメニューから表示させると読者さんの興味のある内容がまとまって表示されるので、複数記事を読むきっかけにもなります。

ぜひメニューを活用してくださいね。

千明
千明

お疲れさまでした!

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