WordPress でメニューに条件付きロジックを追加する方法（ステップバイステップ）

WordPress のメニューがもっと賢くなればいいと思ったことはありませんか？たとえば、ログインしているユーザーに異なるナビゲーション オプションを表示したり、特定のページにのみ特定のメニュー項目を表示したりしたい場合があります。

デフォルトでは、WordPressは誰にでも同じ静的なメニューを表示するため、サイトが一般的で役に立たないと感じられる可能性があります。私たちは、このまさにこの課題に直面した多くの異なるウェブサイトオーナーと協力してきました。

幸いなことに、条件付きメニューはユーザーエクスペリエンスを完全に変えることができます。

WordPressのナビゲーションがさまざまな訪問者やコンテキストに適応すると、人々は必要なものをより速く見つけることができます。そして、ビジネスにとって最も重要なアクションへとユーザーを誘導できます。

このガイドでは、WordPress メニューに条件付きロジックを追加する方法を共有します。ユーザーの役割、特定のページ、または選択したその他の基準に基づいて変化する動的なナビゲーションを作成する方法を学びます。

WordPressでメニューに条件付きロジックを追加する理由

ナビゲーション メニューはウェブサイトに構造を与え、訪問者が探しているものを見つけるのに役立ちます。

デフォルトでは、あなたのWordPressウェブサイトは、すべてのユーザー、すべての投稿、すべてのページに同じナビゲーションメニューを表示します。

ただし、ウェブサイト上の異なるユーザーや異なるページに異なるメニューを表示したい場合があります。

条件付きロジックを使用すると、さらに進んで、ログインユーザー向けのカスタムメニューを作成できます。さまざまな種類のサイトでのユースケースの例をいくつかご紹介します。

• オンラインストア – 顧客の閲覧履歴や購入履歴に基づいて、商品や特別オファーを強調表示します。
• WordPress 会員サイト – ログインしている会員のみに限定ページやリソースを表示します。
• オンライン学習プラットフォーム – 学習者の進捗状況に応じて、異なるコースカテゴリやレッスンを表示します。

WordPressのメニューアクセス制御のようなものだと考えてください。💡

これを踏まえ、WordPressメニューに条件付きロジックを追加する方法を説明します。このチュートリアルで取り上げるトピックは以下の通りです。

• Creating New Navigation Menus in WordPress
• Showing a Different Menu to Logged-In Users in WordPress
• FSEを使用してログインユーザーに異なるメニューを表示する
• Showing a Different WordPress Menu Depending on User Role
• Showing a Different Menu for Different Pages in WordPress
• Hiding the Navigation Menu on Landing Pages in WordPress
• 条件付きメニューに関するよくある質問
• 関連記事: WordPress ナビゲーション メニューでさらに多くのことを行う

準備はいいですか？始めましょう。

WordPressで新しいナビゲーションメニューを作成する

最初の手順は、WordPressに表示したい追加のナビゲーションメニューを作成することです。その後、条件付きロジックを使用して、各メニューが表示されるタイミングを決定できます。

ここから、クラシックエディターとブロックエディターの両方でWordPressに条件付きメニューを追加する方法を説明します。

クラシックエディターを使用してWordPressで新しいナビゲーションメニューを作成する

この方法はクラシックテーマのユーザーに有効です。

新しいナビゲーションメニューを作成するには、WordPressダッシュボードの 外観 » メニュー ページにアクセスしてください。すでにウェブサイトで全ユーザーが使用しているナビゲーションメニューがある場合は、それをデフォルトメニューにすることができます。

次に、「新しいメニューを作成」リンクをクリックして新しいメニュー項目を作成します。たとえば、ログインユーザーに表示するメニューと、特定のWordPressページまたはカテゴリに表示するメニューを作成できます。

画面の左側には、ウェブサイトのページリストが表示されます。メニューに追加したいページにチェックボックスを入れ、「メニューに追加」ボタンをクリックするだけです。

画面右側のメニュー項目をドラッグアンドドロップして並べ替えることもできます。

ページをさらに下にスクロールすると、メニューを表示する場所を選択できます。ただし、このメニューに場所を割り当てる必要はありません。次のステップで行います。

変更を保存するには、「メニューを保存」ボタンをクリックすることを忘れないでください。

メニューの作成に関する詳細については、WordPressでナビゲーションメニューを追加する方法に関する初心者向けガイドをご覧ください。 WordPressでナビゲーションメニューを追加する方法。

FSEを使用してWordPressで新しいナビゲーションメニューを作成する

ブロックテーマでフルサイト編集 (FSE)を使用して新しいナビゲーションメニューを作成するには、まずWordPressダッシュボードから外観 » エディターに移動する必要があります。

サイトに入ったら、「ナビゲーション」タブをクリックして展開できます。このガイドではTwenty-Twenty Threeテーマを使用しています。

次に、「ナビゲーション」ラベルの横にある「編集」をクリックします。

これにより、フルサイトエディターが画面に表示されます。

ここから、残りは「+」アイコンをクリックしてナビゲーションメニュー項目を追加するだけです。すると、オプションを選択できるドロップダウンメニューが表示されるプロンプトが表示されます。

より詳細な手順については、WordPressでナビゲーションメニューを追加する方法（初心者ガイド）に関するガイドをご覧ください。WordPressでナビゲーションメニューを追加する方法。

WordPress でログインユーザーに異なるメニューを表示する

サイトにログインしているかどうかによって、ユーザーに異なるナビゲーションメニューを表示することは、しばしば役立ちます。

例えば、ログインしていないユーザーのためにログインおよび登録リンクを含め、ログインしているユーザーのためにログアウトリンクをメニューに追加できます。

WooCommerce ストアを実行している場合、一般公開からは非表示になっている商品を顧客向けに含めることができます。

クラシックエディターを使用してログインユーザーに異なるメニューを表示する

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

有効化したら、外観 » メニュー に移動し、「メニューの場所」タブに切り替えます。

ここから、利用可能なメニューの位置と現在表示されているメニューのリストが表示されます。これらは、使用している WordPress テーマ によって異なります。

例えば、私たちのデモウェブサイトでは、「プライマリメニュー」の場所が「メインメニュー」というタイトルのナビゲーションメニューを表示していることが示されています。

「+ 条件付きメニュー」リンクをクリックし、ドロップダウンメニューから別のメニューを選択することで、特定の条件が一致した場合に別のメニューを表示するようにプラグインに指示できます。

このチュートリアルでは、「ログインユーザーメニュー」を選択します。

次に、「+ 条件」リンクをクリックする必要があります。

これにより、選択できる条件のリストが表示されるポップアップが表示されます。

「ユーザーログイン中」オプションの横にあるチェックボックスをオンにしてから、「保存」ボタンをクリックするだけです。

これで、ウェブサイトにアクセスして、ログイン中のユーザーメニューが機能していることを確認できます。ウェブサイトからログアウトすると、他のすべてのユーザーに表示されるナビゲーションメニューを確認できます。

より詳細な手順や、コードを使用してこれを行う方法については、WordPressでログインユーザーに異なるメニューを表示する方法に関するガイドをご覧ください。

FSEを使用してログインユーザーに異なるメニューを表示する

ブロックテーマを使用している場合は、Conditional Blocksプラグインが必要です。まず、プラグインをインストールして有効化しましょう。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

有効化したら、外観 » エディターに移動してFSE機能を開くことができます。次に、「パターン」をクリックし、「すべてのテンプレートパーツ」をクリックします。

フッター、ヘッダー、コメントなど、すべてのテンプレートパーツが表示されるはずです。「ヘッダー」セクションの3つのドットをクリックし、「編集」を選択しましょう。

これにより、ブロックエディターにリダイレクトされます。

次に、条件を追加するためにナビゲーションメニューブロックをクリックする必要があります。

その後、右側のパネルにある「ブロック」タブに切り替えてカスタマイズを開始してください。

「ブロック」タブを下にスクロールすると、「条件付きブロック」セクションが表示されます。カスタマイズオプションを開くには、それをクリックするだけです。

次に、「表示設定を編集」ボタンをクリックしてください。

選択したナビゲーションメニューの条件を設定できるポップアップウィンドウが表示されます。

ここで、「条件」ドロップダウンを開き、「ユーザーログイン中」オプションを選択できます。

右上隅にある「X」ボタンをクリックしてウィンドウを閉じます。

その後、「条件付きブロック」セクションに条件が追加されているのが見えるはずです。ナビゲーションメニューを更新するために「保存」をクリックしてください。

さて、あなたのウェブサイトにアクセスすると、ログアウトユーザーとログインユーザーでは次のような表示になるかもしれません。

ユーザーロールによって異なるWordPressメニューを表示する

ユーザーがログインすると、割り当てられたユーザーロールに応じて、異なるナビゲーションメニューを表示することもできます。

例えば、管理者には追加のメニュー項目を、投稿者にはより限定的な項目を含めることができます。メンバーシップサイトでは、異なるメンバーシップレベルに異なるアクセスレベルを付与することができます。

クラシックエディターを使用してユーザーロールに応じて異なるWordPressメニューを表示する

前のセクションと同様に、 Conditional Menus プラグインをインストールして有効化する必要があります。

次に、**外観 » メニュー** ページに移動し、「管理」タブに切り替えます。

選択したユーザーロールに適した条件付きメニューを追加する必要があります。このチュートリアルでは、「Nav Menu Administrator」メニューを選択します。

その後、「+ 条件」リンクをクリックしてユーザーロールを選択できます。

「ユーザーロール」タブをクリックすると、ウェブサイト上の各ユーザーロールのチェックボックスが表示されます。このメニューを表示するユーザーロールをクリックし、「保存」ボタンをクリックして変更を保存します。

FSE を使用してユーザーロールに応じて異なる WordPress メニューを表示する

FSEでユーザーロールによって異なるメニューを表示するには、Content Controlプラグインを使用します。インストールと有効化にヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

有効化したら、外観 » エディター » パターン » すべてのテンプレートパーツ に移動できます。次に、「ヘッダー」セクションの3つのドットをクリックし、「編集」を選択します。

エディターでは、条件を追加したいナビゲーションメニューを選択できます。

たとえば、「ブログ」ページを購読者限定にしたいと思います。そこで、「ブログ」をクリックしてカスタマイズオプションを開きます。

ここから、右側のパネルに移動し、「ブロックコントロール」セクションの「コントロールを有効にする」スイッチを切り替えます。

次に、「ユーザー ルール」セクションまでスクロールして、条件を設定します。

まず、「WHO CAN SEE THIS CONTENT」ドロップダウンメニューを開き、「Logged In User」を選択します。

次に、「ユーザーロール」ドロップダウンで「一致」を選択できます。「選択されたロール」では、「サブスクライバー」を選択しましょう。

完了したら、「保存」ボタンをクリックできます。

WordPressでページごとに異なるメニューを表示する

WordPressでは、ページごとに異なるメニューを表示できます。

例えば、プライバシーポリシーページに、クッキー通知へのリンクなどの追加メニュー項目を表示することができます。

クラシックエディターを使用してWordPressでページごとに異なるメニューを表示する

これを行うには、Conditional Menus プラグインをインストールして有効化する必要があります。その後、外観 » メニュー » 管理場所に移動します。

適切なナビゲーションメニューを選択した後、「+ 条件」リンクをクリックできます。今回は「ページ」タブをクリックしてください。ウェブサイト上のすべてのページのリストが表示されます。

次に、ナビゲーションメニューを表示したい各ページにチェックマークを付けます。完了したら、「保存」ボタンをクリックしてください。

FSE を使用して WordPress でページごとに異なるメニューを表示する

ブロックテーマのユーザーは、Block Visibility プラグインを使用できます。インストールにヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

有効化したら、外観 » エディター » パターン » すべてのテンプレートパーツに移動しましょう。ヘッダーのエディターを開いたら、「表示設定」セクションに移動できます。

ここから、ドロップダウンを開いて「URLパス」を選択できます。

次に、「URL PATH (CONTAIN)」エリアにプライバシーポリシーページのURLパスを追加できます。

URL パスは、ウェブサイトのメイン名以降に来るウェブ アドレスの一部であり、特定のページまたは項目を示します。

例えば、アドレス https://example.com/aboutでは、/aboutの部分がURLパスです。

プライバシーポリシーページのURLパスがわからない場合は、ページ » すべてのページに移動してください。次に、プライバシーポリシーページを見つけて、その上にカーソルを合わせます。

「クイック編集」ボタンをクリックするだけで、「スラッグ」セクションが表示されます。URLパスは、「/」記号の後にページの Сラッグが続く必要があります。

または、単にページにアクセスして、ドメイン名の後の部分をコピーして貼り付けるだけです。

それだけです！変更を保存するには、「保存」をクリックしてください。

WordPressでランディングページ上のナビゲーションメニューを非表示にする

ウェブサイトによっては、ランディングページのように、ナビゲーションメニューをまったく表示したくないページがある場合があります。

ランディングページは、売上を増やしたり、ビジネスのリードを生成したりするために設計されています。これらのページでは、気を散らすものを最小限に抑え、ユーザーが必要とするすべての情報を提供して、特定の行動を取ってもらうようにしたいはずです。

ランディングページコンバージョンを300%増加させる方法に関するガイドでは、ナビゲーションメニューやその他のリンクをページから削除して、気を散らすものを最小限に抑えることをお勧めします。

クラシックエディターを使用してWordPressでランディングページ上のナビゲーションメニューを非表示にする

Conditional Menus プラグインを使用すると、それが可能です。今回は、条件付きメニューを選択する際にドロップダウンから「メニューを無効にする」を選択します。

次に、「+条件」リンクをクリックして、メニューを表示するタイミングを選択しましょう。

「ページ」タブをクリックし、「マイランディングページ」項目にチェックマークを付ける必要があります。

設定を保存して適用するには、「保存」ボタンをクリックすることを忘れないでください。

FSEを使用してWordPressのランディングページでナビゲーションメニューを非表示にする

次に、ブロックテーマのユーザーは Block Visibility プラグインを使用できますが、今回は「URL パス (含まない)」フィールドに URL パスを入力します。

それでは、プラグインをインストールして有効化しましょう。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドをご覧ください。

有効化したら、外観 » エディター » パターン » すべてのテンプレートパーツに移動できます。ヘッダーエディターに入ったら、「表示設定」セクションを見つけましょう。

ここから「URLパス」を選択し、「URLパス（含まない）」フィールドにランディングページのパスを入力します。

完了したら、「保存」ボタンをクリックするだけです。

条件付きメニューに関するよくある質問

WordPressで条件付きメニューを設定またはカスタマイズすることについて質問がありますか？すぐに始められるように、いくつかの簡単な回答をご紹介します。

WordPressで最適な条件付きメニュープラグインは何ですか？

クラシックテーマを使用している場合、Conditional Menus プラグインはシンプルで信頼性の高い選択肢です。ブロックテーマの場合は、Conditional Blocks や Block Visibility のようなツールを使用すると、エディター内で強力な制御が可能です。

プラグインなしでメニューに条件付きロジックを追加できますか？

はい、ただし、テーマのファイルにカスタムコードを追加する必要があります。これは、わずかな間違いでもサイトが壊れる可能性があるため、上級ユーザーに任せるのが最善です。

ほとんどの人にとって、WPCodeのようなプラグインは、コードスニペットを追加および管理するための、はるかに安全で簡単な方法です。それに関するすべては、当社のWPCodeレビューで確認できます。

メニュー全体ではなく、個々のメニュー項目に条件を適用できますか？

もちろんです。多くの最新のWordPressテーマやメニュープラグインでこれが可能です。クラシックメニューエディター（外観 » メニュー）では、個々の項目に表示ルールを設定できることがよくあります。ブロックエディターでは、特定のナビゲーションリンクブロックに条件を適用できます。

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

ナビゲーションメニューは強力なウェブデザインツールです。これにより、WordPressブログまたはウェブサイトの最も重要なセクションにユーザーを誘導できます。

ページごと、またはユーザーロールごとに異なるナビゲーションメニューを表示するようになったので、さらにカスタマイズする方法を知りたいと思うかもしれません。

ナビゲーションメニューの機能を向上させるために、これらのチュートリアルをぜひご覧ください。

• 特定のWordPressメニューにカスタム項目を追加する方法
• WordPressテーマにカスタムナビゲーションメニューを追加する方法
• WordPressにフルスクリーンレスポンシブメニューを追加する方法
• WordPressで垂直ナビゲーションメニューを作成する方法
• WordPressサイトにメガメニューを追加する方法
• WordPressナビゲーションメニューのスタイリング方法
• WordPressでパンくずナビゲーションリンクを表示する方法

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