如何在nav中显示之前的WP自定义类？

Question

我正在尝试使用支持的 CSS 类表单菜单部分在 WP 导航中显示图标。

我使用以下代码来显示导航，但我不知道如何在 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())
    );
?>

完成了:)

注意：您也可以通过制作自己的菜单步行器来实现。

注意：通过执行上述方法，它将应用于所有菜单，如果您不想将其应用于所有菜单，则可能需要添加菜单位置条件。

Answer 2

您可以通过使用 jQuery .addClass 方法或使用 css .nav::before{content: " 015"; 添加类font-family: 'FontAwesome';} 方法在你的 css 中添加这个类。