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

WPBeginnerでは、ユーザーエクスペリエンスを向上させ、ブランディングを強化し、コンバージョンを促進するために、数え切れないほどの読者がWordPressサイトをカスタマイズするお手伝いをしてきました。そして、ナビゲーションメニューを適切に作成することで、エンゲージメントを高め、サイトを長く利用してもらうことができることを実感してきました。

問題は、WordPressテーマはすべてナビゲーションメニューを表示できる場所が決まっているため、これを変更するのが厄介だということだ。テーマファイルを修正するのは繊細な作業なので、初心者の場合は特にそうだ。

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

例えば、高度なカスタマイザーが必要であれば、SeedProdのような強力なページビルダーを使うことができます。また、カスタマイザーをシンプルに使いたいのであれば、WPCodeが断然おすすめです。

この投稿では、WordPressテーマの任意のエリアにカスタムナビゲーションメニューを追加する方法を紹介します。あなたのニーズに合ったチュートリアルを選択できるように、3つの異なるオプション設定について説明します。

なぜWordPressテーマでカスタムナビゲーションメニューを追加するのですか？

ナビゲーションメニューは、サイトの重要なエリアを指すリンクのリストです。訪問者が興味深いコンテンツを見つけやすくすることで、WordPressのページビューを増やし、直帰率を下げることができます。

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

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

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

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

それでは、WordPressテーマのどのエリアにもカスタムナビゲーションメニューを追加する方法を見ていきましょう。以下のクイックリンクからお好きな方法にジャンプしてください：

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

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

詳しくはWordPressフルサイト編集テーマの投稿をご覧ください。

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

ブロックベースのテーマを使っている場合は、外観“エディターへ。

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

利用可能なオプションをすべて見るには、「テンプレート」、「パターン」、「ページ」のいずれかを選択すればよい。

カスタムナビゲーションメニューを追加したいテンプレート、テンプレートパーツ、ページをクリックしてください。

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

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

左上の青い「＋」ボタンをクリックする。

では、検索バーに「ナビゲーション」と入力してください。

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

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

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

ドロップダウンメニューからメニューを選択することができます。

もう一つのオプションは、ページ、投稿、カスタムリンクなどを追加して、フルサイトエディター内でメニューを構築することです。新規メニューに項目を追加するには、’+’アイコンをクリックするだけです。

このポップアップを開き、任意の投稿やページを追加し、これらのリンクを新しいタブで開くかどうかを決定します。

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

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

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

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

方法2：ページビルダー・プラグインを使う（すべてのテーマで使える）

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

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

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

ページに関しては、SeedProdには350以上のプロがデザインしたテンプレートが用意されています。テンプレートを選択した後、SeedProdの既製のナビゲーションメニューブロックを使用してサイトにカスタマイザーナビゲーションメニューを追加することができます。

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

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

この情報は、SeedProdサイトのアカウントで確認できます。キーを入力した後、「Verify Key」ボタンをクリックしてください。

それができたら、SeedProd ” ランディングページに行き、’新規ランディングページを追加’ボタンをクリックします。

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

適切なデザインを見つけるために、SeedProdのテンプレートはすべて、近日公開キャンペーンやリードスクイーズキャンペーンなど、さまざまなキャンペーンタイプに分類されています。SeedProdのテンプレートを使って404ページを改善することもできます。

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

使いたいデザインが見つかったら、「Choose This Template」をクリックする。

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

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

例えば、検索エンジンがページの内容を理解しやすくするために、関連キーワードを追加することもできます。これはWordPressのSEOを改善し、検索エンジンがあなたのようなコンテンツを探している人にページを表示するのに役立ちます。

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

ほとんどのテンプレートはすでにいくつかのブロックを含んでおり、これらはすべてSeedProdページレイアウトのコアコンポーネントです。

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

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

左側のメニューにある設定を使って、テキストの書式設定、配置の変更、リンクの追加などができます。

高度な」タブを選択すると、さらに多くの設定にアクセスできるようになります。例えば、ボックスシャドウや CSSアニメーションを追加して、ブロックを本当に目立たせることができます。

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

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

これにより、初期設定の「About」項目が個別設定されたナビゲーションメニューが作成されます。

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

以前作成したメニューを表示するには、「WordPressメニュー」ボタンをクリックしてください。メニュー’ドロップダウンを開き、リストから任意の設定を選択することができます。

その後、左側のメニューにある設定を使って、フォントサイズや文字揃えなどを変更できる。

SeedProdの中に新しいメニューを作りたい場合は、’Simple’ボタンを選択してください。

次に、SeedProdが初期設定として作成する「About」項目をクリックして展開します。

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

初期設定では、リンクは「dofollow」になり、同じブラウザーウィンドウで開きます。これらの設定は、「URLリンク」セクションのチェックボックスを使って変更できます。

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

メニューに項目を追加するには、「新規項目を追加」ボタンをクリックします。

その後、上記と同じプロセスを踏むことで、各項目をカスタマイズすることができる。

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

メニューの各項目の間に表示される区切りも作成できる。

その後、’Advanced’タブに切り替えてください。ここでは、メニューの色、間隔、タイポグラフィ、その他の高度なオプションを変更することができます。

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

初期設定では、SeedProdはモバイル端末とデスクトップ端末で同じメニューを表示します。しかし、一般的にモバイル端末はデスクトップコンピューターに比べて画面が非常に小さいです。

その点を考慮すると、モバイル端末で表示するメニューを区切った方がいいかもしれません。例えば、モバイルユーザーが横にスクロールする必要がないように、縦長のレイアウトにするとよいでしょう。また、スマートフォンやタブレット端末では、表示するリンクを少なくするのもよいでしょう。

モバイル対応メニューを作成するには、上記と同じ手順に従ってメニューをデザインするだけです。次に、’詳細設定’タブを選択し、’端末の表示’セクションをクリックして展開します。

デスクトップに非表示」スライダーの切り替えができるようになりました。

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

カスタムメニューの見た目に満足したら、公開しましょう。

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

これで、WordPressブログにアクセスすると、カスタムナビゲーションメニューが表示されます。

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

ページビルダープラグインをセットアップしたくない場合は、コードを使ってカスタマイザーナビゲーションメニューを追加することができます。テーマのfunctions.phpファイルにカスタムコードスニペットを追加する方法を説明したガイドがよく見つかるだろう。

しかし、この方法はお勧めしません。コードにちょっとしたミスがあっただけでも、WordPressでよくあるエラーを引き起こしたり、サイトが完全に壊れてしまったりする可能性があるからです。また、WordPressテーマを更新すると、カスタムコードも失われてしまいます。

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

最初に行う必要があるのは、無料のWPCodeプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、WordPressダッシュボードのCode Snippets “ Add Snippetにアクセスしてください。

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

独自のスニペットを作成するには、「カスタムコードを追加」にマウスオーバーし、「スニペットを使用」をクリックします。

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

その後、「コードタイプ」のドロップダウンを開き、「PHPスニペット」を選択する。

それができたら、以下のスニペットをコードエディターに貼り付けるだけだ：

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

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

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

例えば、ここでは「マイカスタムメニュー」と「エクストラメニュー:」という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がサイト全体にスニペットを追加します。

その後、『場所』のドロップダウンを開き、『どこでも実行』をクリックする。

次に、画面を一番上までスクロールし、「Inactive」トグルをクリックして「Active」に変更します。

最後に、「保存」をクリックして、このスニペットをライブにする。

その後、外観 ” メニューを開き、「表示場所」エリアを見てください。

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

これで、新しい場所にメニュー項目を追加することができます。詳しくは、初心者のためのナビゲーションメニューの追加方法のステップバイステップガイドをご覧ください。

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

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

ほとんどのサイトでは、ヘッダーセクションの直下にナビゲーションメニューが表示されています。つまり、メニューはサイトのロゴやタイトルと並んで、訪問者が最初に目にするもののひとつなのです。

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

WordPressのダッシュボードで、外観 ” テーマファイルエディターに進みます。

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

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

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

例えば、以下のコードスニペットでは、テーマのヘッダーに「マイカスタムメニュー」を追加しています：

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

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

さて、あなたのサイトにアクセスすると、カスタムメニューが表示されます。

初期設定では、メニューは箇条書きリストとして表示されます。

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

これを行うには、外観 ” カスタマイザーに進みます。

WordPressのテーマカスタマイザーで、「Additional 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のナビゲーションメニューをもっと活用しよう

WordPressでは、便利で魅力的なメニューをすべて作成することができます。ここでは、ナビゲーションメニューをさらに活用するためのエキスパートガイドをご紹介します：

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

WordPressでカスタマイザーナビゲーションメニューを追加する方法をご紹介しました。WordPressのヘッダーメニューにボタンを追加する方法や、WordPressでメニュー項目をハイライトする方法についてのガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.