最新のSeedProdニュース

ビジネス成長を支援するWordPressチュートリアル、ヒント、リソース

WordPressでメニューを編集する方法

WordPressナビゲーションバーの編集方法(2つの方法) 

執筆者: 著者アバター ステイシー・コリン
著者アバター ステイシー・コリン
Stacey Corrinは、WordPress、SEO、デジタルマーケティングに関する執筆経験15年以上の認定コンテンツマーケティングおよび検索スペシャリストです。彼女はSeedProdとRafflePressのコンテンツを管理しており、自身が積極的に使用しテストしているツールや戦略を取り上げています。
    
レビュー担当者: レビュアーアバター ターナー ジョン
レビュアーアバター ターナー・ジョン
ジョン・ターナーはSeedProdの共同創設者です。彼は20年以上のビジネスおよび開発経験を持ち、彼のプラグインは2500万回以上ダウンロードされています。

要約:WordPressナビゲーションバーの編集方法(2つの方法)

SeedProdを使用してWordPressナビゲーションバーを編集すると、視覚的な制御が完全に可能になり、WordPressの組み込みメニューエディターを使用すると、すばやく変更できます。

各方法の仕組みを説明します。

  1. 方法を選択してください:デザイン制御とドロップダウンにはSeedProd、既存のテーマでの簡単な編集には[外観] > [メニュー]を使用します。
  2. SeedProdをインストールします(方法1):アカウントからダウンロードし、有効化し、SeedProd > [設定]でライセンスキーを確認します。
  3. ヘッダーを編集します:テーマビルダーを開き、テンプレートを選択してから、ヘッダーの[デザインの編集]をクリックしてナビゲーションメニューブロックにアクセスします。
  4. リンクまたはボタンを追加します:簡単なリンクにはシンプルなメニュー、既存のメニューにはWordPressメニューオプションを使用するか、CTA用のボタンブロックをドラッグします。
  5. 公開または保存します:[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 ウェブサイトビルダー

SeedProdを使用すると、カスタムWordPressテーマを作成したり、ランディングページを作成したり、ヘッダーやメニューなどのサイト全体の要素を1か所で編集したりできます。Nav Menuブロックを使用すると、ポイント&クリックでナビゲーションバーを視覚的に簡単に編集できます。

メニュー以外にも、SeedProdは以下のことにも役立ちます:

ステップ1:SeedProdプラグインをインストールする

WordPressのナビゲーションバーをSeedProdで編集するには、まずプラグインをインストールして有効化します。 SeedProdの料金ページにアクセスし、プランを選択して、アカウントダッシュボードからプラグインをダウンロードしてください。

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

WordPressの設定でSeedProdライセンスキーを確認する

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

SeedProdテーマビルダーにアクセスしてWordPressメニューをカスタマイズする

注意:テーマを置き換えたくない場合は、ランディングページを作成し、そのヘッダーをカスタマイズすることで、SeedProdでナビゲーションバーを編集できます。

ステップ2. WordPressテーマテンプレートの選択

SeedProdでナビゲーションバーをセットアップする最も速い方法は、既製のWordPressテーマテンプレートから始めることです。各テンプレートには、ヘッダー、フッター、ホームページ、ブログなど、サイトのすべてのパーツが含まれているため、デザインをカスタマイズするだけで済みます。

テーマビルダーダッシュボードから、テーマをクリックしてテンプレートギャラリーを開きます。新しいタブでデザインをプレビューし、ビジネスに合ったものを選択できます。

SeedProdで既製のWordPressテーマテンプレートを選択する

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

SeedProdテーマテンプレートをプレビューしてインポートする

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

SeedProdテーマビルダーのテーマテンプレートパーツ

ステップ3. ヘッダーテンプレートパーツのカスタマイズ

ナビゲーションバーはヘッダーテンプレート内にあります。SeedProdの既製のテーマは通常、自動的に1つ追加するため、ヘッダーを開いてカスタマイズするだけで済みます。

ヘッダーを編集するには、テーマビルダーのヘッダーテンプレートにカーソルを合わせ、デザインの編集をクリックします。これにより、ライブドラッグアンドドロップエディターが開きます。

エディターでSeedProdヘッダーテンプレートを開く

プレビュー内の任意の要素をクリックして編集します。設定パネルが左側に表示され、テキスト、スタイル、機能を変更できます。

たとえば、ロゴブロックをクリックしてプレースホルダーロゴを削除し、WordPressメディアライブラリから独自のロゴをアップロードします。

SeedProdヘッダーのデフォルトロゴを置き換える

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

WordPressナビゲーションにソーシャルアイコンや検索などのブロックを追加する

ヘッダーの基本がカバーされたので、次のステップでナビゲーションメニュー自体を編集する準備ができました。

ステップ4. WordPressナビゲーションバーの編集

SeedProdはナビゲーションメニューブロックを使用してサイトのナビゲーションを表示します。このブロックは、メニューを管理するための2つの方法を提供します。簡単なリンク用のシンプルなオプション、または高度な制御用のWordPressメニューオプションです。

SeedProdエディターのナビゲーションメニューブロック

オプション1:シンプルなメニュー

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

SeedProdでWordPressナビゲーションバーにリンクを追加するためのシンプルなメニューオプション

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

SeedProdシンプルなメニューの詳細スタイルオプション

オプション2:WordPressメニュー

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

SeedProdのWordPressメニューオプション。既存のメニューを選択するためのドロップダウンが表示されます。

レイアウトを調整できるデフォルトのWordPressメニューページへのクイックリンクも表示されます。シンプルなメニューと同様に、高度なタブではフォント、色、影、デバイスごとの表示などをカスタマイズできます。

WordPressにメニューボタンを追加する方法

メニューボタンは、「サインアップ」や「開始する」などのアクションを強調するのに役立ちます。SeedProdでは、ボタンブロックを使用して追加できます。

WordPressエディターのSeedProdボタンブロック

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

SeedProdでコールトゥアクションボタンをカスタマイズする

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

SeedProdエディターで不要な要素を削除する

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

SeedProdでナビゲーションメニューの変更を保存する

この同じプロセスを繰り返して、WordPressテーマの他の部分をカスタマイズできます。

コンバージョンヒント:ナビゲーションバーはリンクだけである必要はありません。「見積もりを取得」または「デモを予約」ボタンを追加し、専用のランディングページにリンクすることで、ヘッダーをコンバージョンツールに変えることができます。CTAをすべてのページで表示できるようにするだけで、リードフォームの送信数が2倍になったサイトを見たことがあります。

ステップ5.カスタムWordPressテーマを公開する

WordPressメニューとヘッダーテンプレートを編集した後、変更を公開する準備ができました。テーマビルダーページでSeedProdテーマを有効にするトグルを見つけて、「オン」の位置に切り替えます。

WordPressナビゲーションの変更を公開するためのSeedProdテーマトグルを有効にする

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

SeedProdを使用してWordPressサイトに表示されたカスタムナビゲーションバー

方法2.プラグインなしでWordPressメニューを編集するにはどうすればよいですか?

現在のテーマを維持したい場合は、WordPressメニューエディターがダッシュボードに組み込まれています。追加のプラグインは必要ありませんが、スタイリングオプションはテーマによって異なります。

重要:この方法はクラシックテーマのみで機能します。ダッシュボードに外観 » メニューが表示されない場合、サイトはおそらくブロックテーマ(Twenty Twenty-Fourなど)を実行しています。ブロックテーマのユーザーは、代わりに外観 » エディターに移動し、ナビゲーションセクションを探してください。

ステップ1.[外観] » [メニュー]に移動します

WordPressダッシュボードで、外観 » メニューに移動します。既にメニューがある場合は、上部のドロップダウンから選択します。ない場合は、新しいサイトメニューの名前を入力し、メニューを作成をクリックします。

ステップ2.ナビゲーションメニューに項目を追加します

新しい項目を追加するには、左側のパネルからページを選択し、メニューに追加をクリックします。投稿、カテゴリ、カスタムリンク、またはタグを展開して含めることもできます。

WordPressメニューにページや投稿を追加する

ステップ3.メニュー項目を並べ替えます

項目を追加した後、希望の順序にドラッグアンドドロップします。リストの上部にある項目がヘッダーメニューに最初に表示されます。並べ替え後にメニューを保存をクリックして変更を保存してください。

ステップ4.ドロップダウン(サブメニュー)項目を作成します

ナビゲーションメニューにドロップダウンを作成するには、メニュー項目を別の項目の下に少し右にドラッグします。インデントされると、WordPressはそれをサブメニューとして認識します。親項目がトップレベルリンクになり、訪問者がホバーするとインデントされた項目がドロップダウンに表示されます。

ステップ5.メニュー項目を削除します

項目を削除するには、その横にある矢印をクリックして設定を展開し、削除をクリックします。これにより、ページをサイトから削除せずにナビゲーションメニューから削除されます。

ステップ6.表示場所を設定して保存します

ヘッダーメニューの表示場所は、メニュー設定 > 表示場所で選択します。オプションはテーマによって異なり、以下が含まれる場合があります:

  • プライマリメニュー
  • セカンダリメニュー
  • オフキャンバスメニュー
  • ユーザーアカウントメニュー
  • フッターメニュー
WordPressメニューの表示場所を変更する

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

WordPressの更新されたナビゲーションバーの例

よくある質問

既存のページを失うことなく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を使い始めましょう。

お読みいただきありがとうございます!ご意見をお聞かせいただければ幸いですので、ビジネスを成長させるための役立つアドバイスやコンテンツについては、お気軽にYouTubeXFacebookで会話にご参加ください。

著者アバター
ステイシー・コリン コンテンツマーケティングスペシャリスト
Stacey Corrinは、WordPress、SEO、デジタルマーケティングに関する執筆経験15年以上の認定コンテンツマーケティングおよび検索スペシャリストです。彼女はSeedProdとRafflePressのコンテンツを管理しており、自身が積極的に使用しテストしているツールや戦略を取り上げています。

開示: 当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、手数料が発生する可能性があることを意味します。当社は、読者に価値をもたらすと信じる製品のみを推奨しています。

[weglot_switcher]
ChatGPTまたはClaudeとチャットして、このWordPressサイトを運営しましょう。無料プラグインです。 無料で試す