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

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

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

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

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

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

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

WordPressメニューの条件付きロジックを使用すると、特定の基準に基づいてサイトのナビゲーションを自動的に変更できます。

デフォルトのWordPressウェブサイトの動作では、誰にでも同じ静的メニューが表示されますが、条件付きメニューを使用すると、ユーザーまたはページに基づいて異なるリンクを表示できます。

これにより、現在のコンテキストに関連するリンクのみを表示することで、訪問者をより効果的に誘導できます。

たとえば、ルールを使用してログインユーザー向けのカスタマイズされたメニューを作成できます。さまざまな種類のサイトでのユースケースの例をいくつか紹介します。

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

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

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

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

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

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

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

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

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

新しいナビゲーションメニューを作成するには、WordPressダッシュボードの外観 » メニューページに移動するだけです。

ウェブサイトで全ユーザーが使用しているナビゲーションメニューが既にある場合は、それをデフォルトメニューとして使用できます。

次に、「新しいメニューを作成」リンクをクリックして、新しいメニュー項目を作成する必要があります。

たとえば、ログインユーザーに表示するメニューと、特定のWordPressページまたはカテゴリに表示する別のメニューを作成できます。

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

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

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

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

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

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

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

これでサイトエディターが開きます。テーマによっては、左側にメニューオプションのリストが表示される場合があります。「ナビゲーション」をクリックしてください。

参考までに、このガイドではTwenty-Twenty Threeテーマを使用しています。

ここで、既存のすべてのメニューを確認できます。

新しいメニューを追加するには、+（プラス）アイコンをクリックするか、「編集」ボタンをクリックしてメニューを視覚的に管理します。次に、ドロップダウンメニューが表示され、オプションを選択できます。

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

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

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

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

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

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

開始するには、Conditional Menusプラグインをインストールして有効にする必要があります。

WordPress管理ダッシュボードからプラグイン » 新規追加に移動します。

次のページで、検索バーを使用してプラグインを検索します。

結果に表示されたら、「今すぐインストール」をクリックし、インストールが完了したら「有効化」をクリックします。

詳細については、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

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

「場所の管理」タブは、サイトの特定の領域にどのメニューを表示するかをテーマに指示する場所です。ここでは、利用可能なメニューの場所と、現在割り当てられているメニューのリストが表示されます。

これらの場所は、使用しているWordPressテーマによって異なる場合があります。たとえば、デモウェブサイトでは、「プライマリメニュー」の場所には現在「メインメニュー」という名前のナビゲーションメニューが表示されています。

「メニューロケーション」を壁の額縁、「メニュー」をその中の写真と考えてください。Conditional Menusプラグインを使用すると、誰が見ているかに基づいて写真を自動的に入れ替えることができます。

特定の条件が満たされたときに別のメニューを表示するには、「+ 条件付きメニュー」リンクをクリックし、ドロップダウンから別のメニューを選択します。このチュートリアルでは、「ログイン中のメニュー」を選択します。

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

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

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

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

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

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

ブロックテーマを使用している場合は、Conditional Blocksプラグインが必要です。

まず、プラグインをインストールして有効化しましょう。始めるには、プラグイン » 新規追加 に移動してください。

次に、検索ボックスを使用してプラグインを探します。

結果に表示されたら、「今すぐインストール」をクリックし、インストールが完了したら必ず「有効化」をクリックしてください。

追加のヘルプが必要な場合は、WordPressプラグインのインストール方法のガイドをご覧ください。

有効化したら、外観 » エディター に移動してサイトエディターを開きます。

次に、「パターン」をクリックし、「すべてのテンプレートパーツ」をクリックします。

これで、アクティブなテーマによっては、フッター、ヘッダー、コメントなど、すべてのテンプレートパーツが表示されるはずです。

「ヘッダー」テンプレートパーツを見つけましょう。3点ドットのメニューアイコンをクリックし、「編集」を選択するだけです。

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

条件を追加するには、ナビゲーションメニューブロックをクリックします。その後、右側のパネルの「ブロック」タブに切り替えてカスタマイズを開始します。

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

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

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

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

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

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

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

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

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

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

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

前のセクションと同様に、Conditional Menusプラグインが必要です。詳細な手順については、WordPressプラグインのインストール方法のガイドをご覧ください。

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

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

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

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

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

FSEでユーザーロールに応じて異なるメニューを表示するには、Content Controlプラグインを使用します。

これを行うには、WordPressダッシュボードからプラグイン » 新規追加 に移動します。

次に、検索フィールドを使用してプラグインをすばやく見つけます。

結果に表示されたら、「今すぐインストール」をクリックし、インストールが完了したら「有効化」をクリックするのを忘れないでください。

さらに詳しいガイダンスが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

プラグインが有効化されたら、WordPressダッシュボードから外観 » エディターに移動します。

次に、「パターン」を選択し、「すべてのテンプレートパーツ」をクリックします。

これにより、アクティブなブロックテーマによっては、ヘッダー、フッター、コメントなどの利用可能なテンプレートパーツのリストが表示されます。

「ヘッダー」テンプレートを見つけ、3点メニューをクリックして「編集」を選択します。

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

たとえば、「ブログ」ページへのリンクを非表示にして、購読者のみがメニューでそれを見られるようにします。

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

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

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

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

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

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

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

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

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

これを行うには、Conditional Menusプラグインが必要です。プラグインのインストールにヘルプが必要な場合は、前のセクションの手順またはWordPressプラグインのインストール方法に関するガイドを参照してください。

有効化したら、外観 » メニューに移動し、「場所の管理」を選択します。

適切なナビゲーションメニューを選択した後、「+ 条件」リンクをクリックできます。

今回は、「ページ」タブをクリックします。ウェブサイト上のすべてのページのリストが表示されます。

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

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

ブロックテーマを使用している場合は、無料のBlock Visibilityプラグインの使用をお勧めします。これにより、メニューを表示するユーザーを正確に制御できます。

開始するには、WordPressダッシュボードのプラグイン » 新規追加に移動して、プラグインをインストールして有効化してください。

次に、検索ボックスを使用してプラグインを探します。

結果に表示されたら、「今すぐインストール」をクリックし、インストールが完了したら必ず「有効化」をクリックしてください。

インストールにヘルプが必要な場合は、WordPressプラグインのインストール方法に関するガイドを参照してください。

プラグインを有効化した後、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パスを入力します。

プラグインが有効になったら、管理ダッシュボードで外観 » エディターに移動します。

そこから「パターン」を選択し、「すべてのテンプレートパーツ」を開きます。

現在アクティブなテーマに応じて、ヘッダー、フッター、コメントなどのテンプレートパーツのリストが表示されます。たとえば、「ヘッダー」を見つけて、3つのドットメニューを開き、「編集」をクリックできます。

エディターに入ったら、「表示」セクションを見つけます。

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

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

トラブルシューティング：メニューが変更されないのはなぜですか？

条件付きルールを設定したにもかかわらず、テストしてもメニューが変更されない場合は、通常キャッシュが原因です。

多くのWordPressキャッシュプラグインは、パフォーマンスを向上させるためにメニューの静的バージョンを保存します。その場合、変更はすぐには表示されません。

これをトラブルシューティングするには、WordPressキャッシュをクリアして、もう一度確認してみてください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。