【Cocoonカスタマイズ】「ボックスメニュー」ウィジェットに現在のカレント表示する方法

はじめに
完成イメージ
実装手順
さいごに

はじめに

「ボックスメニュー」ウィジェットは、メニューに対してカレント表示を示す属性がデフォルトでは付加されません。

そこで、現在表示されているページに応じて、どのメニューがカレントであるかを示すCSSクラスを追加します。

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

完成イメージ

実装手順

以下の手順で実装します。

ラベル

PHPを追加

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

add_filter('get_box_menu_tag', function ($output) {
  // 現在のページのURLを取得
  $current_url = home_url(add_query_arg(array(), $GLOBALS['wp']->request));

  // ページ送り部分を除去
  $normalize_url = function ($url) {
    $host = strtolower(wp_parse_url($url, PHP_URL_HOST) ?? '');
    $path = wp_parse_url($url, PHP_URL_PATH) ?? '/';
    $path = preg_replace('#/page/\d+/?$#', '', $path);

    return $host . untrailingslashit($path);
  };

  $current_url = $normalize_url($current_url);

  $w = new WP_HTML_Tag_Processor($output);

  // HTML内からbox-menuクラスを持つタグを検索
  while ($w->next_tag(['class_name' => 'box-menu'])) {
    // メニュー項目のURLを取得
    $href = $w->get_attribute('href');
    if (!$href) {
      continue;
    }

    // URLが一致した場合にcurrent-itemクラスを追加
    if ($normalize_url($href) === $current_url) {
      $w->add_class('current-item');
    }
  }

  return $w->get_updated_html();
});

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。

.box-menu.current-item {
  background-color: #fff8e1;
  pointer-events: none;
}

さいごに

今回紹介した方法を使えば、「ボックスメニュー」ウィジェットに現在のページに関連するメニューアイテムをカレント表示させることができます。
カレントメニューを強調表示することで、ユーザーにどのページを見ているのかを視覚的に示すことができます。