Navwalker不接受菜单中定义的CSS类

问题描述

所以我正在使用带有Bulma Navwalker的Bulma框架-我遇到的问题是它不接受在WordPress菜单中定义的自定义css类。

因此，我在一个父菜单项中定义了一个is-mega类，并且未在“ navbar-item has-dropdown is-hoverable”下显示。

有人看到我可能会失踪吗？

这是Navwalker：

<?php
/**
 * Bulma-Navwalker
 *
 * @package Bulma-Navwalker
 */

/**
 * Class Name: Navwalker
 * Plugin Name: Bulma Navwalker
 * Plugin URI:  https://github.com/Poruno/Bulma-Navwalker
 * Description: An extended Wordpress Navwalker object that displays Bulma framework's Navbar https://bulma.io/ in Wordpress.
 * Author: Carlo Operio - https://www.linkedin.com/in/carlooperio/,Bulma-Framework
 * Author URI: https://github.com/wp-bootstrap
 * License: GPL-3.0+
 * License URI: https://github.com/Poruno/Bulma-Navwalker/blob/master/LICENSE
 */

class Navwalker extends Walker_Nav_Menu {

    public function start_lvl( &$output,$depth = 0,$args = array() ) {

        $output .= "<div class='navbar-dropdown'>";
    }

    public function start_el( &$output,$item,$args = array(),$id = 0 ) {

        $liClasses = 'navbar-item ';

        $hasChildren = $args->walker->has_children;
        $liClasses .= $hasChildren? " has-dropdown is-hoverable": "";

        if($hasChildren){
            $output .= "<div class='".$liClasses."'>";
            $output .= "\n<a class='navbar-link' href='".$item->url."'>".$item->title."</a>";
        }
        else {
            $output .= "<a class='".$liClasses."' href='".$item->url."'>".$item->title;
        }

        // Adds has_children class to the item so end_el can determine if the current element has children
        if ( $hasChildren ) {
            $item->classes[] = 'has_children';
        }
    }

    public function end_el(&$output,$id = 0 ){

        if(in_array("has_children",$item->classes)) {

            $output .= "</div>";
        }
        $output .= "</a>";
    }

    public function end_lvl (&$output,$args = array()) {

        $output .= "</div>";
    }
}
?>

解决方法

您可以通过稍微调整步行器来实现。 Bulmapress从助行器上删除了标准类，因此可以使用自己的助行器。通过添加此选项，它将允许您从“外观”->“菜单”中添加自定义类。

<?php

public function start_el( &$output,$item,$depth = 0,$args = array(),$id = 0 ) {

        // Add your custom item classes here
        
        $custom_classes_from_menu = implode(' ',$item->classes); // turn the WP classes object array to string values
    
        $liClasses = 'navbar-item ' . $custom_classes_from_menu; // add the values to your classes list

        $hasChildren = $args->walker->has_children;
        $liClasses .= $hasChildren? " has-dropdown is-hoverable": "";

        if($hasChildren){
            $output .= "<div class='".$liClasses."'>";
            $output .= "\n<a class='navbar-link' href='".$item->url."'>".$item->title."</a>";
        }
        else {
            $output .= "<a class='".$liClasses."' href='".$item->url."'>".$item->title;
        }

        // Adds has_children class to the item so end_el can determine if the current element has children
        if ( $hasChildren ) {
            $item->classes[] = 'has_children';
        }
    }