WordPressでドロップダウンメニューを作成する方法(初心者向けガイド)

ドロップダウンメニューを作成してWordPress Webサイトに追加しますか??


ドロップダウンメニューには、メニューの項目の上にマウスを置くとリンクのリストが表示されます.

WPBeginnerのドロップダウンメニューを使用します。先に進み、上部のナビゲーションメニューの上にマウスを置きます。.

この初心者向けガイドでは、WordPressでドロップダウンメニューを簡単に作成する方法を手順を追って説明します.

WordPressでドロップダウンメニューを作成する

WordPressでドロップダウンメニューを使用する理由?

WordPressには、WordPressサイトにナビゲーションメニューを簡単に追加できる組み込みのメニュー管理システムが付属しています.

ナビゲーションメニューは、通常はウェブサイトのメインページへのリンクであり、通常はウェブサイトのロゴのすぐ横の横の列として上部に表示されます。.

横一列のリンクを持つ典型的なナビゲーションメニュー

ブログを始めたり、数ページのみのウェブサイトを作成したりする場合は、それらを1行に追加できます。.

ただし、オンラインストアや大きなウェブサイトを運営している場合は、ナビゲーションメニューにさらにリンクを追加することをお勧めします.

ドロップダウンメニューは、ユーザーが親アイテムにマウスを合わせたときにのみメニューリンクを表示することにより、スペースの制限の問題を解決するのに役立ちます。また、トピックや階層ごとにメニュー構造を整理することもできます.

ドロップダウンメニューの例

最後に、彼らもとても素敵に見えます.

それでは、WordPressのドロップダウンメニューを簡単に作成してWebサイトに追加する方法を見てみましょう。.

ビデオチュートリアル

WPBeginnerを購読

ビデオが気に入らない、またはさらに説明が必要な場合は、読み続けてください.

ステップ1.ドロップダウンメニューをサポートするテーマを選択する

WordPressにはメニュー管理システムが組み込まれていますが、これらのメニューの表示はWordPressテーマに完全に依存しています.

ほとんどすべてのWordPressテーマは、デフォルトでドロップダウンメニューをサポートしています。ただし、一部のテーマには適切なメニューサポートがない場合があります.

ドロップダウンメニューをサポートするWordPressテーマを使用していることを確認する必要があります.

使用しているテーマがドロップダウンメニューをサポートしているかどうかを知る方法?

テーマのウェブサイトにアクセスするだけで、テーマのデモへのリンクを見つけることができます。そこから、デモのナビゲーションメニューにドロップダウンメニューが表示されているかどうかを確認できます.

そうでない場合は、WordPressテーマを見つける必要があります。.

ウェブサイトに最適なWordPressテーマを選択する方法に関するガイドをご覧ください.

すぐに使えるドロップダウンメニューをサポートする優れたテーマをいくつか紹介します.

  • アストラ–それはいくつかのスターターサイトとたくさんの機能が付属している多目的WordPressテーマです.
  • StudioPressテーマ–ジェネシステーマフレームワークの上に構築されたこれらのプロフェッショナルテーマは、パフォーマンスのために高度に最適化されています.
  • OceanWP –あらゆる種類のWebサイトに適した人気のあるWordPressテーマ.
  • Ultra – ThemifyビルダーによるこのドラッグアンドドロップWordPressテーマには、美しいテンプレートと柔軟なテーマオプションが付属しています.
  • Divi – Diviページビルダーを使用し、大量のドラッグが付属するエレガントなテーマによる人気のテーマ & ドロップダウンメニューを含むドロップ機能.

そうは言っても、WordPressのドロップダウンメニューを作成する方法を見てみましょう。.

ステップ1. WordPressでナビゲーションメニューを作成する

ウェブサイトにすでにナビゲーションメニューを設定している場合は、次のステップにスキップできます.

最初に簡単なメニューを作成しましょう.

に行く 外観»メニュー ページをクリックし、上部にある[新しいメニューを作成]リンクをクリックします.

メニューを作成する

次に、ナビゲーションメニューの名前を指定する必要があります。この名前はWebサイトに公開されません。メニュー名の目的は、WordPress管理領域内のメニューを識別するのに役立つことです.

メニュー名

メニューの名前を入力し、[メニューを作成]ボタンをクリックします.

WordPressが新しい空のメニューを作成します.

トップリンクをナビゲーションメニューに追加しましょう。これらのアイテムはメニューの一番上の行に表示されます.

追加するページを左側の列から選択し、[メニューに追加]ボタンをクリックするだけです。ブログの投稿、カテゴリを選択したり、カスタムリンクを追加したりすることもできます.

メニューにページを追加

これらのページが新しいメニューの下の右側の列に表示されます。.

ステップ2.メニューにサブアイテムを追加する

サブアイテムは、ドロップダウンメニュー内に表示されるアイテムです。メニューの整理方法に応じて、既存のアイテムの下に追加できます.

このチュートリアルのために、ブログリンクの下にカテゴリを追加します.

追加するアイテムを左側の列から選択し、[メニューに追加]ボタンをクリックするだけです。アイテムが右側の列に表示されます.

メニューに追加された新しいメニュー項目

ただし、これらのリンクは通常のアイテムとして表示されます。それらを親メニューのサブアイテムにする必要があります.

メニュー項目をドラッグアンドドロップして、親項目の下に配置するだけです。少し右に動かすとサブアイテムになります.

サブメニュー項目を追加してドロップダウンメニューを作成する

ドロップダウンメニューの下に表示するすべてのリンクについて、このプロセスを繰り返します。.

完了したら、「保存メニュー」ボタンをクリックして変更を保存することを忘れないでください.

ステップ3.ドロップダウンメニューを公開する

ウェブサイトにすでに公開されているメニューを編集している場合、メニューはすぐにウェブサイトに表示されます.

ただし、新しいメニュー項目の場合、このメニューを表示するにはテーマの場所を選択する必要があります.

WordPressテーマでは、さまざまな場所にメニューを表示できます。各テーマは独自のメニューの場所を定義し、そこに表示するメニューを選択できます.

このオプションは、[メニュー設定]の右側の列にあります。 [表示場所]設定の横にあるオプションを選択し、[保存メニュー]ボタンをクリックします.

テーマの場所を選択

Webサイトにアクセスして、ドロップダウンメニューの動作を確認できます.

ドロップダウンメニューのプレビュー

インタラクティブドロップダウンメニューの作成に関するヒント

ナビゲーションメニューは重要です。これは、ユーザーが特定の情報を見たい場合にユーザーが最初に表示する場所であるためです。.

それらを正しく使用することで、ユーザーはWebサイト内で自分の道を見つけることができます。また、ウェブサイトでのページビュー、コンバージョン、販売を増やすのにも役立ちます.

ドロップダウンメニューを使用してナビゲーションメニューをよりインタラクティブにするためのヒントをいくつか紹介します.

1.複数レベルのドロップダウンメニューを作成できます

リンクを別のリンクのサブアイテムにすると、ドロップダウンメニューに表示されます。別のサブアイテムの下にサブアイテムを追加して、マルチレベルのドロップダウンメニューを作成することもできます.

マルチレベルのメニュー

あなたのテーマは自動的にそれらをドロップダウン内のサブメニューとして表示します.

マルチレベルのドロップダウンメニュー

2.複数のドロップダウンメニューを作成することもできます

メニューのトップリンクの下にドロップダウンを作成できます。メインのナビゲーションメニューに複数のドロップダウンメニューを追加することもできます.

メインメニューの複数のドロップダウンメニュー

3.ライブプレビューでメニューを作成する

メニューが複雑すぎる場合は、ビジュアルプレビューに切り替えることができます。に行く 外観»カスタマイズ ライブテーマカスタマイザを起動する.

そこから[メニュー]タブをクリックし、ナビゲーションメニューを選択します。左側の列にドラッグアンドドロップメニューエディターが表示され、右側のパネルにサイトのライブプレビューが表示されます.

ライブプレビューでWordPressメニューをカスタマイズする

4. WordPressのドロップダウンとして大きなメガメニューを作成する

ドロップダウンメニューには、一度に1つのドロップダウンしか表示されません。ユーザーがメインメニューにカーソルを合わせたときにのみ表示されるメガメニューとしてウェブサイトの完全な構造を表示したい場合?

メガメニュー例

メガメニューはドロップダウンメニューとして表示されますが、より多くのリンク、サブメニューなどを表示できます。詳細な手順については、WordPressでメガメニューを作成する方法についてのチュートリアルをご覧ください。.

この記事が、WordPressでドロップダウンメニューを簡単に作成する方法の学習に役立つことを願っています。 WordPressでスティッキーフローティングナビゲーションメニューを作成する方法や、WordPressのナビゲーションメニューに画像アイコンを追加する方法についてのガイドもご覧ください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map