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 でメガメニューを作成する

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

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

WPBeginnerでは、コンテンツの発見性を向上させるためにメガメニューを最近追加しました。新しいサイトデザインの舞台裏で、どのようにこれを行ったかを説明します。

WordPressサイトにメガメニューを追加する方法に関するガイドで、さらに詳しく学ぶことができます。

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

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

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

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

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

このチュートリアルがお役に立ち、WordPressで垂直ナビゲーションメニューを作成する方法を学べたことを願っています。また、WordPressでモバイルメニューを非表示にする方法や、WordPressでナビゲーションメニューに画像アイコンを追加する方法に関するガイドもご覧ください。

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