Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

WordPressは誰に対しても同じナビゲーション・メニューを表示します。しかし、ユーザーがログイン中かどうかに応じてメニューをカスタマイズしたい場合もあるでしょう。

WordPressでログイン中のユーザーに異なるメニューを表示することは、よりパーソナライズされたエクスペリエンスを生み出す素晴らしい方法です。アカウントの詳細や限定リソースなど、ログイン中のユーザーだけに関連するコンテンツを表示することができます。

このガイドでは、2つの方法を使って、ログイン中のユーザーに異なるメニューを設定する方法を説明します。

Showing different navigtion menus to logged in and non-logged in users in WordPress

WordPressでログイン中のユーザーに異なるメニューを表示する理由とは?

WordPressサイトのさまざまなエリアを訪問者とそのアクティビティに応じて変更することで、ユーザーごとにパーソナライズされたサイトになります。

このパーソナライズされたコンテンツは 、WordPressサイトのユーザーエクスペリエンスの向上に役立ちます。

ユーザーが登録やログインを必要としないウェブサイトを運営している場合、おそらくウェブサイト全体で同じナビゲーションメニューを使用することができます。しかし、その他のサイトでは、ログイン中のユーザーにカスタマイザーを表示することで大きなメリットが得られるかもしれません。

例えば、オンラインショップ、オンライン学習プラットフォーム、WordPressの会員制サイトコミュニティなどのサイトは、すべてパーソナライズされたナビゲーションメニューの恩恵を受けることができます。

ログイン中のユーザーにパーソナライズされたナビゲーションメニューを提供することで、サインアップした内容をより簡単に見つけることができます。

例えば、オンラインストアのユーザーが自分のアカウントを管理したり、有料コミュニティのメンバーが簡単に購読を更新したり、購入した限定オンラインコースを表示したりできる。

WordPressの初期設定では、ナビゲーションメニューを好きなだけ作成することができます。ただし、WordPressテーマの特定の場所に表示するメニューは1つだけです。

ログイン中ユーザー用のメニューを設定する前に、まず2つの独立したナビゲーションメニューを作成する必要があります。一つはログイン中のユーザー用のメニューで、もう一つはログアウト中のユーザー用のメニューです。さっそく始めましょう。

ちょっとしたメモです!今回ご紹介する方法は、WordPressクラシックテーマを使っている方向けのものです。WordPress 5.8以降のフルサイト編集(FSE)機能を備えたブロックテーマを使用している場合、この方法は使えないかもしれません。

WordPressでログイン中ユーザーと非ログインユーザー用のメニューを作成する

2種類のユーザー用に区切られたメニューを作成するには、WordPressダッシュボードの外観 ” メニューページに移動します。

すでにサイト上ですべてのユーザーに使用しているナビゲーションメニューがある場合は、これを初期設定メニューにすることができます。

Main menu

その後、’create a new menu’リンクをクリックして、ログイン中ユーザー用の新しいカスタムメニューを作成することができます。

ここで、登録またはログイン中のユーザーに表示したいメニュー項目を追加してください。例えば、メニューにログアウトリンクを追加したいかもしれません。

画面の左側に、あなたのサイトのページ一覧が表示されます。メニューに追加したいページにチェックを入れ、「メニューに追加」ボタンをクリックしてください。

Logged in menu

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

さらにページを進むと、メニューを表示する場所を選ぶことができます。しかし、今はこのメニューに場所を割り当てる必要はありません。それは投稿の後半で行います。

メニューの保存」ボタンをクリックして、変更内容を保存することを忘れないでください。

メニュー作成の詳細については、WordPressナビゲーションメニューの初心者ガイドをご覧ください。

これで、ログイン中のユーザーにさまざまなメニューを表示する準備ができました。このガイドで取り上げるすべての方法を簡単に説明します:

では、最初の方法を紹介しよう。

方法1.プラグインを使ってログイン中のユーザーに異なるメニューを表示する。

ログイン中のユーザーに異なるメニューを表示する最も簡単な方法は、 Conditional Menusプラグインを使うことです。それでは、まずインストーラをインストールして有効化しましょう。

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

有効化したら、WordPressダッシュボードから外観 ” メニューに移動する必要があります。次に、「ロケーションの管理」タブに切り替えます。

ここから、WordPressテーマで定義された利用可能なメニューの場所と、現在表示されているメニューのリストが表示されます。

例えば、「プライマリーメニュー」には現在「メインメニュー」が表示されています。

Manage menu locations

では、特定の条件に一致したときに別のメニューを表示するようにプラグインに指示する必要がある。

そのためには、「+条件付きメニュー」のリンクをクリックしましょう。そして、ドロップダウンメニューからログイン中のユーザーに表示したいナビゲーションメニューを選択します。

Select logged in menu

次に、「+条件」のリンクをクリックします。

するとポップアップが表示され、たくさんの条件から選ぶことができる。

Select logged in user aa the condition

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

これで、ログイン中のユーザーメニューを実際にあなたのサイトで見ることができます。また、WordPress管理画面からログアウトして、他のすべてのユーザーに表示されるナビゲーションメニューを表示することもできます。

Different menu for logged in users

方法2.WordPressのログイン中メニューをコードで手動選択する。

この方法では、WordPressサイトにコードを追加する必要があります。WordPressでコードスニペットをコピー&ペーストする方法をご覧ください。

一般的には、テーマのfunctions.phpファイルまたはサイト固有のプラグインにコードスニペットを追加する必要があります。しかし、この方法はサイトに問題を引き起こす可能性があるため、お勧めしません。

代わりに、WPCodeプラグインを使用することができます。

WPCodeを使用すると、テーマのファイルを直接編集することなく、サイトにカスタムのコードスニペットを追加することができます。また、これらのスニペットを管理し、安全に実行されるようにすることで、サイトを壊すリスクを最小限に抑えます。

はじめに、WPCodeプラグインをインストールしましょう。WPCodeの無料版を使えば、ログイン中のユーザーにさまざまなメニューを表示するのに必要なものがすべて揃っている。

インストーラをインストールしたら、Code Snippets + Add Snippetsに移動する。

Add Snippet button in WPCode

WPCodeのコード・スニペット・ギャラリーが開きます。

ここから、「+カスタム・スニペットを追加」ボタンをクリックします。

Add Custom Snippet button in WPCode

するとWPCodeのテキストエディターに到着する。

次のステップでは、コード・スニペットにタイトルを追加し、「コードタイプ」のドロップダウンメニューから「HTMLスニペット」を選択します。

Adding snippet title and choosing code type in WPCode

完了したら、以下のコードをコピー&ペーストして「コードプレビュー」フィールドに入力するだけです:

function my_wp_nav_menu_args( $args = '' ) {
if( is_user_logged_in() ) {
// Logged in menu to display
$args['menu'] = 43;

} else {
// Non-logged-in menu to display
$args['menu'] = 35;
}
return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

WPCodeエディターではこのように表示されます:

The custom HTML snippet in WPCode's Code Preview

43と 35を、先に作成したナビゲーション・メニューのIDに置き換えることを本当に〜してもよいですか?

ナビゲーションメニューのIDは、「メニュー」ページで選択することで確認できます。ブラウザーのアドレスバーにメニューID番号が表示されます。

Find navigation menu ID

すべての詳細が正しいことを本当に〜してもよいですか?

以上です!この投稿が、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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

99件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Igoy Cavalera

    Perfect!
    Thanks a lot for the simple article. and save me for several hours

    • WPBeginner Support

      Glad we could help save you that time :)

      管理者

  3. Alex

    Thanks for the code – works as it should, appreciated :)

    • WPBeginner Support

      Glad our guide could be helpful!

      管理者

  4. Paul K

    Great! But where do I find my theme’s function.php?

  5. Clara

    Works great! I have the problem that I have to menus at the top: A headliner menu and the main menu. When I use the Code and the user is logged in bove menus switch to the logged-in menu. How can I adjust the code so that the headliner menu remains the same?

  6. Sergio

    Thank you very much!

    • WPBeginner Support

      You’re welcome :)

      管理者

  7. Echo

    Would be much easier if you could do it for a specific menu item rather than an entire menu. What would someone with 499 menu items have to do?

    • WPBeginner Support

      We would not recommend that many menu items as that would be far too many for someone to navigate through which would likely cause an SEO issue if your menu links don’t add value for your visitors

      管理者

  8. Evaldo Santos

    100%. Just configured it with Sahifa Theme and works like a charm.

    Keep up with this good work.

  9. Bk Millanzi

    this is so helpful, but is there a way to display a username and avatar which can act as a container of other profile menu items, as a drop-down menu?

  10. Amarnadh

    The path you showed is well and good only for just showing custom menus. But what if i want to show my content to a specific logged in user based on his interests. That is in detail, like various deals sites, when we login and save our interests, the next moment we see deals only on that specific topic. Can we make that possible using WordPress plugins.

  11. Sam

    Hey there, thanks for the great work. I have a question about multiple user roles.

    So I have two main menus, Menu 1 and Menu 2.

    I would like all users (logged in or out) to see the main menu unless they have the userole of “Alt”, in which case Menu 1 is replaced by Menu 2.

    How would I go about doing that?

  12. Tendai Mugoni

    It is working, thanks

  13. Curtis

    @ERICLEE You can create a child theme to prevent that from happening. I just added this code and need to do the same thing.

  14. shahzaib sarwer

    can it possible to add the menus in the subscriber profile accept than the home page these menu pages not show on the home page, just on the every subscriber profile. if it possible then please guide me, and tell me how use any pluging for this.

  15. shahzaib sarwer

    can it possible to add the menus in profile of the subscriber in wp site , if it possible so please anyone guide me what i do and how use any pluging of this work.

  16. Yuda

    How can the same be achieeved on a multi-language members site? For example show different menu for users logged in in english and a different menu for users logged in with german?

  17. solomon

    i have added log in menu and logout menu, how do i configure the page for login and log out ???,,

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。