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

Question

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

所以我在我的一个父菜单项中定义了一个 is-mega class，它没有显示在“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, $depth = 0, $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, $item, $depth = 0, $args = array(), $id = 0 ){

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

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

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

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

Answer 1

您可以通过稍微调整助行器来实现这一点。 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';
        }
    }

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

Navwalker won't accept css classes defined in menu

wordpress

flexbox

bulma