WordPressにドロップダウンメニューを追加する方法–ビギナーズガイド

公開: 2021-12-09

WordPressにドロップダウンメニューを追加することは、サイトのアイテムのリストを表示するための優れた方法です。 それらはあなたのサイトを整理されたように見せ、全体的な外観に技術的なタッチを与え、そしてあなたのウェブサイトをユーザーにとって非常にナビゲートしやすくします。

最良の部分–WordPressでドロップダウンメニューを追加する方法を学ぶのに数分しかかかりません。

ワクワクしませんか?

この短い初心者向けガイドでは、ドロップダウンメニューとは何か、それらがどのように機能するか、およびWebサイトのドロップダウンを作成する方法について説明します。 それを完了するために、あなたはまたあなたのニーズに合うようにドロップダウンメニューを編集する方法を学びます。

それで、それ以上の苦労なしに、学びましょう。

目次

  • WordPressのドロップダウンメニューとは何ですか?
  • WordPressでドロップダウンメニューを使用する必要があるのはなぜですか?
  • WordPressでドロップダウンメニューを追加する方法は?
    • ステップ1:WordPressメニューを作成する
    • ステップ2:作成したメニューにアイテムを追加する
    • ステップ3:サブアイテムを配置してドロップダウンメニューを作成する
    • ステップ4:新しいドロップダウンメニューを公開する
  • WordPressでドロップダウンメニューを編集する方法
    • 1.ドロップダウンメニューのサブアイテムを削除する
    • 2.アイテムの並べ替え
    • 3.ドロップダウンメニューの削除
  • インタラクティブなドロップダウンメニューを作成するためのいくつかの便利なヒント
    • 1.マルチレベルのドロップダウンメニューの作成
    • 2.複数のドロップダウンメニューの作成
    • 3.ライブプレビューでメニューを作成する
    • 4.大きなドロップダウンメガメニューの作成
  • まとめ

WordPressのドロップダウンメニューとは何ですか?

ドロップダウンメニューは基本的に、ナビゲーションメニューへのリンクを追加するメニュー管理システムの一部です。 ナビゲーションメニューに気付いていない場合は、Webサイトのメインページへのリンクです。 これらは通常、以下の例のように、ページの上部にあります。

ナビゲーションメニューの例

ナビゲーションメニューに複数のリンクを追加すると、煩雑で混雑しているように見える場合があるため、ドロップダウンメニューは物事を整理するのに役立ちます。 ナビゲーションメニューに複数のリンクを追加し、ドロップダウンメニューを使用して訪問者に提供しているものを表示できます。 次の例のように、訪問者がプライマリメニューにカーソルを合わせると、メニューリンクが表示されます。

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

ご覧のとおり、ドロップダウンメニューを追加すると、限られたスペースの問題を保存し、WordPressWebサイトを整理された外観にすることができます。

WordPressでドロップダウンメニューを使用する必要があるのはなぜですか?

まったく新しいWordPressサイトがあり、新しいブログを始めたばかりの場合は、Webページがあまりない可能性があります。 しかし、サイトが成長するにつれて、複数のコンテンツや製品を追加し始めます。 次に、ブラウジングエクスペリエンスを向上させるために、Webサイトにメニューを追加する必要があります。

しかし、あまりにも多くのメニューが並んでいると、面倒でやや専門的ではないように見えます。 また、それらを含めることも見逃せません。 これは、ドロップダウンメニューが必要な場所です。

ドロップダウンメニューは、ナビゲーションメニューを乱雑にすることなくアイテムを追加するのに役立ちます。 限られたスペースを有効活用できます。

WordPressでドロップダウンメニューを使用する主な理由は次のとおりです。

  • ナビゲーションメニューでアイテムを整理できます。
  • スペースを有効活用できます。
  • ドロップダウンメニューを使用すると、サイトがより詳細でプロフェッショナルに見えます。
  • トピックの階層に基づいてメニューを配置できます。
  • それはあなたのウェブサイトを非常にナビゲートしやすくし、ブラウジング体験を向上させます。

WordPressでドロップダウンメニューを追加する方法は?

ドロップダウンメニューの作成と追加は簡単です。 WordPressのあちこちで数回クリックするだけで、ほんの数分でそれを行うことができます。 手順は次のとおりです。

ステップ1:WordPressメニューを作成する

まず、メニューを作成してナビゲーションメニューに追加する必要があります。 これを行う方法は次のとおりです。

  • WordPressダッシュボードにログインします。
  • 「外観」に移動し、 「メニュー」オプションをクリックします。
メニューに移動
  • 上部に「新しいメニューの作成」リンクが表示されます。 クリックして。
WordPressで新しいメニューオプションを作成する
  • 所定のフィールドにメニュー名を入力し、下の「メニューの作成」ボタンをクリックします。
メニュー名を追加して、新しいメニューを作成します

これを行った後、WordPressはあなたのために新しいメニューを作成します。 ただし、空のメニューです。 メニューにアイテムを追加する必要があります。 そのために、2番目のステップに進みましょう。

ステップ2:作成したメニューにアイテムを追加する

新しいメニューを作成したら、アイテムを追加する必要があります。 メニュー項目は、Webサイトのさまざまなページまたはセクションへのリンクにすぎません。 このようなリンクにより、訪問者はサイト内を簡単に移動できます。 メニューに項目を追加する方法は次のとおりです。

  • 左側に、 「メニュー項目の追加」という名前のセクションが表示されます。 そのセクションには、メニューに追加できるページのリストが表示されます。
  • 作成したメニューに追加するページを選択します。
  • その後、下の「メニューに追加」ボタンをクリックしてください。
WordPressのメニューにページを追加する
  • 選択したページが「メニュー構造」セクションに表示されます。
  • メニューに投稿、ランディングページ、カスタムリンク、その他のオプションを追加することもできます。 「ページ」の代わりに、「メニュー項目の追加」セクションからそれぞれのセクションを展開します。 次に、前に行ったようにメニューに追加します。
WordPressのメニューに追加できるさまざまなアイテム
  • 完了したら、下部にある[メニューの保存]ボタンをクリックします。

ステップ3:サブアイテムを配置してドロップダウンメニューを作成する

ページ/投稿/カスタムリンクを「メニュー構造」に追加したら、ドロップダウンにする必要があります。 それ以外の場合、これらのアイテムはすべて、ナビゲーションメニューに通常のアイテムとして表示されます。 親子構造を使用して、ドロップダウンメニューを作成できます。

親アイテムは、サブアイテムをホストするメインの見出しアイテムです。 同様に、子アイテムは、ユーザーが親アイテムにカーソルを合わせると表示されるリンクです。 これがあなたのやり方です:

  • 子アイテムにしたいアイテムをクリックします。
  • 次に、親にしたいアイテムの下にドラッグします。 ただし、子アイテムは必ず少し右にドロップしてください。
WordPressで親アイテムと子アイテムを作成する
  • WordPressは、作成したばかりの子アイテムに「サブアイテム」タグを割り当てます。 それぞれの親アイテムに必要な数のサブアイテムを追加できます。 完了したら、下の[メニューを保存]ボタンをクリックします。

ステップ4:新しいドロップダウンメニューを公開する

「メニュー構造」でドロップダウンメニューを作成しても、Webサイトには表示されません。 これは、メニューを作成しただけで、まだ公開していないためです。 したがって、公開する必要があります。

これがあなたのやり方です:

  • メニューにすべての項目を追加したら、下にスクロールします。 メニュー設定は下部にあります。
  • 表示場所」が表示されたら、「プライマリメニュー」をクリックします。
  • 下の[変更を保存]ボタンをクリックしてください。
  • ドロップダウンメニューがサイトに表示されます。
新しいドロップダウンメニューの公開

WordPressでドロップダウンメニューを編集する方法

WordPressでドロップダウンメニューを追加する方法を学びました。 時間の経過とともに、変更が必要になる場合があります。 作成したメニューを編集する方法は次のとおりです。

1.ドロップダウンメニューのサブアイテムを削除する

ドロップダウンメニューからアイテムを削除するには、次の手順に従います。

  • WordPressの[外観]> [メニュー]に移動します
  • 「メニューの編集」タブが表示されていることを確認してください。
  • 「メニュー構造」で、削除したい項目の横にあるドロップダウン矢印をクリックします。
  • 「削除」リンクをクリックします。
  • 変更を保存します。

2.アイテムの並べ替え

メニュー項目の順序を並べ替える必要がある場合は、次の手順に従ってください。

  • まず、アイテムをドラッグして、メニューエディタから目的の場所に配置します。
  • アイテムをドロップするだけです。 満足したら、変更を保存します。
メニューをドラッグアンドドロップして並べ替えます

3.ドロップダウンメニューの削除

メニュー全体を削除したい場合:

  • WordPressから削除したいメニューを選択します。
  • 下部に「メニューの削除」オプションが表示されます。 クリックして。
メニューを削除する

そのような単純な!

インタラクティブなドロップダウンメニューを作成するためのいくつかの便利なヒント

ナビゲーションメニューは、サイトにあるユーザーフレンドリーな機能です。 ユーザーは時間を無駄にすることなく、探しているものを簡単に見つけることができます。 したがって、サイトでナビゲーションメニューを正しく使用すると、読者がサイト内を移動するのに役立ちます。

Webサイト用のインタラクティブで構造化されたドロップダウンメニューを作成するためのヒントを次に示します。

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

別のサブアイテムの下にアイテムを追加して、マルチレベルのドロップダウンメニューを作成することもできます。 このようなメニューは、eコマースWebサイトや多くのページがあるWebサイトでよく見られます。

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

2.複数のドロップダウンメニューの作成

メインメニューバーに複数のドロップダウンメニューを作成して、サイトのさまざまなページをリンクできます。

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

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

多くのWordPressテーマには、テーマをカスタマイズしながらライブプレビューを提供するカスタマイザーが用意されています。 ライブプレビューを使用してサイトメニューを作成すると、フロントエンドでどのように表示されるかを鮮明に把握できます。

  • WordPressダッシュボードの[外観]> [カスタマイズ]オプションに移動して、カスタマイザーにアクセスします。
設定をカスタマイズする
  • カスタマイザーに[メニュー]オプションが表示されます。 このオプションの場所は、使用するテーマによって異なる場合があります。
カスタマイザーのメニューオプション
  • ここには、新しいメニューを作成するか、メニューをドラッグしてプライマリ、セカンダリ、またはターシャリにするオプションがあります。 メニュー項目の追加、削除、および注文は、上記の手順で説明したものと同じです。

4.大きなドロップダウンメガメニューの作成

一般的なドロップダウンメニューには、限られたサブメニューしか表示されません。 ただし、ユーザーがメインメニューにカーソルを合わせると、サイトの完全な構造を表示することもできます。 手順は次のとおりです。

  • まず、wordpress.orgからMegaMenuプラグインの1つをダウンロードしてインストールする必要があります。 次に、プラグインをアクティブにします。
  • プラグインの設定オプションに移動し、必要な変更を加えます。

まとめ

ご覧のとおり、WordPressにドロップダウンメニューを追加するには、数回クリックするだけで数分かかります。 ただし、追加できるメニューの数と場所は、テーマごとに異なる場合があります。 したがって、人気のあるテーマを選択するだけでなく、サイトに適したものを選択するようにしてください。

それでも、ドロップダウンメニューを追加することは、ユーザーのブラウジングエクスペリエンスを向上させるための優れた方法です。 彼らはあなたのサイトをよく整理されたように見せ、あなたのウェブサイトの周りのナビゲーションを容易にします。

この初心者向けガイドがお役に立てば幸いです。 以下のコメントセクションにフィードバックを書き込んでください。

WordPressにウィジェットを追加する方法を確認することもできます。