要約:WordPressナビゲーションバーの編集方法(2つの方法)
SeedProdを使用してWordPressナビゲーションバーを編集すると、視覚的な制御が完全に可能になり、WordPressの組み込みメニューエディターを使用すると、すばやく変更できます。
各方法の仕組みを説明します。
- 方法を選択してください:デザイン制御とドロップダウンにはSeedProd、既存のテーマでの簡単な編集には[外観] > [メニュー]を使用します。
- SeedProdをインストールします(方法1):アカウントからダウンロードし、有効化し、SeedProd > [設定]でライセンスキーを確認します。
- ヘッダーを編集します:テーマビルダーを開き、テンプレートを選択してから、ヘッダーの[デザインの編集]をクリックしてナビゲーションメニューブロックにアクセスします。
- リンクまたはボタンを追加します:簡単なリンクにはシンプルなメニュー、既存のメニューにはWordPressメニューオプションを使用するか、CTA用のボタンブロックをドラッグします。
- 公開または保存します:[SeedProdテーマを有効にする](方法1)を切り替えるか、[外観] > [メニュー]で[メニューを保存]をクリックします(方法2)。
ナビゲーションバーはあなたにとっては問題なく見えますが、訪問者は間違ったページに着陸したり、諦めて離脱したりしています。
リンクはありますが、正しい場所を指していません。デザインがしっくりきません。または、新しいサービスページを立ち上げたばかりで、全体のレイアウトを壊さずにどこに追加すればよいかわかりません。
私は13年以上WordPressサイトを構築してきましたが、ナビゲーションバーは、実際に変更しようとするまで簡単そうに聞こえるものの1つです。このガイドでは、WordPressナビゲーションメニューを編集する2つの方法を紹介します。1つはSeedProdを使用して完全に視覚的に制御する方法、もう1つはWordPressの組み込みメニューエディターを使用してすばやく更新する方法です。
WordPressナビゲーションバーを編集するにはどうすればよいですか?
WordPressナビゲーションバーは、SeedProdのようなドラッグアンドドロップのウェブサイトビルダー、または[外観] » [メニュー]に組み込まれているWordPressメニューエディターで編集できます。どちらも初心者には機能しますが、制御レベルが異なります。
| 特徴 | SeedProd | 組み込みエディター |
|---|---|---|
| 視覚的なドラッグアンドドロップ編集 | はい | いいえ |
| ドロップダウン(サブメニュー)サポート | はい(WordPressメニューオプション経由) | はい |
| モバイルナビゲーション | はい | テーマによる |
| スタイリングにはCSSが必要 | いいえ | 多くの場合はい |
| 無料で使用可能 | 有料(Pro) | はい(組み込み) |
| どのテーマでも動作します | テーマを置き換える | はい |
方法1. SeedProdでWordPressナビゲーションバーを編集する方法
SeedProdは、WordPress用のドラッグ&ドロップウェブサイトビルダーで、コードに触れることなくナビゲーションバーを完全に視覚的に制御できます。変更内容はリアルタイムで確認できます。フォント、色、メニューリンク、ボタン、レイアウトはすべてリアルタイムで調整されます。

SeedProdを使用すると、カスタムWordPressテーマを作成したり、ランディングページを作成したり、ヘッダーやメニューなどのサイト全体の要素を1か所で編集したりできます。Nav Menuブロックを使用すると、ポイント&クリックでナビゲーションバーを視覚的に簡単に編集できます。
メニュー以外にも、SeedProdは以下のことにも役立ちます:
- 近日公開ページを作成する
- メンテナンスモードの有効化
- カスタム404ページとログインページの作成
- ソーシャルメディアコンテンツの埋め込み
- WooCommerceストアのデザイン
ステップ1:SeedProdプラグインをインストールする
WordPressのナビゲーションバーをSeedProdで編集するには、まずプラグインをインストールして有効化します。 SeedProdの料金ページにアクセスし、プランを選択して、アカウントダッシュボードからプラグインをダウンロードしてください。

次に、プラグインをWordPressサイトにアップロードし、有効化をクリックします。その後、SeedProd » 設定に移動し、ライセンスキーを貼り付けて、キーの検証をクリックしてテーマビルダー機能をアンロックします。

次に、WordPressダッシュボードのSeedProd » テーマビルダーに移動して、カスタムテーマとナビゲーションメニューの作成を開始してください。

注意:テーマを置き換えたくない場合は、ランディングページを作成し、そのヘッダーをカスタマイズすることで、SeedProdでナビゲーションバーを編集できます。
ステップ2. WordPressテーマテンプレートの選択
SeedProdでナビゲーションバーをセットアップする最も速い方法は、既製のWordPressテーマテンプレートから始めることです。各テンプレートには、ヘッダー、フッター、ホームページ、ブログなど、サイトのすべてのパーツが含まれているため、デザインをカスタマイズするだけで済みます。
テーマビルダーダッシュボードから、テーマをクリックしてテンプレートギャラリーを開きます。新しいタブでデザインをプレビューし、ビジネスに合ったものを選択できます。

このチュートリアルではCar Maintenanceテーマを使用しますが、どのテンプレートでも選択できます。オレンジ色のチェックマークをクリックして、サイトにインポートします。

インポートすると、SeedProdはヘッダー、フッター、ブログページを含むサイトの構造を自動的に作成します。これで、ドラッグ&ドロップエディターで任意のパーツを開いてカスタマイズを開始できます。

ステップ3. ヘッダーテンプレートパーツのカスタマイズ
ナビゲーションバーはヘッダーテンプレート内にあります。SeedProdの既製のテーマは通常、自動的に1つ追加するため、ヘッダーを開いてカスタマイズするだけで済みます。
ヘッダーを編集するには、テーマビルダーのヘッダーテンプレートにカーソルを合わせ、デザインの編集をクリックします。これにより、ライブドラッグアンドドロップエディターが開きます。

プレビュー内の任意の要素をクリックして編集します。設定パネルが左側に表示され、テキスト、スタイル、機能を変更できます。
たとえば、ロゴブロックをクリックしてプレースホルダーロゴを削除し、WordPressメディアライブラリから独自のロゴをアップロードします。

また、ヘッダーにソーシャルメディアアイコン、検索バー、カスタムボタンなどの新しいブロックをドラッグして、ナビゲーションバーを拡張することもできます。

ヘッダーの基本がカバーされたので、次のステップでナビゲーションメニュー自体を編集する準備ができました。
ステップ4. WordPressナビゲーションバーの編集
SeedProdはナビゲーションメニューブロックを使用してサイトのナビゲーションを表示します。このブロックは、メニューを管理するための2つの方法を提供します。簡単なリンク用のシンプルなオプション、または高度な制御用のWordPressメニューオプションです。

オプション1:シンプルなメニュー
ビルダー内で、任意のページ、投稿、カテゴリ、タグ、または外部URLへのリンクを直接追加します。セットアップは高速ですが、ドロップダウンメニューや既存のWordPressメニューはサポートされていません。

シンプルなメニューは、配置、フォントサイズ、間隔、区切り文字のオプションでスタイル設定できます。高度なタブでは、水平または垂直レイアウトを切り替え、タイポグラフィ、色、境界線を調整します。

オプション2:WordPressメニュー
ドロップダウンから、WordPressメニューエディターで既に作成したメニューを選択します。このオプションはモバイルナビゲーションをサポートし、WordPressの組み込みの外観 » メニュー設定の柔軟性を継承します。

レイアウトを調整できるデフォルトのWordPressメニューページへのクイックリンクも表示されます。シンプルなメニューと同様に、高度なタブではフォント、色、影、デバイスごとの表示などをカスタマイズできます。
WordPressにメニューボタンを追加する方法
メニューボタンは、「サインアップ」や「開始する」などのアクションを強調するのに役立ちます。SeedProdでは、ボタンブロックを使用して追加できます。

左側のサイドバーから、ボタンブロックをヘッダーにドラッグします。次に、行動喚起テキスト、リンク、およびスタイルを、設定パネルで直接カスタマイズします。

プロのヒント:不要な要素は、その上にカーソルを合わせてゴミ箱アイコンをクリックして削除します。

メニューが希望どおりになったら、右上隅にある保存をクリックしてエディタを閉じ、テーマビルダーダッシュボードに戻ります。

この同じプロセスを繰り返して、WordPressテーマの他の部分をカスタマイズできます。
コンバージョンヒント:ナビゲーションバーはリンクだけである必要はありません。「見積もりを取得」または「デモを予約」ボタンを追加し、専用のランディングページにリンクすることで、ヘッダーをコンバージョンツールに変えることができます。CTAをすべてのページで表示できるようにするだけで、リードフォームの送信数が2倍になったサイトを見たことがあります。
ステップ5.カスタムWordPressテーマを公開する
WordPressメニューとヘッダーテンプレートを編集した後、変更を公開する準備ができました。テーマビルダーページでSeedProdテーマを有効にするトグルを見つけて、「オン」の位置に切り替えます。

これでホームページにアクセスして、新しいカスタムナビゲーションメニューがサイトで公開されていることを確認してください。

方法2.プラグインなしでWordPressメニューを編集するにはどうすればよいですか?
現在のテーマを維持したい場合は、WordPressメニューエディターがダッシュボードに組み込まれています。追加のプラグインは必要ありませんが、スタイリングオプションはテーマによって異なります。
重要:この方法はクラシックテーマのみで機能します。ダッシュボードに外観 » メニューが表示されない場合、サイトはおそらくブロックテーマ(Twenty Twenty-Fourなど)を実行しています。ブロックテーマのユーザーは、代わりに外観 » エディターに移動し、ナビゲーションセクションを探してください。
ステップ1.[外観] » [メニュー]に移動します
WordPressダッシュボードで、外観 » メニューに移動します。既にメニューがある場合は、上部のドロップダウンから選択します。ない場合は、新しいサイトメニューの名前を入力し、メニューを作成をクリックします。
ステップ2.ナビゲーションメニューに項目を追加します
新しい項目を追加するには、左側のパネルからページを選択し、メニューに追加をクリックします。投稿、カテゴリ、カスタムリンク、またはタグを展開して含めることもできます。

ステップ3.メニュー項目を並べ替えます
項目を追加した後、希望の順序にドラッグアンドドロップします。リストの上部にある項目がヘッダーメニューに最初に表示されます。並べ替え後にメニューを保存をクリックして変更を保存してください。
ステップ4.ドロップダウン(サブメニュー)項目を作成します
ナビゲーションメニューにドロップダウンを作成するには、メニュー項目を別の項目の下に少し右にドラッグします。インデントされると、WordPressはそれをサブメニューとして認識します。親項目がトップレベルリンクになり、訪問者がホバーするとインデントされた項目がドロップダウンに表示されます。
ステップ5.メニュー項目を削除します
項目を削除するには、その横にある矢印をクリックして設定を展開し、削除をクリックします。これにより、ページをサイトから削除せずにナビゲーションメニューから削除されます。
ステップ6.表示場所を設定して保存します
ヘッダーメニューの表示場所は、メニュー設定 > 表示場所で選択します。オプションはテーマによって異なり、以下が含まれる場合があります:
- プライマリメニュー
- セカンダリメニュー
- オフキャンバスメニュー
- ユーザーアカウントメニュー
- フッターメニュー

完了したらメニューを保存をクリックし、サイトをプレビューして更新されたナビゲーションバーを確認してください。

よくある質問
既存のページを失うことなくWordPressのナビゲーションメニューを編集するにはどうすればよいですか?
WordPressでナビゲーションメニューを編集しても、ページや投稿には影響しません。外観 > メニュー画面は、どのリンクがメニューに表示され、どの順序で表示されるかを制御するだけで、コンテンツを削除するものではありません。
安全のため、変更を加える前に、メニュー画面の上部にあるドロップダウンから既存のメニューを選択することから始めてください。これにより、正しいメニューを編集し、誤って新しいメニューを作成することを防ぐことができます。
WordPressの外観の下にメニューオプションが見つからないのはなぜですか?
外観の下にメニューが表示されない場合、サイトはブロックテーマ(Twenty Twenty-FourやTwenty Twenty-Fiveなど)を実行しています。ブロックテーマは、従来のメニュー画面ではなく、サイトエディターを通じてナビゲーションを管理します。
外観 > エディターに移動し、ナビゲーションセクションを探してサイトメニューを編集します。または、SeedProdはどのテーマでも機能し、サイトエディターなしでナビゲーションバーを完全に視覚的に制御できます。
WordPressでドロップダウンメニューを追加するにはどうすればよいですか?
WordPressメニューエディター(外観 > メニュー)で、メニュー項目を親にしたい項目の下に少し右にドラッグします。インデントされてサブメニューになったことが示されます。
親項目がトップレベルリンクになり、インデントされた項目が訪問者がホバーするとドロップダウンとして表示されます。完了したらメニューを保存をクリックします。SeedProdでは、Nav MenuブロックのWordPressメニューオプションを使用します。これは、設定したドロップダウン構造を含む既存のメニューを継承します。
プラグインなしでWordPressのナビゲーションバーを編集できますか?
はい。WordPressには、どのクラシックテーマでも機能する外観 > メニューに組み込みのメニューエディターがあります。追加のものをインストールせずに、リンクを追加したり、項目を並べ替えたり、サブメニューを作成したり、表示場所を設定したりできます。
トレードオフは、スタイリングがテーマがサポートするものに限定されることです。CSSを記述せずにフォント、色、レイアウトを変更したい場合は、SeedProdのようなビジュアルビルダーが簡単な方法です。
WordPressメニューをスティッキー(スクロール時に固定)にするにはどうすればよいですか?
固定ナビゲーションバーは、訪問者がページをスクロールしても常に表示されます。SeedProdでは、テーマビルダーでヘッダーテンプレートを開き、ヘッダー行をクリックして、左側の設定パネルにある「固定ヘッダー」オプションを探します。それをオンに切り替えて保存してください。
WordPressの組み込みメニューエディターの場合、固定動作はテーマによって異なります。多くのテーマには、カスタマイザー(外観 > カスタマイズ)に固定ヘッダーオプションが含まれています。お使いのテーマに含まれていない場合は、プラグインまたはカスタムCSSを追加する必要があります。
次のステップ
これで、ナビゲーションバーは意図した場所にリンクされるようになりました。間違った場所に誘導されていた訪問者や、必要なものが見つからずに離脱していた訪問者も、サイト内をより明確に進むことができます。
WooCommerceストアを運営している場合は、メニューにWooCommerceショッピングカートアイコンを追加することも検討してください。これにより、顧客はサイトのどこからでもカートにアクセスできます。ヘッダーのデザインをさらにカスタマイズしたい場合(ロゴの配置、検索バー、レイアウトなど)、WordPressヘッダーのカスタマイズ方法に関する完全ガイドを参照してください。
今すぐSeedProdを使い始めましょう。
お読みいただきありがとうございます!ご意見をお聞かせいただければ幸いですので、ビジネスを成長させるための役立つアドバイスやコンテンツについては、お気軽にYouTube、X、Facebookで会話にご参加ください。
