WordPressテーマにカスタムナビゲーションメニューを追加する方法

WPBeginnerでは、数え切れないほどの読者がWordPressサイトをカスタマイズして、ユーザーエクスペリエンスを向上させ、ブランディングを強化し、コンバージョンを促進するのを支援してきました。そして、適切に行われた場合、ユニークなナビゲーションメニューはエンゲージメントを高め、人々をより長くサイトに滞在させるのに役立つことを私たちは見てきました。

問題は、すべての WordPress テーマにナビゲーションメニューを表示できる設定済みの場所があるため、これを変更するのは難しいということです。これは特に初心者にとっては、テーマファイルを変更するのは繊細なプロセスであるため、当てはまります。

ブロックテーマを使用している場合、フルサイトエディターでこれを行うことができます。しかし、私たちの経験では、すべてのテーマタイプで機能するより良いオプションがあります。

例えば、高度なカスタマイズを行いたい場合は、SeedProd のような強力なページビルダーを使用できます。または、カスタムコードを簡単に使用する方法を探している場合は、WPCode が断然最良の選択肢です。

この記事では、WordPressテーマの任意の領域にカスタムナビゲーションメニューを追加する方法をご紹介します。3つの異なるオプションを順を追って説明しますので、ご自身のニーズに合ったチュートリアルを選択できます。

WordPressテーマにカスタムナビゲーションメニューを追加する理由

ナビゲーションメニューは、ウェブサイトの重要な領域を指すリンクのリストです。これにより、訪問者は興味のあるコンテンツを簡単に見つけることができ、WordPressでのページビューを増やし、直帰率を減らすことができます。

メニューの正確な場所は、WordPress テーマによって異なります。ほとんどのテーマにはいくつかのオプションがあり、異なるメニューを作成して異なる場所に表示できます。

現在のWordPressテーマでメニューを表示できる場所を確認するには、外観 » メニューに移動し、「表示位置」セクションを確認してください。

次の画像は、Astra WordPressテーマでサポートされている場所を示しています。

テーマで「表示場所」としてリストされていない領域にメニューを表示したい場合があります。

これを踏まえて、WordPressテーマの任意の場所にカスタムナビゲーションメニューを追加する方法を見ていきましょう。お好みの方法にジャンプするには、以下のクイックリンクを使用してください。

• 方法1：フルサイトエディターを使用する（ブロックベースのテーマのみ）
• 方法2：ページビルダープラグインを使用する（すべてのテーマで動作します）
• Method 3: Create a Custom Navigation Menu in WordPress Using Code (Advanced)

方法1：フルサイトエディターを使用する（ブロックベースのテーマのみ）

ブロックテーマ（例：ThemeIsle Hestia Pro）を使用している場合、フルサイト編集（FSE）とブロックエディターを使用してカスタムナビゲーションメニューを追加できます。

詳細については、WordPressのフルサイト編集に最適なブロックテーマに関する記事をご覧ください。

この方法はすべてのテーマで機能するわけではなく、メニューのすべての部分をカスタマイズできるわけでもありません。WordPressのテーマに完全にカスタムなメニューを追加したい場合は、代わりにページビルダープラグインを使用することをお勧めします。

ブロックベースのテーマを使用している場合は、外観 » エディター にアクセスしてください。

デフォルトでは、フルサイトエディターにはテーマのホームページテンプレートが表示されますが、ナビゲーションメニューはどのエリアにも追加できます。

利用可能なすべてのオプションを表示するには、「テンプレート」、「パターン」、または「ページ」のいずれかを選択してください。

カスタムナビゲーションメニューを追加したいテンプレート、テンプレートパーツ、またはページをクリックできるようになりました。

WordPressはデザインのプレビューを表示します。このテンプレートを編集するには、小さな鉛筆アイコンをクリックします。

次のステップは、メニューを表示したい領域にナビゲーションブロックを追加することです。

左上隅にある青い「+」ボタンをクリックしてください。

次に、「Navigation」と入力して検索バーに入力します。

「ナビゲーション」ブロックが表示されたら、レイアウトにドラッグアンドドロップするだけです。

次に、ナビゲーションブロックを選択するためにクリックします。

表示したいメニューを作成済みの場合は、ナビゲーションブロックを選択してクリックします。右側のメニューで、「メニュー」の横にある3つの点のアイコンをクリックします。

次に、ドロップダウンからメニューを選択できます。

フルサイトエディター内で、ページ、投稿、カスタムリンクなどを追加してメニューを作成することもできます。新しいメニューに項目を追加するには、「+」アイコンをクリックするだけです。

ここで、投稿またはページを追加し、これらのリンクを新しいタブで開くかどうかを決定するポップアップが表示されます。

WordPressメニューに検索バーを追加したり、ソーシャルメディアアイコンを追加したりすることもできます。ポップアップで、メニューに追加したいブロックを入力し、表示されたら正しいオプションを選択するだけです。

ミニツールバーと右側のメニューの設定を使用して、このブロックを構成できます。これらの手順を繰り返すだけで、メニューにさらに項目を追加できます。

メニューの外観に満足したら、「保存」ボタンをクリックするだけです。

これで、サイトは新しいテンプレートを使用するようになり、訪問者はカスタムナビゲーションメニューと対話できるようになります。

方法2：ページビルダープラグインを使用する（すべてのテーマで動作します）

フルサイトエディターでは、ブロックベースのテーマにメニューを追加できます。ただし、高度で完全にカスタマイズ可能なメニューを任意のWordPressテーマに追加したい場合は、ページビルダープラグインが必要になります。

SeedProdは、ナビゲーションメニューのすべての部分をカスタマイズできる、市場で最高のWordPressページビルダープラグインです。

私たちは、このツールを使用してカスタムナビゲーションメニュー、ランディングページなどを構築する豊富な経験を持っています。詳細については、SeedProdの完全なレビューをご覧ください。

ページに関しては、SeedProdには350以上のプロフェッショナルにデザインされたテンプレートがあり、これらを開始点として使用できます。テンプレートを選択した後、SeedProdの既製のNav Menuブロックを使用して、サイトにカスタムナビゲーションメニューを追加できます。

まず、SeedProdプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

プラグインを有効化すると、SeedProdはライセンスキーを要求します。

この情報は、SeedProdウェブサイトのアカウントで見つけることができます。キーを入力したら、「キーを検証」ボタンをクリックします。

それが完了したら、SeedProd » ランディングページに移動し、「新しいランディングページを追加」ボタンをクリックします。

これで、カスタムページのテンプレートを選択できます。

適切なデザインを見つけるのに役立つように、SeedProdのすべてのテンプレートは、「近日公開」やリード獲得キャンペーンなど、さまざまなキャンペーンタイプに整理されています。SeedProdのテンプレートを使用して、404ページを改善することもできます。

デザインを詳しく見るには、テンプレートの上にマウスカーソルを合わせ、虫眼鏡アイコンをクリックするだけです。

使用したいデザインが見つかったら、「このテンプレートを選択」をクリックします。

すべての画像で「ブラックフライデーセールページ」テンプレートを使用していますが、お好きなテンプレートを使用できます。

テンプレートを選択したら、そのカスタムページの名前を入力します。SeedProd はページのタイトルに基づいて URL を自動的に作成しますが、この URL は好きなものに変更できます。

例えば、検索エンジンがそのページの内容を理解するのに役立つように、関連キーワードを追加することができます。これにより、WordPressのSEOが向上し、検索エンジンがあなたのコンテンツを探しているユーザーにそのページを表示するのに役立ちます。

この情報を入力したら、「保存してページの編集を開始」ボタンをクリックします。

ほとんどのテンプレートには、SeedProdのすべてのページレイアウトのコアコンポーネントであるいくつかのブロックが既に含まれています。

ブロックをカスタマイズするには、ページエディターでクリックして選択するだけです。

左側のツールバーに、そのブロックの設定がすべて表示されます。たとえば、下の画像では、「見出し」ブロック内のテキストを変更しています。

左側のメニューの設定を使用して、テキストの書式設定、配置の変更、リンクの追加などを行うことができます。

「詳細」タブを選択すると、さらに多くの設定にアクセスできます。たとえば、ボックスシャドウを追加したり、CSSアニメーションを追加したりすることで、ブロックを際立たせることができます。

デザインに新しいブロックを追加するには、左側のメニューでブロックを見つけて、ページにドラッグするだけです。ブロックを削除したい場合は、ブロックをクリックして選択し、ゴミ箱アイコンを使用してください。

カスタムナビゲーションメニューを作成したいので、「Nav Menu」ブロックをページにドラッグします。

これにより、デフォルトの「会社概要」項目が1つだけ含まれるナビゲーションメニューが作成されます。

SeedProdエディター内で新しいメニューを作成するか、WordPressダッシュボードで既に作成したメニューを選択できます。

以前作成したメニューを表示するには、「WordPressメニュー」ボタンをクリックします。「メニュー」ドロップダウンを開き、リストから任意のオプションを選択できます。

その後、左側のメニューの設定を使用して、フォントサイズ、テキストの配置などを変更できます。

新しいメニューをSeedProd内で作成したい場合は、「シンプル」ボタンを選択してください。

次に、「アバウト」項目をクリックして展開します。これはSeedProdによってデフォルトで作成されます。

これにより、テキストを変更したり、メニュー項目がリンクする URL を追加したりできるコントロールが開きます。

デフォルトでは、リンクは「dofollow」となり、同じブラウザウィンドウで開きます。「URLリンク」セクションのチェックボックスを使用して、これらの設定を変更できます。

次の画像では、「nofollow」リンクを作成し、新しいウィンドウで開くようにしています。このトピックの詳細については、nofollowリンクの初心者向けガイドをご覧ください。

メニューにさらに項目を追加するには、「新しい項目を追加」ボタンをクリックするだけです。

その後、上記と同じプロセスに従って、これらの各項目をカスタマイズできます。

左側のメニューには、フォントサイズとテキストの配置を変更する設定もあります。

区切り線を作成することもできます。これは、メニューの各項目の間に表示されます。

その後、「詳細設定」タブに切り替えます。ここで、メニューの色、間隔、タイポグラフィ、その他の詳細設定を変更できます。

変更を加えると、ライブプレビューが自動的に更新されるため、さまざまな設定を試して、デザインに何が適しているかを確認できます。

デフォルトでは、SeedProd はモバイルデバイスとデスクトップデバイスで同じメニューを表示します。ただし、モバイルデバイスは通常、デスクトップコンピューターと比較して画面がはるかに小さいです。

これを踏まえて、モバイルデバイスに表示するために別のメニューを作成したい場合があります。例えば、モバイルユーザーが横スクロールする必要がないように、縦長のレイアウトを使用するかもしれません。スマートフォンやタブレットデバイスで表示するリンクの数を減らしたい場合もあります。

モバイル対応のメニューを作成するには、上記と同じ手順でメニューをデザインするだけです。次に、「高度」タブを選択し、「デバイスの表示」セクションをクリックして展開します。

デスクトップで非表示にする」スライダーをオン/オフできるようになりました。

これで、SeedProd はこのメニューをモバイルユーザーにのみ表示します。

カスタムメニューの外観に満足したら、公開する準備ができました。

「保存」の横にあるドロップダウン矢印をクリックし、「公開」を選択するだけです。

これで、WordPressブログにアクセスすると、カスタムナビゲーションメニューが機能しているのがわかります。

方法3：コードを使用してWordPressでカスタムナビゲーションメニューを作成する（上級者向け）

ページビルダープラグインを設定したくない場合は、コードを使用してカスタムナビゲーションメニューを追加できます。テーマの functions.php ファイルにカスタムコードスニペットを追加する方法の説明が記載されたガイドがよく見つかります。

しかし、コードのわずかな間違いでも、一般的なWordPressのエラーが多数発生したり、サイトが完全に壊れたりする可能性があるため、この方法は推奨しません。また、WordPressテーマを更新するとカスタムコードも失われます。

そのため、WPCode の使用をお勧めします。これは、WordPress のコアファイルを編集することなく、カスタムコードを WordPress に追加する最も簡単で安全な方法です。

まず、無料のWPCodeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

有効化したら、WordPressダッシュボードのCode Snippets » Add Snippetに移動してください。

ここには、サイトに追加できる既製のスニペットがすべて表示されます。これには、コメントを完全に無効にする、WordPressが通常サポートしていないファイルタイプをアップロードする、添付ファイルページを無効にするなどのスニペットが含まれます。

カスタムスニペットを作成するには、「カスタムコードを追加（新規スニペット）」にマウスカーソルを合わせ、「+カスタムスニペットを追加」ボタンをクリックします。

次に、画面に表示されるオプションのリストからコードタイプを選択する必要があります。このチュートリアルでは、コードタイプとして「PHPスニペット」を選択してください。

カスタムスニペット作成ページに移動します。

まず、カスタムコードスニペットのタイトルを入力します。これは、WordPressダッシュボードでスニペットを識別するのに役立つものであれば何でも構いません。

それが完了したら、次のスニペットをコードエディターに貼り付けるだけです。

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

これにより、「マイカスタムメニュー」という新しいメニューロケーションがテーマに追加されます。別の名前を使用したい場合は、コードスニペットを調整するだけです。

テーマに複数のカスタムナビゲーションメニューを追加したい場合は、コードスニペットに1行追加するだけです。

例えば、ここではテーマに「My Custom Menu」と「Extra Menu」という2つの新しいメニューロケーションを追加しています。

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

その後、「挿入」オプションまでスクロールします。「自動挿入」メソッドがまだ選択されていない場合は、WPCode がスニペットをサイト全体に追加できるように、「自動挿入」メソッドを選択してください。

次に、「位置」ドロップダウンを開き、「すべてで実行」をクリックします。

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

最後に、「保存」をクリックしてこのスニペットを公開します。

その後、外観 » メニューに移動し、「表示位置」セクションを確認します。

新しい「マイカスタムメニュー」オプションが表示されるはずです。

これで、新しい場所にメニュー項目を追加できます。詳細については、初心者向けのナビゲーションメニューの追加方法に関するステップバイステップガイドを参照してください。

メニューに満足したら、次のステップはWordPressテーマに追加することです。

WordPressテーマにカスタムナビゲーションメニューを追加する

ほとんどのウェブサイトでは、ナビゲーションメニューがヘッダーセクションのすぐ下に表示されます。これは、メニューが訪問者が最初に目にするものの一つであり、サイトロゴまたはタイトルとともに表示されることを意味します。

テーマのテンプレートファイルにコードを追加することで、カスタムナビゲーションメニューを任意の場所に配置できます。

WordPressダッシュボードで、外観 » テーマファイルエディターに移動します。

右側のメニューで、メニューを追加したいテンプレートを選択します。たとえば、カスタムナビゲーションメニューをウェブサイトのヘッダーに表示したい場合は、通常header.phpファイルを選択します。

適切なテンプレートファイルを見つける方法については、WordPressテーマの編集対象ファイルの見つけ方に関するガイドをご覧ください。

ファイルを選択した後、wp_nav_menu関数を追加し、カスタムメニューの名前を指定する必要があります。

例えば、次のコードスニペットでは、テーマのヘッダーに「My Custom Menu」を追加しています。

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

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

これで、サイトにアクセスすると、カスタムメニューが機能しているのがわかります。

デフォルトでは、メニューは通常の箇条書きリストとして表示されます。

カスタムナビゲーションメニューは、カスタムCSSコードを追加することで、WordPressテーマや会社のブランディングによりよく一致するようにスタイル設定できます。

これを行うには、外観 » カスタマイズに移動します。

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ナビゲーションメニューのスタイル設定方法。

Expert Guides: WordPress ナビゲーションメニューでさらに多くのことを行う

WordPressを使用すると、あらゆる種類の役立つ魅力的なメニューを作成できます。それを念頭に置いて、ナビゲーションメニューをさらに活用するための専門家によるガイドをいくつかご紹介します。

• WordPressでナビゲーションメニューに画像アイコンを追加する方法
• WordPress でメニューに条件付きロジックを追加する方法（ステップバイステップ）
• WordPressテーマにメニューの説明を追加する方法
• WordPressにフルスクリーンレスポンシブメニューを追加する方法
• WordPressサイトにメガメニューを追加する方法（ステップバイステップ）

この究極のガイドが、WordPressでカスタムナビゲーションメニューを追加する方法を学ぶのに役立ったことを願っています。また、WordPressヘッダーメニューにボタンを追加する方法やWordPressでメニュー項目をハイライトする方法に関するガイドも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。