WordPressで垂直ナビゲーションメニューを作成する方法

WordPressサイトでポジティブなユーザーエクスペリエンスを作成したい場合、適切に設計されたナビゲーションメニューは重要です。

水平メニューは一般的ですが、特に多くのページや複雑な構造を持つウェブサイトの場合、垂直ナビゲーションメニューはサイトのコンテンツを整理するためのユニークで効果的な方法を提供します。

これらのメニューは、ウェブサイトのサイドバーによりよくフィットし、モバイルデバイスでのナビゲーションが容易になるため、アクセシビリティを向上させることができます。

この記事では、WordPressで簡単に縦型ナビゲーションメニューを作成する方法をご紹介します。

ナビゲーションメニューとは？

ナビゲーションメニューとは、WordPressウェブサイトの重要なエリアを指すリンクのリストです。このメニューは通常、各ページの最上部にある横長のリンクバーとして表示されます。

ナビゲーションメニューはサイトに構造を与え、訪問者が探しているものを見つけるのに役立ちます。最も重要なページ、カテゴリ、トピック、WordPressブログ投稿へのリンクを追加したり、ソーシャルメディアプロフィールなどのカスタムリンクを追加したりできます。

ウェブサイトの上部に水平に配置されているのをよく見かけますが、垂直ナビゲーションメニューには多くの用途と利点があります。

縦型ナビゲーションメニューは、ページ上のスペースを少なく使い、スキャンやナビゲーションが容易で、サイドバー、フッター、またはポップアップウィンドウとして配置できるため、より柔軟性があります。

例えば、オンラインストアをお持ちの場合、縦型ナビゲーションメニューを使用すると、多くの商品カテゴリや商品を、それほど多くのスペースを取らずに表示できます。

それでは、WordPressで縦型ナビゲーションメニューを作成するいくつかの方法を見てみましょう。この記事では、以下のトピックを扱います。

• メニューの表示場所を変更する
• サイドバーに縦型ナビゲーションメニューを追加する
• 投稿またはページでの縦型ナビゲーションメニューの作成
• フルサイトエディターを使用した垂直ナビゲーションメニューの追加
• テーマビルダープラグインを使用した縦型ナビゲーションメニューの作成
• モバイルデバイス向けのレスポンシブな縦型ナビゲーションメニューの作成
• WordPressでドロップダウンメニューを作成する
• WordPress でメガメニューを作成する
• ボーナス：WordPressでスティッキーフローティングナビゲーションメニューを作成する

メニューの表示場所を変更する

ウェブサイトにナビゲーションメニューを追加すると、垂直または水平に表示されます。これは、テーマと選択したメニューの場所によって異なります。

利用可能なメニュー位置の数は、使用しているテーマによって異なります。これらの位置の一部でメニューが縦に表示される場合があります。

これをテーマでテストするには、WordPress管理サイドバーから外観 » メニューページに移動します。ここで、ウェブサイトで利用可能な場所と表示方法を試すことができます。

例えば、Twenty Twenty-Oneテーマには縦方向の場所がありませんが、Twenty Twentyテーマには「Desktop Expanded Menu」と呼ばれる場所があります。

表示したいメニューを選択し、画面下部にある「デスクトップ展開メニュー」ボックスをチェックするだけです。

その後、「Save Menu」ボタンをクリックして設定を保存する必要があります。これはデモウェブサイトでの表示です。

メニューの編集やメニューの場所に関する詳細については、WordPressでナビゲーションメニューを追加する方法の初心者ガイドをご覧ください。

サイドバーに縦型ナビゲーションメニューを追加する

どのテーマを使用していても、ウィジェットを使用してサイドバーに垂直ナビゲーションメニューを追加するのは簡単です。

まず、まだ作成していない場合は、表示したいナビゲーションメニューを作成する必要があります。次に、WordPressダッシュボードから外観 » ウィジェットページにアクセスする必要があります。

ここから、ページ左上の「+」ボタンをクリックし、ナビゲーションメニューブロックをサイドバーにドラッグするだけです。

その後、ウィジェットに名前を付け、ドロップダウンメニューから表示したいメニューを選択できます。最後に、上部にある「更新」ボタンをクリックして設定を保存します。

こちらが、デモのWordPressブログで縦型サイドバーメニューがどのように表示されるかです。

投稿またはページでの縦型ナビゲーションメニューの作成

同様に、投稿やページに縦型ナビゲーションメニューを追加できます。

まず、新しい投稿を作成するか、既存の投稿を編集する必要があります。

その後、ページ上部の「+」ボタンをクリックし、ナビゲーションブロックをページにドラッグします。

次に、表示するメニューを選択します。ツールバーの「メニューを選択」ボタンをクリックして、目的のメニューを選択するだけです。

最後に、右側のパネルにあるブロック設定を確認する必要があります。

そこには、メニューの向きを設定するための2つのボタンがあります。メニューを縦向きにするには、下向き矢印ボタンをクリックする必要があります。

完了したら、「公開」または「更新」ボタンをクリックして設定を保存します。

フルサイトエディターを使用した垂直ナビゲーションメニューの追加

ブロックベースのテーマを使用している場合は、フルサイトエディターを使用して、サイトに垂直ナビゲーションメニューを簡単に追加できます。ブロックベースのテーマ

これを行うには、WordPressダッシュボードから外観 » エディター画面に移動します。エディターに入ったら、ウェブサイトヘッダーの上部にあるナビゲーションメニューをクリックします。

次に、ツールバーの「ナビゲーションの選択」ボタンをクリックします。

右側のパネルで、ナビゲーションメニューをカスタマイズするためのさまざまなオプションが表示されます。

これらのオプションの1つは、メニューを横型または縦型のどちらで表示するかです。縦型メニューを作成するには、縦型表示用の下向き矢印をクリックするだけです。

詳細については、WordPressでナビゲーションメニューを追加する方法に関するガイドを参照してください。

最後に、「保存」ボタンをクリックして設定を保存します。これで、サイトに垂直ナビゲーションメニューが追加されました。

テーマビルダープラグインを使用した縦型ナビゲーションメニューの作成

SeedProdは、市場で最も優れたWordPressページビルダーであり、カスタムテーマビルダープラグインです。これにより、WordPressウェブサイトのどこにでも縦型メニューを簡単に作成できます。

まず、SeedProdプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。

有効化後、ライセンスキーを入力する必要があります。この情報はSeedProdウェブサイトのアカウントで見つけることができます。

その後、SeedProdを使用してカスタムWordPressテーマを作成できます。

カスタムWordPressテーマの作成

SeedProd » Theme Builder ページに移動すると、SeedProd のテーマビルダーが見つかります。ここでは、SeedProd の既製のテーマのいずれかを開始点として使用します。これにより、既存の WordPress テーマが新しいカスタムデザインに置き換えられます。

これは、「テーマ」ボタンをクリックすることで実行できます。

その後、さまざまな種類のウェブサイト向けのプロフェッショナルにデザインされたテーマのリストが表示されます。たとえば、「モダンビジネス」、「マーケティングエージェンシー」、「住宅ローンブローカーテーマ」といったテンプレートがあります。

オプションを確認し、チェックマークアイコンをクリックしてニーズに最も合ったものを選択してください。

テーマを選択すると、SeedProd は必要なすべてのテーマテンプレートを生成します。これらのテンプレートをカスタマイズする方法については、カスタムWordPressテーマを簡単に作成する方法に関するガイドをご覧ください。

サイトのテンプレートに縦型ナビゲーションメニューを追加する

これで、SeedProdを使用して、テーマテンプレートに垂直ナビゲーションメニューを追加できます。このチュートリアルでは、ブログインデックステンプレートにメニューを追加します。

そのテンプレートの上にマウスカーソルを合わせ、次に「デザインを編集」リンクをクリックする必要があります。

これにより、SeedProdのドラッグ＆ドロップページビルダーが開きます。右側にウェブサイトのプレビュー、左側にブロックパネルが表示されます。

ここからブロックを下にスクロールして、「高度な設定」セクションまで進みます。

ナブメニューブロックを見つけたら、サイドバーまたはナビゲーションメニューを表示したい場所にドラッグします。デフォルトでは、メニューには「About」という項目が1つだけあります。

次に、メニューの設定を変更する必要があります。これを行うには、メニューをクリックすると、利用可能なオプションが左側の列に表示されます。

現在、「シンプル」メニュータイプが選択されています。これにより、SeedProdで独自のナビゲーションメニューを構築できます。

ただし、このチュートリアルでは、「WordPress Menu」タイプをクリックして、代わりに WordPress ナビゲーションメニューを使用します。

最後に、「詳細設定」タブをクリックする必要があります。ここで、リストレイアウトを縦向きまたは横向きに配置するオプションが見つかります。

「縦型」ボタンをクリックすると、プレビューがすぐに縦型ナビゲーションメニューに変わることに気づくでしょう。

縦型メニューを保存するには、画面上部にある「保存」ボタンをクリックすることを忘れないでください。

モバイルデバイス向けのレスポンシブな縦型ナビゲーションメニューの作成

スマートフォンの小さな画面を使用している場合、標準のメニューをタップするのは難しい場合があります。そのため、WordPressサイトのモバイルバージョンをプレビューして、ウェブサイトがモバイルデバイスでどのように表示されるかを確認することをお勧めします。

縦型メニューは、特に画面サイズに合わせて自動調整されるフルスクリーンレスポンシブメニューを使用する場合、ナビゲーションがはるかに簡単になります。

モバイルデバイスでナビゲーションメニューを使いやすくする方法については、WordPressでフルスクリーンレスポンシブメニューを追加する方法に関するガイドを参照してください。WordPressでフルスクリーンレスポンシブメニューを追加する方法

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

ドロップダウンメニューは、画面上部の通常の横型ナビゲーションメニューのように見えます。しかし、項目のいずれかにマウスを重ねると、縦型のサブメニューが表示されます。

コンテンツが多いウェブサイトの場合、ドロップダウンメニューを使用すると、トピックまたは階層別にメニュー構造を整理できます。これにより、限られたスペースにより多くのコンテンツを表示できます。

ウェブサイトにドロップダウンナビゲーションメニューを表示するには、ドロップダウンメニューをサポートするテーマを選択する必要があります。その後、ナビゲーションメニューを作成し、一部のメニュー項目にサブ項目を追加する必要があります。

WordPressでドロップダウンメニューを作成する方法に関する初心者向けガイドで、その手順をステップバイステップで学ぶことができます。

WordPress でメガメニューを作成する

メガメニューは、複数のメニューをページ全体に縦にリスト表示します。ドロップダウンメニューに似ていますが、すべてのサブメニューが一度に表示されるため、ユーザーは最も優れたコンテンツをすばやく簡単に見つけることができます。

メガメニューは、水平メニューと垂直メニューの長所を組み合わせ、ウェブサイトのコンテンツの概要を1つの画面に表示できるため、非常に魅力的でインタラクティブです。

コンテンツの発見性を向上させるために、最近WPBeginnerにメガメニューを追加しました。新しいサイトデザインの舞台裏に関する記事で、その方法を説明しています。

WordPress サイトにメガメニューを追加する方法に関するガイドで詳細を確認できます。

ボーナス：WordPressでスティッキーフローティングナビゲーションメニューを作成する

ウェブサイトのユーザーエンゲージメントを高めるために、固定表示されるフローティングナビゲーションメニューを作成することもできます。固定メニューは、ユーザーがページをスクロールダウンしても画面上に表示され続けるため、ユーザーが簡単にアクセスできます。

ナビゲーションメニューを固定するには、Sticky Menu & Sticky Header プラグインをインストールして有効化する必要があります。詳細は、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、設定 » 固定メニューページに移動し、「固定要素（必須）」オプションの横に#main-navigationと入力します。これにより、縦型ナビゲーションメニューを固定することもできます。

完了したら、「変更を保存」をクリックして設定を保存してください。その他の手順については、WordPressでスティッキーなフローティングナビゲーションメニューを作成する方法に関するチュートリアルをご覧ください。WordPressでスティッキーなフローティングナビゲーションメニューを作成する方法。

このチュートリアルでWordPressで縦型ナビゲーションメニューを作成する方法を学べたことを願っています。また、WordPressでモバイルメニューを非表示にする方法や、WordPressでナビゲーションメニューに画像アイコンを追加する方法に関するガイドも役立つかもしれません。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。