WordPressの縦型ナビゲーションバーは、混雑したトップメニューの代わりにサイドバーのスペースを使うことで、訪問者がより簡単にサイトを閲覧できるようにします。設定は簡単で、ユーザーエクスペリエンスを向上させながら、サイトをすっきりと見せることができます。
このガイドでは、WordPressでさまざまな方法を使用して垂直ナビゲーションバーを作成する方法をステップバイステップで紹介します。
目次
WordPressで縦型ナビゲーションバーを使う理由
縦型ナビゲーションバーは、サイドバーやフッターにリンクを整然と積み重ねることで、ウェブサイトを閲覧しやすくします。これにより、横方向のスペースを節約し、訪問者にわかりやすくスキャンしやすいメニューを提供します。
買い物客が圧倒されることなく、多くの商品カテゴリーを見る必要があるeコマースサイトには特に有効だ。
つまり、縦書きメニューはユーザビリティを向上させ、デザインスペースを解放し、より良いユーザー体験を生み出す。
SeedProdで縦型ナビゲーションを作成する方法
最高のWordPressウェブサイトビルダーと ランディングページプラグインであるSeedProdを使えば、WordPressで縦型ナビゲーションバーを作成するのは簡単です。
SeedProdのドラッグアンドドロップビルダーを使用すると、PHP、Jquery、Javascript、HTML＆CSSコードを記述することなく、カスタムWordPressテーマと柔軟なWebページを作成することができます。さらに、Nav Menuブロックには垂直ナビゲーションが組み込まれています。
まず、SeedProdプラグインをインストールし、有効化する必要があります。ヘルプが必要な場合は、SeedProd Proのインストールに関するドキュメントをご覧ください。
注： SeedProdの無料版では、個々のページに垂直ナビゲーションバーを追加することができます。しかし、このガイドではSeedProd Proを使ってWordPressテーマのテンプレートにメニューバーを追加します。
プラグインを有効化し、ライセンスキーを入力すると、カスタムWordPressテーマを作成する準備が整います。
カスタムWordPressテーマの作成
テーマを作成するには、WordPressのダッシュボードからSeedProd " Theme Builderページに移動します。このページでは、出発点として事前に作成されたテーマを選択することができます。既存のテーマをお好みのカスタムレスポンシブウェブサイトデザインに置き換えます。
これを行うには、テーマテンプレートキットボタンをクリックします。
すると、さまざまなウェブサイトのニッチ向けのデザインを含むテーマライブラリが表示されます。ドロップダウンメニューをクリックすると、人気度とタイプで絞り込むことができます。それらをブラウズし、任意のデザインのチェックマークアイコンをクリックしてインポートします。
デザインをインポートすると、SeedProdがテーマを構成するテンプレートを生成します。そこから各テンプレートを編集し、ニーズに合わせてデザインをカスタマイズすることができます。
すべての手順については、カスタムWordPressテーマを作成する方法についてのガイドを参照してください。
テンプレートに垂直ナビゲーションバーを追加する
SeedProdを使用して、任意のテーマテンプレートに垂直ナビゲーションバーを追加することができます。このガイドでは、「ブログページ」テンプレートにメニューを追加します。
これを行うには、マウスカーソルをテンプレートに合わせ、「デザインの編集」リンクをクリックします。
右側にライブプレビュー、左側にブロックサイドバーが表示されます。
次に、ブロック・サイドバーを下にスクロールし、Nav Menuブロックを探します。見つけたら、サイドバーなどナビゲーション・メニューを表示したい場所にドラッグしてください。
デフォルトでは、ナビメニューには「About」メニュー項目しか表示されません。メニューの設定でブロックをクリックして変更することができます。すると、左側のサイドバーに設定が表示されます。
最初は「シンプル」メニュー・タイプが有効になっており、独自のナビゲーション・メニューを作ることができる。
このガイドでは、既存のWordPressナビゲーションメニューを使用できる「WordPressメニュー」タイプを選択します。
次のステップは、バーを横のナビゲーション・バーではなく縦にすることです。ブロック設定の「詳細」タブをクリックし、「垂直」リストレイアウトを選択することで可能です。
同じパネルで、メニューの色、タイポグラフィ、背景色、文字揃え設定、文字装飾などをカスタマイズできる。
メニューに満足したら、保存ボタンをクリックして変更を保存します。垂直ナビゲーションを必要とするすべてのテンプレートに対して、これらの手順を繰り返すことができます。
WordPressで縦型ナビゲーションを作成する4つの方法
テーマビルダー・プラグインを使用している場合、SeedProdで縦型ナビゲーションバーを作成するのは素晴らしい選択です。しかし、すでにウェブサイト上にあるツールを使いたい場合はどうすればいいでしょうか？
以下では、WordPressに縦型ナビゲーションを追加する4つの方法をご紹介します。
垂直ナビゲーションバーをサポートするテーマを選ぶ
ウェブサイトに縦型ナビゲーションを追加するもう一つの方法は、縦型ナビゲーションをサポートしているWordPressテーマを選ぶことです。多くのWordPressテーマには、縦型ナビゲーションバーのサポートが組み込まれており、多くの時間を節約することができます。
ここでの重要な利点は、シンプルさである：単にあなたの美学に合ったテーマを選択し、あなたのために重い仕事をさせる。技術に詳しくなかったり、時間がなかったりする場合は、この方法が最適かもしれない。
ただし、すべてのテーマがこの機能を提供しているわけではないことに注意してください。テーマを選ぶ際には、そのテーマの設定やドキュメントを参照し、垂直ナビゲーションバーが含まれているかどうかを確認してください。
例えば、デフォルトのTwenty-Twenty-Oneテーマには垂直ナビゲーションが含まれていない。一方、Astraテーマは、オフキャンバスのハンバーガーメニューと、スタック表示またはインライン表示が可能なフッターメニューをサポートしている。
メニューの編集については、WordPressのナビゲーションバーの編集 方法をご覧ください。
フルサイトエディタで垂直ナビゲーションバーを追加する
多くのWordPressテーマは、WordPressフルサイトエディタ（FSE）と互換性があります。これらはブロックベースのテーマとして知られており、テーマを視覚的にカスタマイズすることができます。
これを行うには、WordPressの管理画面から外観 " エディターに移動します。そこから、ウェブサイトのヘッダー上部にあるナビゲーションメニューをクリックします。
メニューをクリックすると、サイドナビゲーションパネルにいくつかのオプションが表示されます。例えば、「設定」タブをクリックすると、メニューリストの項目の向きを変更するオプションがあります。
下向きの矢印をクリックすると、メニューが縦方向のナビゲーションに切り替わります。
ここでSaveボタンをクリックして変更を保存します。
WordPressのサイドバーに垂直ナビゲーションメニューを追加する
WordPressのテーマを変更したくない場合は、ウィジェットを使ってサイドバーに縦型ナビゲーションバーを簡単に追加できる。この方法は、ブロックベースのテーマをインストールしていない場合に最適です。
まず、ナビゲーション・メニューが設定されていることを確認してください。次に、WordPressのダッシュボードから外観 " ウィジェットにアクセスします。
そこから(+)プラスボタンをクリックし、ナビゲーションメニューウィジェットを探します。
クリックしてサイドバーに追加した後、メニューにタイトルを付け、表示するメニューを選択することができます。
変更を保存し、サイトをプレビューして、垂直サイドナビゲーションバーの動作を確認してください。
投稿とページに垂直ナビゲーションバーを作成する
同じような方法で、WordPressの投稿やページに垂直ナビバーを追加することができます。
まず、投稿またはページを編集または新規作成します。次に、ナビゲーション・メニュー・ブロックを追加します。
右側のサイドバーで、下矢印をクリックしてメニューを縦にし、変更を保存します。
投稿やページを表示すると、新しい垂直ナビゲーションバーが表示されます。
垂直ナビゲーションバーに関するFAQ
次のバーティカル・ナビ・メニューを作る
以上で、WordPressで縦型ナビゲーションバーを作成する方法のガイドは終了です。次は、あなたのウェブサイトにより使いやすいナビゲーションシステムを構築する番です。
SeedProdを使うにせよ、今回取り上げた他のソリューションから選ぶにせよ、ゴールは同じであることを忘れないでください。読者の体験を向上させ、サイトを整理し、訪問者が簡単にナビゲートできるようにしましょう。
ハッピーなデザインだ！
ナビゲーションのヒントについては、次のチュートリアルを参照してください：
- WordPressのメニュースタイルをカスタマイズする方法
- WordPressでモバイルメニューを編集する方法
- ランディングページのナビゲーションは死んだ：その理由はここにある
- ナビゲーションのないランディングページの作り方
- WordPressでページごとに異なるサイドバーを追加する方法
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
