未ログインユーザーに特定のメニューリンクを無効化・非表示にする方法

はじめに

WordPressサイトを運営していると、「会員にはメニューを見せたいが、未ログインのゲストにはリンクをクリックさせたくない」あるいは「特定のメニュー項目自体を隠したい」という場面があります。

CSSのpointer-events: none;を使えば、見た目上でクリックを無効化することは可能です。

しかし、その方法ではHTMLソース内に<a>タグのリンク先URLが残ってしまうため、デベロッパーツールなどで簡単にリンク先を調べられてしまいます。

そこで、PHP側でリンク先URLそのものを削除、あるいは項目ごと除外するします。
外観→メニューから、対象とするメニュー項目の「CSS class」にno-guestと入力して保存するだけで、ゲストユーザーの画面からはリンクが削除されるようになります（図1参照）。

この記事では、この方法について説明します。

実装手順

メニュー項目は残しリンクのみを無効化する場合

以下のコードをfunctions.phpに追加します。

add_filter('wp_get_nav_menu_items', function ($items, $menu, $args) {
  if (is_admin() || is_user_logged_in()) {
    return $items;
  }

  foreach ($items as $item) {
    if (empty($item->classes) || !in_array('no-guest', (array) $item->classes, true)) {
      continue;
    }

    $item->url = '';
  }

  return $items;
}, 10, 3);

メニュー項目そのものを除外する場合

以下のコードをfunctions.phpに追加します。

add_filter('wp_get_nav_menu_items', function ($items, $menu, $args) {
  if (is_admin() || is_user_logged_in()) {
    return $items;
  }

  foreach ($items as $key => $item) {
    if (empty($item->classes) || !in_array('no-guest', (array) $item->classes, true)) {
      continue;
    }

    unset($items[$key]);
  }

  return $items;
}, 10, 3);

さいごに

今回紹介した方法を使えば、ログイン状況に応じた柔軟なサイト設計が可能になります。
特にPHP側で制御を行うことで、セキュリティ面でも情報の露出を防げるのが大きなメリットです。