WordPressメニューのカスタマイズと編集方法（簡単な4つの方法） 

あなたのメニューはあなたにとっては問題なく見えます。しかし、訪問者は間違ったページに着陸したり、諦めて離れてしまったりします。

リンクが意図した場所を指していないのかもしれません。デフォルトのスタイルが背景に溶け込み、ブランドに合っていないのかもしれません。または、新しいページを公開したばかりで、レイアウトを壊さずにメニューに追加する方法がわからないのかもしれません。

私は15年以上WordPressに取り組んできましたが、メニューは単純に聞こえても、実際に変更しようとすると難しくなるものの1つです。このガイドでは、WordPressメニューの編集方法（項目の追加、並べ替え、削除）と、4つの方法を使用して見た目をカスタマイズする方法を説明します。

WordPressメニューをカスタマイズする最も簡単な方法は、ダッシュボードの[外観]→[メニュー]です。そこでページを追加したり、項目を並べ替えたり、ドロップダウンを作成したり、表示場所を設定したりできます。フォント、色、レイアウトの完全なデザインコントロールには、SeedProdのドラッグアンドドロップビルダーを使用してください。ブロックテーマの場合は、WordPressサイトエディターを使用します。

主なオプションを一覧で比較すると次のようになります。

特徴	組み込みエディター	SeedProd	サイトエディター
視覚的なドラッグアンドドロップ編集	いいえ	はい	部分的に
テーマと連携します	クラシックテーマ	すべて（テーマビルダーがテーマを置き換えます）	ブロックテーマのみ
ドロップダウン（サブメニュー）サポート	はい	はい（WordPressメニューオプション経由）	はい
CSSなしでフォントと色をスタイル設定	めったにない	はい	はい
無料で使用可能	はい（組み込み）	有料（Pro）	はい（組み込み）

デフォルトのエディターを使用してWordPressメニューをカスタマイズするにはどうすればよいですか？

始めるのに最も簡単な方法は、外観 → メニューにある組み込みのメニューエディターです。これはクラシックテーマやほとんどの非ブロックテーマで機能し、追加のプラグインは必要ありません。

私は長年このエディターを使用してきましたが、基本的なナビゲーション構造を構築する最も速い方法であることに変わりはありません。

注意：ダッシュボードに外観 → メニューが表示されない場合は、サイトでブロックテーマ（Twenty Twenty-Fiveなど）が実行されています。代わりにサイトエディターの方法にスキップしてください。

ステップ1. 新しいメニューを作成する

WordPressダッシュボードから外観 → メニューに移動します。上部にある「メインメニュー」のようなメニュー名を入力し、メニューを作成をクリックします。

すでにメニューがある場合は、代わりにドロップダウンから選択してください。これにより、正しいメニューを編集し、誤って新しいメニューを作成することを防ぎます。

ステップ2. ページ、投稿、またはカスタムリンクを追加する

左側で追加したいページまたは投稿にチェックを入れ、メニューに追加をクリックします。左側のパネルを展開すると、カテゴリ、タグ、またはカスタムリンクテキストを持つ任意のURLを含めることもできます。

ステップ3.項目の並べ替えとドロップダウンメニューの作成

項目を追加したら、ドラッグアンドドロップで希望の順序に並べ替えます。リストの一番上にある項目がメニューに最初に表示されます。

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

ステップ4.メニュー項目の削除

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

ステップ5.表示場所の割り当て

下にスクロールしてメニュー設定で、表示場所をチェックします。

オプションはテーマによって異なり、以下が含まれる場合があります：

• プライマリメニュー
• セカンダリメニュー
• オフキャンバスメニュー
• ユーザーアカウントメニュー
• フッターメニュー

ステップ6.メニューの保存

メニューを保存をクリックすると、選択した場所にメニューが表示されます。

この方法では構造と順序を処理しますが、スタイリングの制御は限定的です。フォント、色、レイアウトの完全なデザイン制御については、以下のSeedProdの方法を試してください。

ページビルダーでWordPressメニューをカスタマイズするにはどうすればよいですか？

メニューの外観をより細かく制御するには、ページビルダープラグインを使用するのが良い方法です。この例ではSeedProdを使用しますが、他のページビルダーでも同様の原則が適用されます。

SeedProdはWordPress用のドラッグアンドドロップウェブサイトビルダーで、コードに触れることなくナビゲーションを完全に視覚的に制御できます。すべての変更をライブで確認できます。フォント、色、メニューリンク、ボタン、レイアウトはすべてリアルタイムで調整されます。

SeedProdを使用すると、カスタムページ、メニュー、およびテーマ全体を1か所で作成できます。カスタムメニューをウェブサイトのフッター、ヘッダー、サイドバー、およびページコンテンツに追加するためにも使用できます。

以下では、すべてのページに表示されるサイト全体のナビゲーションバーを編集するためにテーマビルダーを使用します。単一のスタンドアロンページにのみメニューが必要な場合は、代わりにランディングページを作成し、同じナビゲーションメニューブロックをヘッダーにドラッグできます。

ステップ1：SeedProdのインストール

まず、SeedProdプラグインをダウンロードし、WordPressサイトにインストールしてアクティブ化します。

この手順のヘルプについては、SeedProdのインストール方法に関するガイドに従ってください。

次に、SeedProd » 設定に移動し、ライセンスキーを貼り付けて、キーを確認をクリックしてテーマビルダー機能をロック解除します。

ステップ2.テーマビルダーを開き、テンプレートを選択する

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

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

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

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

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

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

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

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

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

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

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

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

ステップ4.ナビゲーションメニューブロックを編集する

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

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

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

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

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

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

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

メニューを垂直または水平レイアウトで表示することもできます。垂直デザインは、サイドバーウィジェットエリアやフッターメニューの場所に最適です。

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

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

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

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

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

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

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

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

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

WordPressサイトエディターを使用してメニューをカスタマイズするにはどうすればよいですか？

最初の2つの方法は、使用しているテーマに関係なく、どのウェブサイトにも機能します。ただし、Twenty Twenty-FiveのようなブロックベースのWordPressテーマを使用している場合は、WordPressサイトエディターを使用してメニューをカスタマイズすることをお勧めします。

注意：この方法は、すべてのテーマで機能するわけではなく、メニューのすべての部分をカスタマイズできるわけではありません。

サイトエディターを開くには、WordPressダッシュボードからAppearance » Editorに移動します。

次の画面で、Patternsタブをクリックします。WordPress 6.5以降では、ヘッダーオプションがすぐに見つからない場合は、Patterns → Template Partsの下を確認してください。

そこから、Headerオプションをクリックし、ヘッダーテンプレートを選択します。

ここでは、ドラッグアンドドロップでメニューの位置を並べ替えたり、メニューから項目を削除したりできます。

鉛筆アイコンをクリックして、メニューのスタイルを編集することもできます。

例えば、メニューの背景色、フォント、パディング、マージン、境界線などを調整できます。

下にスクロールして詳細タブに移動すると、カスタムCSSクラスを入力できます。

ヘッダーボタンのような別のメニューオプションを追加するには、ブロックを追加アイコンをクリックします。

これで、ブロックを検索し、クリックしてメニューに追加し、他のWordPressブロックと同様にカスタマイズできます。

メニューの設定とカスタマイズに満足したら、保存ボタンをクリックします。

これで、サイトにアクセスしてカスタムメニューを確認できます。

プラグインなしでWordPressにカスタムメニューを追加するにはどうすればよいですか？

ページビルダープラグインを設定したくない場合や、WordPressブロックテーマを持っていない場合は、コードを使用してカスタムナビゲーションメニューを追加できます。

これには、WPCodeのようなWordPressコードスニペットプラグインの使用をお勧めします。これは、functions.phpファイルのようなWordPressのコアファイルを編集せずに、カスタムコードをWordPressに追加する最も安全で簡単な方法です。

これを行うには、無料のWPCodeプラグインをインストールし、WordPressダッシュボードからコードスニペット » スニペットを追加に移動します。

このページには、数回クリックするだけでサイトに追加できる既製のスニペットが表示されます。

このチュートリアルでは、独自のコードスニペットを作成したいので、「カスタムコードを追加」にマウスカーソルを合わせ、「スニペットを使用」ボタンをクリックします。

次に、スニペットのタイトルを入力し、「コードタイプ」ドロップダウンを開き、PHPスニペットをクリックします。

次に、次のスニペットをコードエディターに貼り付けます。

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

このスニペットは、テーマに新しいメニューロケーション「My Custom Menu」を追加します。

それが完了したら、挿入オプションまでスクロールし、「自動挿入」メソッドを選択して、サイト全体にスニペットを追加します。

そこから、「場所」ドロップダウンメニューを開き、すべて実行をクリックします。

次に、画面の上部までスクロールし、「非アクティブ」トグルをクリックして「アクティブ」に変更します。

最後に、保存をクリックしてスニペットをライブにします。

次に、外観 » メニューに移動し、「表示場所」エリアを確認します。

このエリアに、メニュー項目を追加できる新しい「My Custom Menu」オプションが表示されるはずです。

次のステップは、カスタムメニューをWordPressテーマに追加することです。

コードをテーマのテンプレートファイルに追加することで、サイトのどこにでもカスタムナビゲーションメニューを表示できます。

単純に外観 » テーマファイルエディターに移動します。

次に、右側のメニューで、メニューを追加したいテンプレートを見つけます。たとえば、ウェブサイトのヘッダーなどです。

次に、wp_nav_menu関数を追加し、カスタムメニューの名前を指定する必要があります。たとえば、次のコードスニペットでは、テーマのヘッダーにMy Custom Menuを追加しています。

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

コードを追加したら、ファイルを更新ボタンをクリックして変更を保存します。

これでサイトにアクセスすると、カスタムメニューが機能しているのがわかります。ただし、単純な箇条書きリストとして表示されることに注意してください。

メニューをWordPressテーマやブランディングによく一致するようにスタイル設定するには、カスタムCSSコードをサイトに追加できます。

これを行うには、外観 » カスタマイズに移動し、WordPressカスタム機能で追加CSSをクリックします。

これにより、カスタムCSSを入力できるエディターが開きます。

これで、テーマテンプレートに追加したCSSクラスを使用してメニューをスタイル設定できます。私の例では、.custom_menu_classです。

次のコードでは、マージンとパディングを追加し、テキストの色を黒に設定し、メニューを水平レイアウトで配置しています。

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
    display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
}

div.custom-menu-class a {
    color:#000;
}

WordPressカスタム機能は自動的に更新されるため、メニューが新しいスタイルでどのように見えるかを確認できます。変更に満足したら、公開してライブにします。

よくある質問

WordPressのナビゲーションメニューをカスタマイズするにはどうすればよいですか？

最も簡単な方法は、WordPressダッシュボードで外観 → メニューに移動することです。追加したいページまたは投稿を追加し、メニューをプライマリメニューなどの表示場所に割り当て、メニューを保存をクリックします。フォント、色、レイアウトのデザインをより細かく制御するには、SeedProdのドラッグアンドドロップビルダーまたはブロックテーマ用のWordPressサイトエディターを使用してください。

WordPressウェブサイトのナビゲーションメニューを編集するにはどうすればよいですか？

WordPressダッシュボードの「外観」→「メニュー」に移動し、編集したいメニューを選択します。項目を追加または削除し、ドラッグして並べ替え、[メニューを保存]をクリックします。メニューの編集は、ページや投稿には影響せず、ナビゲーションに表示されるリンクのみを制御します。ブロックテーマを使用している場合は、「外観」→「エディター」でWordPressサイトエディターを使用して、ナビゲーションブロックを直接編集します。

WordPressの外観の下にメニューオプションが見つからないのはなぜですか？

「外観」の下に「メニュー」が表示されない場合は、サイトでブロックテーマ（Twenty Twenty-FourやTwenty Twenty-Fiveなど）が実行されています。ブロックテーマは、従来のメニュー画面ではなく、サイトエディターでナビゲーションを管理します。「外観」→「エディター」に移動し、「ナビゲーション」セクションを探してサイトメニューを編集します。または、SeedProdはどのテーマでも機能し、サイトエディターなしでナビゲーションを完全に視覚的に制御できます。

プラグインなしでWordPressメニューをカスタマイズできますか？

はい。WordPressには、プラグインなしで機能する外観 → メニューの組み込みメニューエディターが含まれています。ブロックテーマの場合は、WordPressサイトエディターを使用してください。カスタムメニューの場所を追加するには、WPCodeのようなコードプラグインを使用してPHPスニペットを挿入します。ただし、スタイリングはテーマがサポートするものに限定されるため、CSSを記述せずにフォント、色、またはレイアウトを変更したい場合は、SeedProdのようなビジュアルビルダーの方が簡単な方法です。

WordPressでドロップダウンメニューを追加するにはどうすればよいですか？

外観 → メニューで、メニュー項目を親項目の下に少し右にドラッグします。WordPressはそれをインデントし、ドロップダウンとして扱います。最大3レベルまでネストできます。ドロップダウンの視覚的なスタイルを制御するには、SeedProdのナビゲーションメニューブロックに組み込みのホバー効果、色、レイアウトオプションが含まれています。

WordPressメニューをスティッキー（スクロール時に固定）にするにはどうすればよいですか？

固定ナビゲーションバーは、訪問者がページを下にスクロールしても常に表示されます。SeedProdでは、テーマビルダーでヘッダーテンプレートを開き、ヘッダー行をクリックして、左側の設定パネルで「固定ヘッダー」オプションを探します。それをオンにして保存します。WordPressの組み込みメニューエディターの場合、固定動作はテーマによって異なります。多くのテーマには、カスタマイザー（外観 → カスタマイズ）に固定ヘッダーオプションが含まれています。お使いのテーマに含まれていない場合は、プラグインまたはカスタムCSSを追加する必要があります。

WordPressナビゲーションのヒントをもっと見る

WordPressナビゲーションのデザインを完全に制御したい場合は、SeedProdを使用すると、コードに触れることなくカスタムメニュー、ヘッダー、レイアウトを簡単に作成できます。今すぐSeedProdを入手

• WordPressでモバイルメニューを編集する方法（初心者ガイド）
• メニューにWooCommerceショッピングカートアイコンを追加する方法
• ナビゲーションなしのランディングページの作成方法（簡単な方法）

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