メニュー

PHP

カスタムウォーカーでクラス名などを追加(php)

下記コードをfunctions.phpに記述

メニュー名header-pc、header-sp共通

・外観>メニューで追加するクラス名も反映

・不要なクラス名、idは削除

・サブメニューがある親の<li>にacoItemというクラス名を追加

・サブメニューの<ul>のクラス名をsubMenu

・サブメニューの<li>のクラス名をsubMenu__item

メニュー名header-pcの時

・<li>のクラス名をheaderNav__item–pc

メニュー名header-spの時

・<li>のクラス名をheaderNav__item–sp

・サブメニューがある親の<a>のhrefは削除

    
//****************************************************************************************
// liのクラス名を変更
//****************************************************************************************
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu
{
    // メニューの<li>をカスタマイズ
    public function start_el(&$output, $item, $depth = 0, $args = null, $id = 0)
    {
        // クラス名の初期化
        $classes = [];
        $item_classes = empty($item->classes) ? [] : (array) $item->classes;

        // メニュー名(header-pc, header-sp)に応じてクラスを追加
        if ($args->theme_location === 'header-pc') {
            $classes[] = 'headerNav__item--pc';
        } elseif ($args->theme_location === 'header-sp') {
            $classes[] = 'headerNav__item--sp';
        }

        // サブメニューがある親に特定のクラスを追加
        if ($depth === 0 && in_array('menu-item-has-children', $item_classes, true)) {
            $classes[] = 'acoItem';
        }

        // サブメニュー用のクラス
        if ($depth > 0) {
            $classes[] = 'subMenu__item';
        }

        // 外観 > メニューで追加されたクラスを保持
        $classes = array_merge($classes, $item_classes);

        // 不要なクラスを削除
        $unwanted_classes = [
            'menu-item', 
            'menu-item-type-custom', 
            'menu-item-object-custom', 
            'menu-item-has-children', 
            'menu-item-type-post_type', 
            'menu-item-object-page', 
            'menu-item-home', 
            'current-menu-ancestor'
        ];
        $classes = array_diff($classes, $unwanted_classes);

        // クラス名をHTML形式に変換
        $class_names = join(' ', array_filter($classes));
        $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';

        // サブメニューの親の場合、リンクを無効化する
        $link = $item->url && !($args->theme_location === 'header-sp' && $depth === 0 && in_array('menu-item-has-children', $item_classes, true))
            ? ' href="' . esc_url($item->url) . '"'
            : '';

        // メニューアイテムのHTMLを出力
        $output .= sprintf(
            '<li%1$s><a%2$s>%3$s</a>',
            $class_names,
            $link,
            esc_html($item->title)
        );
    }

    // サブメニューの<ul>をカスタマイズ
    public function start_lvl(&$output, $depth = 0, $args = null)
    {
        $classes = ['subMenu']; // サブメニュー用のクラス名
        $class_names = ' class="' . esc_attr(join(' ', $classes)) . '"';
        $output .= '<ul' . $class_names . '>';
    }
}

// カスタムウォーカーをメニューに適用する
function apply_custom_walker($args)
{
    if (isset($args['theme_location']) && in_array($args['theme_location'], ['header-pc', 'header-sp'])) {
        $args['walker'] = new Custom_Walker_Nav_Menu();
    }
    return $args;
}
add_filter('wp_nav_menu_args', 'apply_custom_walker');    

• CSS
• JavaScript
• PHP