WordPressで垂直ナビゲーションメニューを作成する方法（簡単な5つの方法） 

WordPressサイトが成長し、トップナビゲーションが混雑してきた場合、垂直ナビゲーションメニューは最も簡単な解決策の1つです。多くの商品カテゴリを持つeコマースストア、ドキュメントサイト、構造化されたサイドバーレイアウトが必要なメンバーシップサイトでうまく機能するのを見てきました。

このガイドでは、コードを一行も書かずにWordPressに垂直ナビゲーションメニューを追加する5つの方法を紹介します。

WordPressの垂直ナビゲーションバーとは？

WordPressの垂直ナビゲーションバーとは、標準の水平方向の行ではなく、リンクを積み重ねた列に表示するサイトメニューです。通常は左側のサイドバーに配置されますが、テーマやページビルダーがサポートする場所ならどこにでも配置できます。

WordPressユーザーは、ヘッダーのスペースを解放し、コンテンツが多いサイトでのスキャン可能性を向上させ、より構造化されたサイドバーナビゲーションレイアウトのメリットを活かすデザインに合わせるために、これを使用します。

WordPressで垂直ナビゲーションバーを使用するタイミングは？

垂直ナビゲーションメニューは、サイトのナビゲーション項目が多く、ヘッダーがいっぱいになった場合に最も効果的です。サイドバースペースを、トップバーにすべて詰め込むのではなく、明確でスキャン可能なサイドナビゲーションメニューに変えます。

特に10以上の商品カテゴリを持つeコマースサイトでは、買い物客がヘッダーを混雑させることなく多くのオプションをナビゲートする必要があるため、特に役立ちます。ドキュメントやナレッジベースサイトも同じ理由で使用しており、メンバーシップサイトもセクションごとにダッシュボードリンクをグループ化するために垂直サイドバーメニューに依存しています。

ただし、垂直サイドナビゲーションメニューが常に正しい選択とは限りません。シングルページサイト、ナビゲーション項目が6つ未満のサイト、モバイルファーストのデザインは、標準の水平メニューの方が適しています。

SeedProdで垂直ナビゲーションを作成する方法

SeedProd を使えば、WordPress で縦型ナビゲーションメニューを作成するのは簡単です。SeedProd はドラッグ＆ドロップ式の WordPress ウェブサイトビルダーです。

SeedProd のドラッグ＆ドロップビルダーを使用すると、PHP、Jquery、Javascript、HTML & CSS コードを書かずに、カスタム WordPress テーマや柔軟なウェブページを作成できます。さらに、Nav Menu ブロックには縦型ナビゲーションが組み込まれています。

まず、SeedProd プラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、SeedProd Pro のインストール方法に関するドキュメントをご覧ください。

注意: SeedProd の無料版では、個々のページに縦型ナビゲーションバーを追加できます。ただし、このガイドでは SeedProd Pro を使用して、WordPress テーマテンプレートにメニューバーを追加します。

プラグインを有効化し、ライセンスキーを入力したら、カスタム WordPress テーマを作成する準備が整いました。

カスタムWordPressテーマの作成

テーマを作成するには、WordPress ダッシュボードから SeedProd » Theme Builder ページに移動します。このページでは、既存のテーマをテンプレートとして選択できます。

これにより、既存のテーマが、選択したカスタムレスポンシブウェブサイトデザインに置き換えられます。これを行うには、Theme Template Kits ボタンをクリックします。

次に、さまざまなウェブサイトのニッチに対応するデザインが掲載された テーマライブラリが表示されます。ドロップダウンメニューをクリックすると、人気度やタイプ別にフィルタリングできます。

デザインを閲覧し、任意のデザインのチェックマークアイコンをクリックしてインポートします。

デザインをインポートすると、SeedProd はテーマを構成するテンプレートを生成します。そこから、各テンプレートを編集して、ニーズに合わせてデザインをカスタマイズできます。

すべての手順については、カスタム WordPress テーマの作成方法に関するガイドをご覧ください。

テンプレートに垂直ナビゲーションバーを追加する

SeedProd を使用して、テーマテンプレートのいずれかに縦型ナビゲーションバーを追加できます。このガイドでは、「ブログページ」テンプレートにメニューを追加します。

これを行うには、テンプレートの上にマウスカーソルをホバーし、「デザインを編集」リンクをクリックします。

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

次に、ブロックサイドバーを下にスクロールして、Nav Menu ブロックを探します。見つけたら、ナビゲーションメニューを表示したい場所（サイドバーなど）にドラッグします。

デフォルトでは、Nav Menu には「About」メニュー項目のみが表示されます。ブロックをクリックしてメニュー設定でこれを変更できます。その後、左側のサイドバーに設定が表示されます。

最初に「Simple」メニュータイプが有効になっており、独自のナビゲーションメニューを作成できます。

このガイドでは、「WordPress Menu」タイプを選択します。これにより、既存の WordPress ナビゲーションメニューを使用できます。

次のステップは、横型ナビゲーションバーではなく、バーを縦型にすることです。これを行うには、ブロック設定の「Advanced」タブをクリックし、「Vertical」リストレイアウトを選択します。

同じパネルで、メニューの色、タイポグラフィ、背景色、テキスト配置、テキスト装飾などをカスタマイズできます。

メニューに満足したら、保存ボタンをクリックして変更を保存します。垂直ナビゲーションが必要なすべてのテンプレートに対して、これらの手順を繰り返すことができます。

WordPressで垂直ナビゲーションを作成するその他の4つの方法

SeedProdで垂直ナビゲーションバーを作成することは、テーマビルダープラグインを使用している場合に最適な選択肢です。しかし、ウェブサイトに既に存在するツールを使用したい場合はどうでしょうか？

以下に、WordPressに垂直ナビゲーションを追加するための4つの追加方法を紹介します。

どのWordPressテーマが垂直ナビゲーションをサポートしていますか？

ウェブサイトに垂直ナビゲーションを追加するもう1つの方法は、それをサポートするWordPressテーマを選択することです。多くのWordPressテーマには垂直ナビゲーションバーの組み込みサポートがあり、多くの時間を節約できます。

ここでの利点はシンプルさです。あなたの美学に合ったテーマを選択し、それが大変な作業を行ってくれるようにします。これは、技術に詳しくない場合や時間がない場合に最適なソリューションかもしれません。

ただし、すべてのテーマがこの機能を提供するわけではないことに注意してください。テーマを選択する際は、設定またはドキュメントにアクセスして、垂直ナビゲーションバーが含まれているかどうかを確認してください。

たとえば、デフォルトのTwenty-Twenty-Oneテーマには垂直ナビゲーションが含まれていません。一方、Astraテーマは、オフキャンバスハンバーガーメニューと、スタックまたはインラインで表示できるフッターメニューをサポートしています。

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

フルサイトエディターで垂直ナビゲーションバーを追加する

多くのWordPressテーマは、WordPressのフルサイトエディター（FSE）と互換性があります。これらはブロックベースのテーマとして知られており、テーマを視覚的にカスタマイズできます。

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

メニューをクリックすると、サイドナビゲーションパネルにいくつかのオプションが表示されます。たとえば、設定タブをクリックすると、メニューリスト項目の向きを変更するオプションがあります。

下向き矢印をクリックして、メニューを垂直ナビゲーションに切り替えます。

次に、保存ボタンをクリックして変更を保存します。

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

WordPressテーマを変更したくない場合は、ウィジェットを使用してサイトにサイドバーナビゲーションメニューを簡単に追加できます。この方法は、ブロックベースのテーマがインストールされていない場合に理想的です。

まず、ナビゲーションメニューが設定されていることを確認します。次に、WordPressダッシュボードから外観 » ウィジェットに移動します。

そこから、(+)プラスボタンをクリックし、ナビゲーションメニューウィジェットを探します。

サイドバーに追加するためにクリックした後、メニューにタイトルを付け、表示するメニューを選択できます。

これで変更を保存し、サイトをプレビューして、垂直サイドナビゲーションメニューが機能していることを確認します。

投稿とページ用の垂直ナビゲーションバーを作成する

このアプローチは、メインコンテンツの横に記事内のセクションナビゲーションを配置したい長いチュートリアル投稿やドキュメントページに適しています。サイドバーの方法と同じナビゲーションブロックを使用しますが、投稿またはページコンテンツ内に直接配置されます。

まず、投稿またはページを編集するか、新規作成します。次に、ナビゲーションブロックを追加します。

右側のサイドバーで下向き矢印をクリックしてメニューを縦表示にし、変更を保存します。

投稿またはページを表示すると、新しい縦型ナビゲーションバーが表示されます。

縦型ナビゲーションバーに関するよくある質問

縦型ナビゲーションバーとは何ですか？

縦型ナビゲーションバーは、リンクを水平の行ではなく積み重ねられた列で表示するサイトメニューです。通常は左側のサイドバーに表示され、多くのページやカテゴリをナビゲートする必要があるサイトに適しています。ほとんどのWordPressサイトで追加されるのは、ヘッダーのスペースを確保し、メニューをスキャンしやすくするためです。

WordPressで縦型ナビゲーションバーを使用するのはいつですか？

サイトに6〜7を超えるトップレベルのナビゲーション項目がある場合、またはユーザーが一度に多くのカテゴリを閲覧する必要がある場合は、縦型ナビゲーションメニューを使用してください。eコマースストア、ナレッジベース、メンバーシップサイトに適しています。シンプルなサイトや、サイドバーのスペースが限られているモバイルファーストのデザインでは避けてください。

縦型ナビゲーションと横型ナビゲーションの違いは何ですか？

横型ナビゲーションは、ページの上部に沿って単一行でメニューリンクを表示します。縦型ナビゲーションは、通常サイドバーに、リンクを列に積み重ねます。横型メニューは、ページ数が少ないシンプルなサイトに適していますが、縦型メニューは、ヘッダーを混雑させることなく、より大きなリンクリストを処理できます。

縦型ナビゲーションバーのモバイルレスポンシブ対応はどのように行いますか？

SeedProdを含むほとんどのWordPressツールは、縦型ナビゲーションを追加する際にモバイルレスポンシブ対応を自動的に処理します。カスタムセットアップの場合は、小さな画面では折りたたみ式またはハンバーガー形式のメニューを使用してください。これにより、縦型ナビゲーションがビューポート全体を占有しません。公開前に必ず実際のモバイルデバイスでテストしてください。

縦型ナビゲーションバーの理想的な幅はどのくらいですか？

約200〜300ピクセルの幅は、ほとんどのサイトでうまく機能します。メニューラベルを切り取らずに表示するのに十分な幅があり、メインコンテンツ用のスペースを残すのに十分な狭さです。デスクトップだけでなく、768pxのタブレットビューポートでもメニューが読みやすいことを常に確認してください。

次の垂直ナビゲーションメニューを構築する

これで、WordPressで縦型ナビゲーションメニューを作成する方法に関するガイドは終了です。次は、ウェブサイトのよりユーザーフレンドリーなナビゲーションシステムを構築してください。

SeedProdを使用する場合でも、他の方法を使用する場合でも、目標は同じです。優れたナビゲーションシステムは、サイトを使いやすくします。これは常に努力する価値があります。

デザインを楽しんでください！

サイトの構築準備はできましたか？ SeedProdを入手して、数分で任意のテンプレートに縦型ナビゲーションを追加しましょう。

ナビゲーションのヒントについては、次のチュートリアルをご覧ください。

• WordPressメニューのスタイルをカスタマイズする方法
• WordPressでモバイルメニューを編集する方法
• ランディングページのナビゲーションは終わった：その理由は次のとおりです
• ナビゲーションなしでランディングページを作成する方法
• WordPressでページごとに異なるサイドバーを追加する方法

お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。