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

WordPressテーマにカスタムナビゲーションメニューを追加したいですか？

すべてのテーマにはナビゲーションメニューを表示できる場所が設定されています。しかし、サイトの他のエリアにメニューを追加する必要がある場合もあります。

この投稿では、WordPressテーマの任意のエリアにカスタムナビゲーションメニューを追加する方法を紹介する。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

注：コードを書かずにカスタマイザーナビゲーションメニューを作成できるSeedProdの無料版もあります。しかし、このガイドでは、SeedProd Proを使用します。SeedProd Proには、ナビゲーションメニューブロックに加えて、追加のテンプレートと高度な機能があります。

プラグインを有効化した後、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サイトへの訪問者を追跡する方法もご覧ください。

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.