riplus纯代码自动添加二级导航前面小圆点

对很对小白来说，不知道怎么添加。这个教程很简单,修改完后自动添加二级菜单前面的小圆点。

第一步：文件inc/class/other-class代码

<?php


/**
 * RiPlus_Walker_Nav_Menu
 */
class RiPlus_Walker_Nav_Menu extends Walker_Nav_Menu
{

    public function start_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div class=\"sub-menu\"><ul>\n";
    }

    public function end_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div>\n";
    }


    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );

        
        if (in_array('menu-item-has-children', $classes)) {
            $class_names .= ' has-sub-menu';
        }

        if (in_array('current-menu-item', $classes)) {
            $class_names .= ' active';
        }
        //

        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        
        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        // New
        if ($depth === 0) {
            $output .= $indent . '<li' . $id . $class_names .'>';
        }
        //

        // $output .= $indent . '<li' . $id . $class_names .'>';

        $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['description']   = ! empty( $item->description )  ? $item->description  : '';
        $atts['class']   = ! empty( $item->class )      ? $item->class      : '';
        if (in_array('current-menu-item', $item->classes)) {
            $atts['class'] .= ' active';
        }
        
        $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;

        if ($depth > 0) {
            $item_output .= '<li><a'. $attributes .'>';
            $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
            $item_output .= '</a></li>';
        }else{
            $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;
       
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }

    
    public function end_el( &$output, $item, $depth = 0, $args = array() ) {
        if ($depth === 0) {
            $output .= "</li>\n";
        }
    }

    public static function fallback($args)
    {
        extract($args);

        $fb_output = null;

        if ($container) {
            $fb_output = '<' . $container;

            if ($container_id) {
                $fb_output .= ' id="' . $container_id . '"';
            }

            if ($container_class) {
                $fb_output .= ' class="' . $container_class . '"';
            }

            $fb_output .= '>';
        }
        $fb_output .= '<li class="menu-item"><a href="' . esc_url(admin_url('nav-menus.php')) . '">' . esc_html__('请添加菜单', 'riplus') . '</a></li>';

        if ($container) {
            $fb_output .= '</' . $container . '>';
        }

        echo wp_kses($fb_output, array(
            'ul'   => array('id' => array(), 'class' => array()),
            'li'   => array('class' => array()),
            'a'    => array('href' => array()),
            'span' => array(),
        ));
    }



}

class Riplus_Walker_Comment extends Walker_Comment {
    public function start_lvl( &$output, $depth = 0, $args = array() ) {
        $GLOBALS['comment_depth'] = $depth + 1;
        if($depth>0) return $output;

        switch ( $args['style'] ) {
            case 'div':
                break;
            case 'ol':
                $output .= '<ol class="comment-children">' . "\n";
                break;
            case 'ul':
            default:
                $output .= '<ul class="comment-children">' . "\n";
                break;
        }
    }
    public function end_lvl( &$output, $depth = 0, $args = array() ) {
        $GLOBALS['comment_depth'] = $depth + 1;
        if($depth>0) return $output;

        switch ( $args['style'] ) {
            case 'div':
                break;
            case 'ol':
                $output .= "</ol>\n";
                break;
            case 'ul':
            default:
                $output .= "</ul>\n";
                break;
        }
    }

    public function html5_comment( $comment, $depth, $args ) {
        $GLOBALS['comment'] = $comment;

        if ( 'div' == $args['style'] ) {
            $tag = 'div';
            $add_below = 'comment';
        } else {
            $tag = 'li';
            $add_below = 'div-comment';
        }
        $author = get_comment_author();
        $reply = '';
        if($depth>0 && $comment->comment_parent){
            $reply = get_comment_author($comment->comment_parent);
            $reply = $reply ? ' 回复 <a href="#comment-' . $comment->comment_parent.'">'.$reply.'</a>' : '';
        }
        if( $comment->user_id){
            $author = '<a>'.$author.'</a>';
        }else if( $comment->comment_author_url ){
            $author = '<a href="'.esc_url($comment->comment_author_url).'" target="_blank" rel="nofollow">'.$author.'</a>';
        }
        $user_id = (empty($comment->user_id)) ? 0 : $comment->user_id ;
        $user_type=_get_user_vip_type($user_id);
        if (empty($comment->user_id)) {
            $user_type['text'] = '<span class="badge badge-secondary">游客</span>';
        }
        ?>
        <<?php echo $tag ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ) ?> id="comment-<?php comment_ID() ?>">
        <div id="div-comment-<?php comment_ID() ?>" class="comment-inner">
            <div class="comment-author vcard">
                <?php if ( $args['avatar_size'] != 0 ) echo get_avatar( $comment, $args['avatar_size'] ); ?>
            </div>
            <div class="comment-body">
                <div class="nickname"><?php echo $author.' '.$user_type['text'].$reply;?>
                    <span class="comment-time"><?php echo get_comment_date().' '.get_comment_time(); ?></span>
                </div>
                <?php if ( $comment->comment_approved == '0' ) : ?>
                    <div class="comment-awaiting-moderation"><?php _e( '您的评论正在等待审核。', 'riplus' ); ?></div>
                <?php endif; ?>
                <div class="comment-text"><?php comment_text(); ?></div>
            </div>

            <div class="reply">
                <?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
            </div>
        </div>
        <?php
    }
}

替换为：

第二步：\assets\css\app.css添加下面代码

/***二级导航前面小圆点***/
.navcoler1 {
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    margin-left: 10px;
    margin-top: -6px;
    left: 0;
    border-color: #61e1b9;
    border: 3px solid #7a99f2;
    animation: hovertreemove /*动画样式名称*/ 1s /*动画时间*/ linear /*线性运动*/ infinite /*无限播放*/ alternate/*往返动画*/;
}

.navcoler2 {
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    margin-left: 10px;
    margin-top: -6px;
    left: 0;
    border-color: #61e1b9;
    border: 3px solid #70d7cf;
    animation: hovertreemove /*动画样式名称*/ 1s /*动画时间*/ linear /*线性运动*/ infinite /*无限播放*/ alternate/*往返动画*/;
}

.navcoler3 {
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    margin-left: 10px;
    margin-top: -6px;
    left: 0;
    border-color: #61e1b9;
    border: 3px solid #f5c745;
    animation: hovertreemove /*动画样式名称*/ 1s /*动画时间*/ linear /*线性运动*/ infinite /*无限播放*/ alternate/*往返动画*/;
}

.navcoler4 {
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    margin-left: 10px;
    margin-top: -6px;
    left: 0;
    border-color: #61e1b9;
    border: 3px solid #f1787f;
    animation: hovertreemove /*动画样式名称*/ 1s /*动画时间*/ linear /*线性运动*/ infinite /*无限播放*/ alternate/*往返动画*/;
}
.navcoler5 {
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    margin-left: 10px;
    margin-top: -6px;
    left: 0;
    border-color: #61e1b9;
    border: 3px solid #bddd22;
    animation: hovertreemove /*动画样式名称*/ 1s /*动画时间*/ linear /*线性运动*/ infinite /*无限播放*/ alternate/*往返动画*/;
}
.navcoler6 {
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    margin-left: 10px;
    margin-top: -6px;
    left: 0;
    border-color: #61e1b9;
    border: 3px solid #44cef6;
    animation: hovertreemove /*动画样式名称*/ 1s /*动画时间*/ linear /*线性运动*/ infinite /*无限播放*/ alternate/*往返动画*/;
}
.navcoler7 {
    box-sizing: border-box;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    margin-left: 10px;
    margin-top: -6px;
    left: 0;
    border-color: #61e1b9;
    border: 3px solid #f1787f;
    animation: hovertreemove /*动画样式名称*/ 1s /*动画时间*/ linear /*线性运动*/ infinite /*无限播放*/ alternate/*往返动画*/;
}

@keyframes hovertreemove {
    100% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1.2);
    }
}

第三步：如果不想在手机端显示添加以下CSS代码

@media screen and (max-width: 680px) {
    .navcoler1,.navcoler2,.navcoler3,.navcoler4,.navcoler5,.navcoler6,.navcoler7 {
        display: none;
    }
}