Articles

WordPressでドロップダウンメニューを作成する方法(5つのステップで)

サイトナビゲーションは、ユーザーが行きたい場所を得るのを助けるため うまく設計されたメニューは、ユーザーエクスペリエンス(UX)の向上、さらには直帰率の低下に向けて長い道のりを行くことができます。 しかし、不完全に細工されたものは、ちょうど反対を行うことができます。

幸いなことに、WordPressはあなたのサイトのニーズに合わせてカスタムメニューを作成することができます。 あなたも、まだあなたの訪問者のための明確な方向性を提供しながら、スペースを節約するコンパクトなWordPressのドロップダウンメニューを追加す

この記事では、ウェブサイトのナビゲーションが重要である理由と、ドロップダウンメニューが特に有用である方法について説明します。 次に、WordPressでそれらを作成する方法を説明し、役立つプラグインをいくつか共有します。

でダイビングしてみましょう!

WordPressのナビゲーションとドロップダウンメニューの紹介

彼らは控えめかもしれませんが、ナビゲーションメニューは、任意のウェブサイトの重 彼らはまた、初めての訪問者にあなたが提供しなければならないもののアイデアを与えながら、ユーザーが自分の目標を達成するための最も関連性の:

メニュー例

Kinstaウェブサイトプライマリナビゲーションメニュー

うまく設計されたナビゲーションメニューを持つことは、コンバージョンを高め、直帰率を低下させるための鍵です。 ユーザーが製品、電子メールサインアップフォーム、またはその他の変換コンテンツが配置されているページを簡単に見つけることができれば、購入やサインア

さらに、ユーザーがサイト全体で自信を持って自分の道を見つけることができれば、間違った場所に終わったためにページを跳ね返る必要はありません。 彼らが最初にそれを正しく得るのを助けることは、UXを改善し、欲求不満を最小限に抑えることができます。

WordPressでは、メニューは固有の機能です。 プラットフォームで作成されたサイトには、そのうちの1つまたは複数を表示できます。 それはあなたのメニューやメニューをスタイリングし、配置することになると、WordPressのテーマはまた、重要な役割を果たしています。

この理由のために、あなたのWordPressのメニューは、多くの異なる形を取ることができます。 最もよく知られているのは、標準のヘッダーメニューです:

ヘッダーメニューの例

典型的なヘッダーメニューの例

ページの下部に追加のフッターメニューを含めることもできます。 メインメニューと同じ内容を表示したり、少し異なるオプションを提供したりすることができます。

フッターメニューの例

フッターメニ:

オーバーレイメニューの例

オーバーレイメニューの例

または、サイドバーメニューの使用を検討することもできます。

サイドバーメニューの例

サイドバーメニューの例

サイドバーメニューの例サイドバーメニューの例サイドバーメニューの例div>サイドバーメニューの例

または、”ネストされた”メニューとも呼ばれるドロップダウンメニューを組み込むことができます。

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

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

このタイプのナビゲーションは、多くのタイプのサイトに理想的です。 これは、オーバーレイメニューのようなあなたのコンテンツを不明瞭にしませんが、大きなヘッダーバーやサイドバーのメニューのように侵入ではありません。

必要になるまでコンテンツを隠すことで、画面スペースを節約しながら、ユーザーに簡単な回避方法を提供します。

WordPressでドロップダウンメニューを作成する方法(5つの手順で)

ドロップダウンメニューがWordPressサイトに適していると判断した場合、設定は非常に簡単です。 WordPressで利用可能なネイティブメニュー機能を使用することで、わずか5ステップでニーズに合ったカスタムナビゲーションシステムを作成できます。

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

メニューを作成するための最初のステップは、メニューに何を含めるかを決定することです。 WordPressダッシュボードの外観>メニューに移動することから始めます。

WordPressメニュー

WordPressダッシュボードのメニューエディタにアクセスする

メニューエディタに表示される内容は、テーマによって若干異なります。

しかし、今のところ注意すべき重要なのは、編集メニュータブの最初のオプションです。 編集する既存のメニューのいずれかを選択できるオプションと、新しいメニューを作成するオプションが表示されます。

WordPressメニューエデ新メニュー。 これは、タイトルを追加し、作成メニューボタンをクリックすることを含みます:

名前付けと新しいメニューの作成

名前付けと新しいメニューの作成

今、あなたはあなたのWordPressのメニューに項目 ほとんどの場合、メニューをできるだけシンプルにしながら、ユーザーが行きたい場所を取得するのに十分な情報をユーザーに提供することをお勧めします。

あまりにも多くのページを組み込むことは訪問者を圧倒し、運行をより容易の代りにより堅くさせることができる。メニュー項目を追加するには、いくつかの方法があります。

メニュー項目を追加するには、いくつかの方法があります。 最初の二つはページと投稿であり、彼らは非常に同様に動作します。

メニューにページを追加する

メニューにページを追加する

メニューエディタのサイドバーで、含める各ページまたは投稿のチェッ これには、ユーザーを誘導するページのURLを指定し、短くてわかりやすいラベルを作成することが含まれます。 その後、再びメニューに追加をクリックすることができます:

メニューにカスタムリンクを追加する

メニューにカスタムリンクを追加する

最後に、ナビゲーションメニューにページ これにより、ユーザーはアーカイブページに移動し、特定のトピックのすべてのコンテンツを表示できます。

ブログやその他のコンテンツが重いサイトでは、この機能が特に便利な場合があります:

メニューにカテゴリを追加

メニューにカテゴリを追加

ページと投稿オプションと同様に、含めるカテゴリのチェッ

ステップ2:WordPressメニューを整理する

すべてのメニュー項目を追加したら、エディタのメニュー構造の下の個々のタイルにリストされているはず:

メニューエディタのメニュー構造セクション

メニューエディタのメニュー構造セクション

最初は、メニュー項目は追加した順 ただし、ドラッグして所定の位置にドロップすることで、組織を簡単に変更できます。 これにより、ドロップダウン機能のないシンプルなメニューを作成できます。WordPressメニューにドロップダウンを追加するには、いくつかの方法があります。

最も簡単なのは、ドラッグアンドドロップを続けることですが、他のメニュー項目の下に特定のメニュー項目をネストし始めることです。

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

ブログページの下にカテゴリをネストする

例えば、上の画像では、ブログの下のメニューに追加した三つのポストカテゴリを移動し、”サブアイテム”にしました”と述べている。 フロントエンドでは、次のようなドロップダウンメニューが作成されます:

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

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

サイト上のすべてのカテゴリを含むドロップダウンメニューを追加したい場合は、メニューにカスタムリンクを追加することで追加できます。 URLとして”#”を使用し、ラベルに”Categories”などを使用します。

メニューのカテゴリラベルを作成する

メニューのカテゴリラベルを作成する

すべてのカテゴリをメニューに追加し、このラベルの下にネストすることができます。 各カテゴリはクリック可能になりますが、ラベルは次のようになりません。

カテゴリドロップダウンメニュー

カテゴリドロップダウンメニュー

同様の手法を使用して、単一のドロップダウンメニューですべてのメニュー項目を非表示にすることもできます。URLとして”#”を使用し、ラベルとして”Menu”を使用して、別のカスタムリンクを追加します。 次に、その下に他のすべてのメニュー項目をネストします:

単一のメニューラベルの下にすべてのナビゲーションリンクをネスト

単一のメニューラベルの下にすべてのナビゲー

以下のカテゴリ項目でわかるように、サブ項目の下にネストされたコンテンツは、サブメニューに表示されます:

真のWordPressのドロップダウンナビゲーションメニュー

真のWordPressのドロップダウンナビゲーションメニュー

このようにドラッグアンドドロップメニューエディタを使用することにより、あなたはWordPressのドロップダウンメニューの任意のスタイルと組み合わせを作成することができます。 ただし、メニュー項目が多すぎると、ユーザーが混乱する可能性があることに注意してくださ

ニュースレターにサインアップ

WordPressでトラフィックを1,187%増加させました。 私たちはどのようにお見せします。

インサイダー WordPressのヒントと私たちの毎週のニュースレターを取得する20,000+他の人に参加!

今すぐ購読

ナビゲーションが乱雑になるのを避けるために、組み込むサブメニューの数を制限することも最善です。

ステップ3:WordPressメニューに画像を組み込む

ステップ2の終わりまでに、あなたのドロップダウンメニューは、あなたがそれを想像したように ただし、カスタマイズでメニューを強化する場合は、追加の手順を実行することができます。

考慮すべき一つの戦術は、訪問者のためのさらなるガイダンスを提供するために、あなたのメニューに視覚的な要素を組み込 説明的なラベルは重要ですが、画像やアイコンを使用すると、特定のナビゲーションリンクがどこにつながるかをユーザーがより迅速に判断できます。

カスタムCSSを使用して画像を追加することは可能です。 ただし、メニュー画像、アイコンなどのプラグインを簡単に拾うことをお勧めします:

ナビゲーションリンクの横に画像を持つWordPressのドロップダウンメニュー

画像を持つWordPressのドロップダウンメニュー

このように、あなたのドロップダウンメニューに視覚的な関心を追加するために、任意のコードを悩ませることを心配する必要はありません。

単にプラグインをインストールし、外観に戻ります>メニュー:

メニューエディタのメニューイメージセクション

メニューエディタのメニューイメージセクション

メニューに含めた各ページ あなたは、各ページの写真、サイズ、および位置を選択することができます。 完了したら、変更を保存することを忘れないでください。

ステップ4:ドロップダウンメニューにカスタムCSSを追加

初心者にはお勧めできませんが、中級者や上級者のユーザーはWordPressのドロップダウンメニューに独自のスタイリングを組み込むことができます。 ただし、CSSにジャンプする前に、メニューにクラスを追加する必要があります。

この手順を省略すると、カスタムCSSがサイト上の他のメニューに問題を引き起こす可能性があります。 たとえば、誤ってあなたのメインドロップダウンメニューのためだけに意味するあなたのフッターメニューにスタイ

メニューエディタで、右上隅の画面オプションをクリックします。

メニューエディタの画面オプションタブ

メニ:

画面オプションタブのCSS Classesチェックボックス

画面オプションタブのCSS Classesチェックボックス

これは、メニューの各ページにCSS Classesフィールドを追加します。

メニューエディタのcss classesフィールド

一つ以上のcssクラスをメニュー項目に追加すると、スタイルシートに含

あなたのWordPressサイトの遅いホストにうんざりしていますか? 私たちは、wordpressの専門家から燃える高速サーバーと24/7世界クラスのサポートを提供します。 私たちの計画をチェックしてください

あなたは今、あなたのスタイルシートやカスタマイザーに向かうことができ、あなたのカスタムスタイ

ステップ5:Prime Locationsでメニューを公開

WordPressのドロップダウンメニューがニーズを満たすように構成され、必要なカスタマイズが組み込まれたら、サイトに公開する準備が整いました。

このプロセスは、あなたのテーマとそれがサポートするメニューの場所によって若干異なります。 この例では、Twenty Twentyテーマを使用します。

メニューエディタで、メニュー設定セクションまでスクロールします。

エディタのメニュー設定セクション

エディタのメニュー設定セクション

新しいページを自動的にメニューに追加したい場合は、最初のチェックボックスを選択することができます。 あなたのサイトを始めたばかりで、まだすべてのキーページを追加していない場合は、これが便利かもしれません。 ただし、誤ってメニューにあまりにも多くの項目を追加しないように注意してください。

このオプションの下には、メニューを表示できるサイトのさまざまな領域を示すチェックボックスのリストが表示されます。

Twenty Twentyテーマは、異なるメニュー領域が含まれています:デスクトップ水平メニュー、デスクトップ拡張メニュー、モバイルメニュー、フッターメニ

この場合、作成したメニューは、サイトのヘッダーにあるデスクトップ水平メニューの場所に最も適しています。

Twenty Twentyテーマのデスクトップ水平メニュー

Twenty Twentyテーマのデスクトップ水平メニュー

ダッシュボードのメニュー領域の場所の管理タブに移動することも検討できます。 ここでは、テーマでサポートされているすべてのメニューの場所と、それぞれに割り当てたメニューを確認できます:

場所の管理タブ

場所の管理タブ

メニューを配置するとき、フロントエンドでどのように見えるかを確認すると役に立

ライブプレビューで管理オプション

ライブプレビューで管理オプション

ライブプレビューで管理ボタ:

カスタマイザーのWordPressメニューのライブプレビュー

カスタマイザーのWordPressメニューのライブプレビュー

その後、カスタマイザーから直接メニューまたはメニューを公開することができます。 ドロップダウンメニューから項目を追加または削除する必要がある場合は、単にメニューエディタに戻り、必要な調整を行うことができます。

あなたのドロップダウンメニューを強化するためのWordPressのプラグイン

あなたは余分なツールなしで完全に機能するWordPressのナビゲーションメニ それはあなたのサイトの場合の場合は、いくつかの人気のあるWordPressのメニュープラグインに見てすることができます。

ネストされたページは、コンテンツの重いブログがドロップダウンメニューを作成するための効率的な方法です。 主に投稿やページを整理するために使用されますが、このプラグインはコンテンツの構造を反映するメニューも自動的に生成します:

ネストされたページ

ネストされたページワードプレスプラグイン

メニューに多数のアイテムを組み込むことは必ずしもお勧めではありませんが、時には避けられないこともあります。それがあなたのサイトの場合、Max Mega Menuはあなたが既存のWordPressメニューを組み合わせて一つの”mega menu”を形成するのに役立ちます。

:

max mega menu

Max Mega Menu WordPressプラグイン

モバイルブラウジングが増加しているため、メニューがモバイルデバイスで読み取

WPモバイルメニューは、外出先であるあなたのサイトのユーザーのためのナビゲーションシステムを作成するのに役立つ任意の応答テーマとペア:

wpモバイルメニュー

WPモバイルメニューワードプレスプラグイン

最後に、我々はすでに議論したように、説明的なメニュー項目が十分ではない状況があるかもしれません。 このような状況では、上記の手順3で説明したように、メニューイメージを使用してアイコンを簡単に使用することを検討することができます。

これらのプラグインのいずれかを使用して、現在のナビゲーションシステムを強化し、WordPressのドロップダウンメニューをより効果的にするこ ナビゲーションに関しては、単純な方が良いことがあることを覚えておいてください。 それはあなたのUXを向上させ、あなたのサイトを乱雑に回避する場合にのみ、余分な機能を追加します。

WordPressのドロップダウンメニューのトラブルシューティング

上記のようにメニューを設定したが、ドロップダウン機能が機能していない場合、いくつかの考えられる原因があります。ここではすべてをカバーすることはできませんが、適切な解決策を見つけることができるように、問題の原因を絞り込むのに役立ちます。

多くの場合、誤動作しているメニューは、カスタムメニューとテーマの間で競合するコードの結果です。 あなたのメニューが動作していない場合は、最初にすべきことは、Twenty Twentyなどのデフォルトのテーマに切り替えることです。 メニューが再び機能し始めると、問題がテーマに関連していることがわかります。 その後、あなたのテーマの開発者に連絡して解決策を探すことができます。

他のいくつかの考えられる原因は次のとおりです。

  • 誤ったコード:追加したカスタムCSSが正しいこと、および手順4で説明したようにCSSクラスを使用していることを再確認してください。
  • プラグインの非互換性:インストールしたメニュー関連のプラグインを無効にして、問題が解決するかどうかを確認してください。
  • 古いjQuery:jQueryの最新バージョンにアップグレードし、ドロップダウンメニューを再度開いてみてください。しかし、前述したように、障害のあるメニューの背後にある潜在的な原因は数多くあります。 上記の解決策がどれもうまくいかないように見える場合は、WordPressサポートフォーラムにアクセスするか、専門家のKinsta WordPressサポートチームに連絡するか、WordPress開発者を雇ナビゲーションメニューは、サイトのUXの鍵です。 しかし、あなたが機能する必要があるメニュー項目がたくさんある場合はどうなりますか? このゲームの名前は、ここにあります! このガイドで作成するのがいかに簡単かをチェックしてください►click to Tweet

    summary

    小さな問題のように見えるかもしれませんが、wordpressサイトのナビゲー ドロップダウンメニューを使用すると、ユーザーの画面上のスペースを節約することができます,また、簡単にあなたのサイトの周りに自分の道を作り、ああなたはこのチュートリアルを楽しんだ場合は、私たちのサポートを好きになる。

    すべてのKinstaのホスティングプランには、ベテランのWordPress開発者やエンジニアからの24/7 私たちのフォーチュン500クライアントをバックアップし、同じチームとチャット。 私たちの計画をチェックしてください