WordPressでナビゲーションメニューを追加する方法(初級編)

11月 20, 2021
admin

WordPressサイトにナビゲーションメニューを追加したいと思いませんか?

WordPress には、ヘッダー メニューやドロップダウンメニューなどを作成するために使用できる、ドラッグ アンド ドロップ式のメニュー インターフェイスが備わっています。

このステップ バイ ステップ ガイドでは、WordPress でナビゲーション メニューを簡単に追加する方法を説明します。 通常、Web サイトの各ページの上部にリンクの水平バーとして表示されます。

ナビゲーション メニューは、サイトに構造を与え、訪問者が探しているものを見つけやすくします。 以下は、WPBeginner:

WordPress では、メニューやサブメニューをとても簡単に追加することができます。 最も重要なページ、カテゴリやトピック、ブログの投稿、さらにはソーシャルメディアのプロフィールなどのカスタム リンクへのリンクを追加できます。

メニューの正確な位置は、使用している WordPress テーマに依存します。 たとえば、ほとんどの WordPress テーマには、上部に表示される主要なメニューが付属しています。 テーマによっては、セカンダリ メニュー、フッター メニュー、またはモバイル ナビゲーション メニューも含まれている場合があります。

Video Tutorial

Subscribe to WPBeginner

If you’d like written instructions, just keep reading.

Creating Your First Custom Navigation Menu

ナビゲーション メニューを作成するには、WordPress 管理画面の外観 ” メニュー ページにアクセスする必要があります。

まず、「トップ ナビゲーション メニュー」のようなメニューの名前を指定し、「メニューを作成する」ボタンをクリックする必要があります。 これにより、メニュー領域が展開され、次のように表示されます。

次に、メニューに追加するページを選択できます。 すべての新しいトップレベル ページを自動的に追加するか、左の列から特定のページを選択することができます。

最初に、[すべてを表示] タブをクリックして、サイトのすべてのページを表示します。 その後、メニューに追加したい各ページの横にあるボックスをクリックし、[メニューに追加] ボタンをクリックします。

ページが追加されたら、ドラッグ アンド ドロップでページを移動することができます。

注意: すべてのメニューは、メニュー エディタの垂直 (上から下) リストに項目が表示されます。 あなたのサイトにメニューをライブで配置すると、選択した場所に応じて、垂直または水平 (左から右へ) に表示されます。 この例では、デフォルトの 2020 テーマを使用しており、5 つの異なる場所があります。

メニューにページを追加したら、メニューを表示する場所を選択し、[メニューを保存] ボタンをクリックします。

Tip: それぞれの場所がわからない場合、メニューを別の場所に保存してから、サイトにアクセスしてその様子を確認してみてください。 すべての場所を使用することはないでしょうが、複数の場所を使用したいかもしれません。

以下に、サイト上の完成したメニューを示します。 親項目にカーソルを合わせると、その下にすべての子項目がサブメニューとして表示されます。

サブメニューを作成するには、親項目の下に項目をドラッグし、それを少し右側にドラッグしてください。 私たちは、メニューの「サービス」の下に 3 つのサブアイテムを作成しました:

ここで、サイト上にサブメニューを表示します:

サブメニューに複数のドロップダウン層を追加することも可能です。 この例では、「ロゴ デザイン」(「サービス」の子項目)がそれ自身の 2 つの子項目を持つことがわかります。

Adding Categories to WordPress Menus

ブログを運営するのに WordPress を使用している場合、WordPress メニューにドロップダウンとしてブログ カテゴリーを追加したい場合があります。 WPBeginnerではこの方法をとっています:

メニュー画面の左側にある「カテゴリー」タブをクリックすると、簡単にカテゴリーをメニューに追加することができます。

メニューに追加したいカテゴリを選択し、[メニューに追加] ボタンをクリックします。

カテゴリは、メニューの下部に通常のメニュー項目として表示されます。 ドラッグ アンド ドロップで所定の位置に配置することができます。 ここでは、これらのカテゴリをすべて [ブログ] メニュー項目の下に配置します。

ホームページとは別に、サイトにブログ ページを用意したいですか。 その場合は、WordPress でブログ投稿用の独立したページを作成する方法についてのチュートリアルをご覧ください。

Adding Custom Links to Your WordPress Navigation Menus

カテゴリやページ以外にも、WordPress では、メニューにカスタム リンクを追加することも超簡単です。 ソーシャルメディアのプロフィール、オンライン ストア、または所有している他の Web サイトへのリンクに使用できます。

メニュー画面の「カスタム リンク」タブを使用する必要があります。 メニューで使用したいテキストと一緒にリンクを追加するだけです。

メニューにソーシャルメディアのアイコンを追加することもできます。

ワードプレスのナビゲーションメニューでメニュー項目を編集または削除する

ページやカテゴリーをカスタム ナビゲーション メニューに追加すると、WordPress ではページ タイトルまたはカテゴリー名をリンク テキストとして使用しています。 必要に応じてこれを変更できます。

どのメニュー項目も、その横にある下向きの矢印をクリックすることで編集できます。

ここでメニュー項目の名前を変更できます。 また、ここで [削除] をクリックして、メニューからリンクを完全に削除することもできます。

ドラッグ アンド ドロップ インターフェイスで苦労している場合は、適切な [移動] リンクをクリックして、メニュー項目を移動させることもできます。 サイドバーやフッターなど、ウィジェットを使用する任意の領域にナビゲーションメニューを追加できます。

単に外観 ” ウィジェット に移動して、「ナビゲーションメニュー」ウィジェットをサイドバーに追加します。 次に、ウィジェットのタイトルを追加し、「メニューの選択」ドロップダウンリストから正しいメニューを選択します。

Syed Balkhi 氏の Web サイトで作成した WordPress のカスタム フッター メニューの例です。

Going Further with Navigation Menus

If you want to create a really epic menu with loads of links, we’re a tutorial on how to create a mega menu in WordPress. これは、画像を含む多くの項目を持つドロップダウンを作成することができます。

メガ メニューは、オンライン ストアやニュース サイトなど、大規模なサイトを持っている場合に最適なオプションです。 このタイプのメニューは、ロイター、バズフィード、スターバックスなどのサイトで使用されています。

FAQs About WordPress Menus

ここでは、初心者から WordPress のナビゲーション メニューについてよく聞かれる質問をいくつか紹介します。 WordPress メニューにホームページ リンクを追加するには?

ナビゲーション メニューにホームページを追加するには、ページの下の「すべて表示」タブをクリックする必要があります。 そこから、あなたのホームページが表示されるはずです。

「ホーム」の隣のボックスをチェックし、「メニューに追加」をクリックします。

2. WordPress で複数のナビゲーションメニューを追加する方法

WordPress では、好きなだけメニューを作成することができます。

WordPress サイトに複数のナビゲーション メニューを追加するには、まず、上記のチュートリアルにしたがってメニューを作成し、

サイトにそれらを配置するには、[場所の管理] タブをクリックします。

ここから、あなたのテーマで利用できるメニューの場所に表示したいメニューを選択できます。

あなたのサイトに新しいメニューの場所を追加したい場合は、WordPress テーマにカスタム ナビゲーション メニューを追加する方法についてのチュートリアルをご覧ください。 また、WordPress でナビゲーション メニューをスタイルする方法と、WordPress でスティッキー フローティング ナビゲーション メニューを作成する方法についてのガイドもご覧ください。

この記事が気に入ったなら、WordPress ビデオ チュートリアルの YouTube チャンネルに登録してください。 また、Twitter や Facebook でも私たちを見つけることができます。

コメントを残す

メールアドレスが公開されることはありません。