Question

我使用自定义Walker function来自定义Wordpress中菜单的显示。

为了向前迈出一步，我希望为具有多个X元素的子菜单提供不同的HTML标记。

我有没有办法检查Walker start_el的{{1}}函数中给定项的元素数量？

Answer 1

使用Walker类并不是最简单的事情，所以我想到了使用DOMDocument来解析菜单HTML并在构建菜单后计算子菜单子项的解决方案（使用wp_nav_menu_{$menu->slug}_items过滤器）：

add_filter( 'wp_nav_menu_{MENU_SLUG}_items', function( $items, $args ) {

    $dom = new DOMDocument();
    $dom->loadHTML($items);

    // get the .sub-menu elements
    $submenus = $dom->getElementsByTagName('ul');

    // for each one if it has children add a class
    // like has-{num}-children
    foreach ($submenus as $ul) {
        if($ul->hasChildNodes()) {
            // number of child nodes divided by 2
            // to exclude the text nodes
            $numChildren = $ul->childNodes->length / 2;
            $class = "has-$numChildren-children";
            $ul->setAttribute(
                'class', $ul->getAttribute('class') . ' ' . $class
            );
        }
    }

    // save the changes
    $html = $dom->saveHtml($dom->documentElement);
    // remove html and body tags added by $dom->loadHTML
    $items = preg_replace('~</?(html|body)>~', '', $html);

    return $items;

}, 10, 2);

这应该为每个带子项的子菜单添加一个类has-{num}-children（其中{num}是孩子的数量），这样你就可以定位你想要的任何东西。

可以轻松更改为仅将类应用于子项数最少的子菜单。

请记住使用菜单的slug更改{MENU_SLUG}。

获取wp_nav_menu元素的兄弟节点数

1 个答案: