Question

我试图通过使用支持的CSS类窗体菜单部分在WP导航中显示图标。

我使用以下代码显示nav但我不知道在link_before中调用此类

<?php
                            wp_nav_menu( array(
                                'menu'              => 'primary',
                                'theme_location'    => 'primary',
                                'depth'             => 3,
                                'menu_class'        => 'nav navbar-nav',
                                'link_before'    => '<i class="wht_to_do_here"></i>',
                                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                                'walker'            => new wp_bootstrap_navwalker())
                            );
                        ?>

提前感谢。

Answer 1

后端的CSS类适用于<li>标记。首先，我们需要从<li>中删除它。

要从<li>中删除它，请将以下代码添加到主题的 functions.php 中：

add_filter('nav_menu_css_class', 'remove_class_from_li',10, 2);

function remove_class_from_li($class, $item){
    $css_class = get_post_meta($item->ID, '_menu_item_classes', true);
    $class = array_diff($class,$css_class);
    return $class;
}

现在我们需要修改其锚标记以将<i>标记添加到其中。因此，为您的主题 functions.php ：

添加以下代码

add_filter('walker_nav_menu_start_el', 'add_class_before', 10, 4);

function add_class_before($item_output, $item, $depth, $args){
    $css_class = get_post_meta($item->ID, '_menu_item_classes', true);
    if(is_array($css_class)){
        $class = implode(' ', $css_class);
        if($class){
            $args->link_before = '<i class="'.$class.'"></i>';
        }
    }
    $atts = array();
    $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
    $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
    $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
    $atts['href']   = ! empty( $item->url )        ? $item->url        : '';

    $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

    $attributes = '';
    foreach ( $atts as $attr => $value ) {
        if ( ! empty( $value ) ) {
            $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
            $attributes .= ' ' . $attr . '="' . $value . '"';
        }
    }

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= '</a>';
    $item_output .= $args->after;

    return $item_output;
}

由于我们修改了所有内容，您可能不需要在link_before函数中添加wp_nav_menu参数。所以你的wp_nav_menu现在看起来像是：

<?php
    wp_nav_menu( array(
        'menu'              => 'primary',
        'theme_location'    => 'primary',
        'depth'             => 3,
        'menu_class'        => 'nav navbar-nav',
        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
        'walker'            => new wp_bootstrap_navwalker())
    );
?>

已经完成了：）

注意：您也可以自行制作menu walker。

警告：通过上述方法，它将适用于所有菜单，如果您不想将其应用于所有菜单，则可能需要添加带菜单位置的条件。

Answer 2

您可以通过使用jQuery .addClass方法添加类，或者使用css .nav :: before {content：＆＃34; \ f015＆＃34 ;; font-family：＆＃39; FontAwesome＆＃39;;}方法在你的CSS中添加这个类。

如何在导航之前显示WP自定义类？

2 个答案: