自定义菜单
发布于
by
自定义菜单 一、在functions.php里注册菜单 1 2 3 register_nav_menus( a…
自定义菜单
一、在functions.php里注册菜单
|
1
2
3
|
register_nav_menus( array(
‘primary’ => __( ‘Primary Navigation’, ‘twentyten’ ),
) );
|
二、在模板相应位置调取菜单
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<?php
wp_nav_menu( array(
‘theme_location’ => ‘primary’,
‘container’ => ‘div’,
‘container_class’ => ‘menu_box’,
‘container_id’ => ‘Menu’,
‘menu_class’ => ‘ ‘,
‘menu_id’ => ”,
‘echo’ => true,
‘fallback_cb’ => ‘wp_page_menu’,
‘before’ => ”,
‘after’ => ”,
‘link_before’ => ”,
‘link_after’ => ”,
‘items_wrap’ => ‘<ul id=”%1$s” class=”%2$s”>%3$s</ul>’,
‘depth’ => 3,
‘walker’ => ”,
‘fallback_cb’ => ‘tannistha_menu_fallback’
));
?>
//显示源代码样式
<div id=“Menu” class=“menu_box”>
<ul id=“menu-menu-1” class=” “>
<li id=“menu-item-7” class=“menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-7”><a href=“http://127.0.0.1/”>Home</a></li>
</ul>
</div>
|
每个参数的详细介绍如下：
- $theme_locaton：(字符串)(可选)
默认值: None
用于在调用导航菜单时指定注册过的某一个导航菜单名，如果没有指定，则显示第一个。
|
1
|
wp_nav_menu(array( ‘theme_location’ =>‘primary’)); //调用第一个菜单
|
- $menu：(字符串)(可选)
默认值: None
使用导航菜单的名称调用菜单，可以是 id, slug, name (按顺序匹配的) 。
- $container：(字符串)(可选)
默认值: div
ul 父节点（这里指导航菜单的容器）的标签类型，只支持div 和 nav 标签, 如果是其它值, ul 父节点的标签将不会被显示。也可以用false（container => false）去掉ul父节点标签。
- $container_class：(字符串)(可选)
默认值: menu-{menu slug}-container
ul 父节点的 class 属性值。
- $container_id：(字符串)(可选)
默认值: None
ul 父节点的 id 属性值。
- $menu_class：(字符串)(可选)
默认值: menu
ul 节点的 class 属性值。
- $menu_id：(字符串)(可选)
默认值: menu slug, 自增长的
ul 节点的 id 属性值。
- $echo：(布尔型)(可选)
默认值: true (直接显示)
确定直接显示导航菜单还是返回 HTML 片段，如果想将导航的代码作为赋值使用，可设置为false。
- $fallback_cb：(字符串)(可选)
默认值: wp_page_menu (显示页面列表作为菜单)
用于没有在后台设置导航时调的回调函数。
- $before：(字符串)(可选)
默认值: None
显示在每个菜单链接前的文本。
- $after：(字符串)(可选)
默认值: None
显示在每个菜单链接后的文本。
- $link_before：(字符串)(可选)
默认值: None
显示在每个菜单链接文本前的文本。
- $link_after：(字符串)(可选)
默认值: None
显示在每个菜单链接文本后的文本。
- $items_wrap：(字符串)(可选)
默认值: None
使用字符串替换修改ul的class。
- $depth：(整型)(可选)
默认值: 0
显示菜单的深度, 当数值为 0 时显示所有深度的菜单。
- $walker：(对象型)(可选)
默认值: new Walker_Nav_Menu
示例
可以使用下面的函数调用 左边栏菜单：
|
1
2
3
4
5
|
<?php
if(function_exists(‘wp_nav_menu’)) {
wp_nav_menu(array( ‘theme_location’ => ‘left-menu’,‘container_id’=>‘menu_left’) );
}
?>
|
其中，’theme_location’ 后面的值 是 ‘left-menu’，就是调用前面注册的那个 左边栏菜单，而 ‘container_id’ 自定义为 ‘menu_left’，最终输出的html结构如下：
|
1
2
3
4
5
6
7
8
|
<div id=“menu_left” class=“menu-xxx-container”>
<ul class=“menu”>
<li><a href=“https://www.wpdaxue.com”>首页</a></li>
<li><a href=“https://www.wpdaxue.com/news”>WP资讯</a></li>
…………
<li><a href=“https://www.wpdaxue.com/announce”>本站相关</a></li>
</ul>
</div>
|
给li增加class
|
1
2
3
4
5
6
7
|
function qianxing_menu_classes($classes, $item, $args) {
if($args->theme_location == ‘primary’) { //这里的primary是菜单的id
$classes[] = ‘custom-class’;
}
return $classes;
}
add_filter(‘nav_menu_css_class’,‘qianxing_menu_classes’,1,3);
|
|
1
2
3
4
5
6
|
class My_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl(&$output, $depth) {
$indent = str_repeat(“t”, $depth);
$output .= “n$indent<ul class=”my-sub-menu”>n”;
}
}
|
多级菜单自定义
方法一：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//如果存在一个叫header-menu的菜单
if ( has_nav_menu( ‘header-menu’ ) ) {
//一个常规的wp_nav_menu函数，注意看walker部分
wp_nav_menu( array(
‘theme_location’ => ‘header-menu’,
‘menu’ => ‘header-menu’,
‘depth’ => 0,
‘container’ => ”,
‘container_class’ => ”,
‘menu_class’ => ‘super’,
‘items_wrap’ => ‘<ul id=”%1$s” class=”%2$s”>%3$s</ul>’,
‘walker’ => new Header_Menu_Walker() ) ); //这里new一个新实例
}
|
这个类可以写在functions.php里
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
/**
* Header_Menu_Walker类
* 这类名当然你随意了
*/
class Header_Menu_Walker extends Walker_Nav_Menu {
/**
* start_lvl函数
* 这函数主要处理ul，如果ul有一些特殊的样式，修改这里
* 他这里面的$depth就是层级，一级二级三级
* $args是上面wp_nav_menu()函数定义的那个数组
*
*/
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = ( $depth > 0 ? str_repeat( “t”, $depth ) : ” ); // 缩进
$display_depth = ( $depth + 1); // 层级默认是0级，这里+1为了从1开始算
$classes = array(
‘sub-menu’, //ul是个子菜单的时候，添加这个样式
( $display_depth % 2 ? ‘menu-odd’ : ‘menu-even’ ), //子菜单奇数加样式menu-odd,偶数加样式menu-even
( $display_depth >=2 ? ‘sub-sub-menu’ : ” ), //三级菜单的时候，添加这个样式
‘menu-depth-‘ . $display_depth, //这样式主要能看出当前菜单的层级，menu-depth-2是二级呗
);
$class_names = implode( ‘ ‘, $classes ); //用空格分割多个样式名
$output .= “n” . $indent . ‘<ul class=”‘ . $class_names . ‘”>’ . “n”; //把刚才定义的，那么多的样式，写到ul里面
}
/**
* start_el函数
* 主要处理li和里面的a
* $depth和$args同上
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args An array of arguments. @see wp_nav_menu()
* @param int $id Current item ID.
*/
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
global $wp_query;
$indent = ( $depth > 0 ? str_repeat( “t”, $depth ) : ” ); // 缩进
// 定义li的样式
$depth_classes = array(
( $depth == 0 ? ‘main-menu-item’ : ‘sub-menu-item’ ), //一级的li，就main-menu-item，其余全部sub-menu-item
( $depth >=2 ? ‘sub-sub-menu-item’ : ” ), //三级的li，添加这个样式
( $depth % 2 ? ‘menu-item-odd’ : ‘menu-item-even’ ), //奇数加样式menu-item-odd,偶数加样式menu-item-even
‘menu-item-depth-‘ . $depth, //层级同上
);
$depth_class_names = esc_attr( implode( ‘ ‘, $depth_classes ) );
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = esc_attr( implode( ‘ ‘, apply_filters( ‘nav_menu_css_class’, array_filter( $classes ), $item ) ) ); //这句我没看懂，不知道是在干啥
// 把样式合成到li里面
$output .= $indent . ‘<li id=”nav-menu-item-‘. $item->ID . ‘” class=”‘ . $depth_class_names . ‘ ‘ . $class_names . ‘”>’;
// 处理a的属性
$attributes = ! empty( $item->attr_title ) ? ‘ title=”‘ . esc_attr( $item->attr_title ) .‘”‘ : ”;
$attributes .= ! empty( $item->target ) ? ‘ target=”‘ . esc_attr( $item->target ) .‘”‘ : ”;
$attributes .= ! empty( $item->xfn ) ? ‘ rel=”‘ . esc_attr( $item->xfn ) .‘”‘ : ”;
$attributes .= ! empty( $item->url ) ? ‘ href=”‘ . esc_attr( $item->url ) .‘”‘ : ”;
$attributes .= ‘ class=”menu-link ‘ . ( $depth > 0 ? ‘sub-menu-link’ : ‘main-menu-link’ ) . ‘”‘;
//添加a的样式
$item_output = sprintf( ‘%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s’,
$args->before,
$attributes,
$args->link_before,
apply_filters( ‘the_title’, $item->title, $item->ID ),
$args->link_after,
$args->after
);
//上面这个item_output我要说一下。这里写的有点死。
//如果一级菜单是<a><span>我是菜单</span></a>
//然而其他级菜单是<a><strong>我是菜单</strong></a>
//这样的情况，$args->link_before是固定值就不行了，要自行判断
//$link_before = $depth == 0 ? ‘<span>’ : ‘<strong>’;
//$link_after = $depth == 0 ? ‘</span>’ : ‘</strong>’;
//类似这个意思。
$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
}
|
增加上面代码的时候遇到一个问题，不能给has_children的li中增加class，找了半天找到解决方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
class Selective_Walker extends Walker_Nav_Menu {
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
$id_field = $this->db_fields[‘id’];
if ( is_object( $args[0] ) ) {
$args[0]->has_children = !empty( $children_elements[$element->$id_field] );
}
return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
function start_el( &$output, $item, $depth, $args ) {
if ( $args->has_children ) {
$item->classes[] = ‘has_children’;
}
parent::start_el(&$output, $item, $depth, $args);
}
}
|
https://wordpress.stackexchange.com/questions/16818/add-has-children-class-to-parent-li-when-modifying-walker-nav-menu
最终代码如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
/* * Header_Menu_Walker类
* 这类名当然你随意了
* */
class Header_Menu_Walker extends Walker_Nav_Menu {
/**
* start_lvl函数
* 这函数主要处理ul，如果ul有一些特殊的样式，修改这里
* 他这里面的$depth就是层级，一级二级三级
* $args是上面wp_nav_menu()函数定义的那个数组
*
*/
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = ( $depth > 0 ? str_repeat( “t”, $depth ) : ” ); // 缩进
$display_depth = ( $depth + 1); // 层级默认是0级，这里+1为了从1开始算
$classes = array(
‘sub’, //ul是个子菜单的时候，添加这个样式
( $display_depth % 2 ? ‘menu-odd’ : ‘menu-even’ ), //子菜单奇数加样式menu-odd,偶数加样式menu-even
( $display_depth >=2 ? ‘sub’ : ” ), //三级菜单的时候，添加这个样式
‘menu-depth-‘ . $display_depth, //这样式主要能看出当前菜单的层级，menu-depth-2是二级呗
);
$class_names = implode( ‘ ‘, $classes ); //用空格分割多个样式名
$output .= “n” . $indent . ‘<ul class=”‘ . $class_names . ‘”>’ . “n”; //把刚才定义的，那么多的样式，写到ul里面
}
/**
* start_el函数
* 主要处理li和里面的a
* $depth和$args同上
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param array $args An array of arguments. @see wp_nav_menu()
* @param int $id Current item ID.
*/
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
$id_field = $this->db_fields[‘id’];
if ( is_object( $args[0] ) ) {
$args[0]->has_children = !empty( $children_elements[$element->$id_field] );
}
return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
if ( $args->has_children ) {
$item->classes[] = ‘has_children’;
}
global $wp_query;
$indent = ( $depth > 0 ? str_repeat( “t”, $depth ) : ” ); // 缩进
// 定义li的样式
$depth_classes = array(
( $depth == 0 ? ‘parent’ : ‘sub-menu-item’ ), //一级的li，添加main-menu-item，除了一级的都加sub-menu-item
( $depth >=2 ? ‘sub-sub-menu-item’ : ” ), //三级的li，添加这个样式
( $depth % 2 ? ‘menu-item-odd’ : ‘menu-item-even’ ), //奇数加样式menu-item-odd,偶数加样式menu-item-even
‘menu-item-depth-‘ . $depth, //层级同上
);
$depth_class_names = esc_attr( implode( ‘ ‘, $depth_classes ) );
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = esc_attr( implode( ‘ ‘, apply_filters( ‘nav_menu_css_class’, array_filter( $classes ), $item ) ) ); //这句我没看懂，不知道是在干啥
// 把样式合成到li里面
$output .= $indent . ‘<li id=”nav-menu-item-‘. $item->ID . ‘” class=”‘ . $depth_class_names . ‘ ‘ . $class_names . ‘”>’;
// 处理a的属性
$attributes = ! empty( $item->attr_title ) ? ‘ title=”‘ . esc_attr( $item->attr_title ) .‘”‘ : ”;
$attributes .= ! empty( $item->target ) ? ‘ target=”‘ . esc_attr( $item->target ) .‘”‘ : ”;
$attributes .= ! empty( $item->xfn ) ? ‘ rel=”‘ . esc_attr( $item->xfn ) .‘”‘ : ”;
$attributes .= ! empty( $item->url ) ? ‘ href=”‘ . esc_attr( $item->url ) .‘”‘ : ”;
$attributes .= ‘ class=”menu-link ‘ . ( $depth > 0 ? ‘sub-menu-link’ : ‘main-menu-link’ ) . ‘”‘;
//添加a的样式
$item_output = sprintf( ‘%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s’,
$args->before,
$attributes,
$args->link_before,
apply_filters( ‘the_title’, $item->title, $item->ID ),
$args->link_after,
$args->after
);
//上面这个item_output我要说一下。这里写的有点死。
//如果一级菜单是<a><span>我是菜单</span></a>
//然而其他级菜单是<a><strong>我是菜单</strong></a>
//这样的情况，$args->link_before是固定值就不行了，要自行判断
//$link_before = $depth == 0 ? ‘<span>’ : ‘<strong>’;
//$link_after = $depth == 0 ? ‘</span>’ : ‘</strong>’;
//类似这个意思。
$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
}
|
方法二：
wordpress输出bootstrap的菜单结构这个方法官网已经出了新版本bootstrap4的了。以下是老版本。使用时，用function文件夹内整理的。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
<?php
/**
* Class Name: wp_bootstrap_navwalker
* GitHub URI: https://github.com/twittem/wp-bootstrap-navwalker
* Description: A custom WordPress nav walker class to implement the Bootstrap 3 navigation style in a custom theme using the WordPress built in menu manager.
* Version: 2.0.4
* Author: Edward McIntyre – @twittem
* License: GPL-2.0+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/
class wp_bootstrap_navwalker extends Walker_Nav_Menu {
/**
* @see Walker::start_lvl()
* @since 3.0.0
*
* @param string $output Passed by reference. Used to append additional content.
* @param int $depth Depth of page. Used for padding.
*/
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( “t”, $depth );
$output .= “n$indent<ul role=”menu” class=” dropdown-menu”>n”;
}
/**
* @see Walker::start_el()
* @since 3.0.0
*
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param int $current_page Menu item ID.
* @param object $args
*/
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( “t”, $depth ) : ”;
/**
* Dividers, Headers or Disabled
* =============================
* Determine whether the item is a Divider, Header, Disabled or regular
* menu item. To prevent errors we use the strcasecmp() function to so a
* comparison that is not case sensitive. The strcasecmp() function returns
* a 0 if the strings are equal.
*/
if ( strcasecmp( $item->attr_title, ‘divider’ ) == 0 && $depth === 1 ) {
$output .= $indent . ‘<li role=”presentation” class=”divider”>’;
} else if ( strcasecmp( $item->title, ‘divider’) == 0 && $depth === 1 ) {
$output .= $indent . ‘<li role=”presentation” class=”divider”>’;
} else if ( strcasecmp( $item->attr_title, ‘dropdown-header’) == 0 && $depth === 1 ) {
$output .= $indent . ‘<li role=”presentation” class=”dropdown-header”>’ . esc_attr( $item->title );
} else if ( strcasecmp($item->attr_title, ‘disabled’ ) == 0 ) {
$output .= $indent . ‘<li role=”presentation” class=”disabled”><a href=”#”>’ . esc_attr( $item->title ) . ‘</a>’;
} else {
$class_names = $value = ”;
$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 ) );
if ( $args->has_children )
$class_names .= ‘ dropdown’;
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 );
$id = $id ? ‘ id=”‘ . esc_attr( $id ) . ‘”‘ : ”;
$output .= $indent . ‘<li’ . $id . $value . $class_names .‘>’;
$atts = array();
$atts[‘title’] = ! empty( $item->title ) ? $item->title : ”;
$atts[‘target’] = ! empty( $item->target ) ? $item->target : ”;
$atts[‘rel’] = ! empty( $item->xfn ) ? $item->xfn : ”;
// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
$atts[‘href’] = ‘#’;
$atts[‘data-toggle’] = ‘dropdown’;
$atts[‘class’] = ‘dropdown-toggle’;
$atts[‘aria-haspopup’] = ‘true’;
} else {
$atts[‘href’] = ! empty( $item->url ) ? $item->url : ”;
}
$atts = apply_filters( ‘nav_menu_link_attributes’, $atts, $item, $args );
$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;
/*
* Glyphicons
* ===========
* Since the the menu item is NOT a Divider or Header we check the see
* if there is a value in the attr_title property. If the attr_title
* property is NOT null we apply it as the class name for the glyphicon.
*/
if ( ! empty( $item->attr_title ) )
$item_output .= ‘<a’. $attributes .‘><span class=”glyphicon ‘ . esc_attr( $item->attr_title ) . ‘”></span> ’;
else
$item_output .= ‘<a’. $attributes .‘>’;
$item_output .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;
$item_output .= ( $args->has_children && 0 === $depth ) ? ‘ <span class=”caret”></span></a>’ : ‘</a>’;
$item_output .= $args->after;
$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
}
/**
* Traverse elements to create list from elements.
*
* Display one element if the element doesn’t have any children otherwise,
* display the element and its children. Will only traverse up to the max
* depth and no ignore elements under that depth.
*
* This method shouldn’t be called directly, use the walk() method instead.
*
* @see Walker::start_el()
* @since 2.5.0
*
* @param object $element Data object
* @param array $children_elements List of elements to continue traversing.
* @param int $max_depth Max depth to traverse.
* @param int $depth Depth of current element.
* @param array $args
* @param string $output Passed by reference. Used to append additional content.
* @return null Null on failure with no changes to parameters.
*/
public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
if ( ! $element )
return;
$id_field = $this->db_fields[‘id’];
// Display this element.
if ( is_object( $args[0] ) )
$args[0]->has_children = ! empty( $children_elements[ $element->$id_field ] );
parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
/**
* Menu Fallback
* =============
* If this function is assigned to the wp_nav_menu’s fallback_cb variable
* and a manu has not been assigned to the theme location in the WordPress
* menu manager the function with display nothing to a non-logged in user,
* and will add a link to the WordPress menu manager if logged in as an admin.
*
* @param array $args passed from the wp_nav_menu function.
*
*/
public static function fallback( $args ) {
if ( current_user_can( ‘manage_options’ ) ) {
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 .= ‘<ul’;
if ( $menu_id )
$fb_output .= ‘ id=”‘ . $menu_id . ‘”‘;
if ( $menu_class )
$fb_output .= ‘ class=”‘ . $menu_class . ‘”‘;
$fb_output .= ‘>’;
$fb_output .= ‘<li><a href=”‘ . admin_url( ‘nav-menus.php’ ) . ‘”>Add a menu</a></li>’;
$fb_output .= ‘</ul>’;
if ( $container )
$fb_output .= ‘</’ . $container . ‘>’;
echo $fb_output;
}
}
}
|
问题一：解决三级菜单添加类名
对照上面代码，替换部分为：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 给has_children下 的a增加属性
if ( $args->has_children && $depth === 0 ) {
$atts[‘href’] = ‘#’;
$atts[‘data-toggle’] = ‘dropdown’;
$atts[‘class’] = ‘nav-link fwMedium text-uppercase dropdown-toggle’;
$atts[‘aria-haspopup’] = ‘true’;
} elseif ( $depth === 1 ){
$atts[‘href’] = ! empty( $item->url ) ? $item->url : ”;
$atts[‘class’] = ‘dropdown-item’; //子菜单所有
} else {
$atts[‘href’] = ! empty( $item->url ) ? $item->url : ”;
$atts[‘class’] = ‘nav-link’; //子菜单所有
}
|
问题二：给has_children的a标签增加图标
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
if ( ! empty( $item->attr_title ) )
$item_output .= ‘<a’. $attributes .‘><span class=”glyphicon ‘ . esc_attr( $item->attr_title ) . ‘”></span> ’;
if ( $args->has_children && $depth === 0 )
{
$item_output .= ‘<a’. $attributes .‘>’;
$item_output .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after.‘ <span class=”fas fa-caret-down disno ‘ . esc_attr( $item->attr_title ) . ‘”>’;
}
else
{
$item_output .= ‘<a’. $attributes .‘>’;
$item_output .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;
}
$item_output .= ( $args->has_children && 0 === $depth ) ? ‘ </a>’ : ‘</a>’;
$item_output .= $args->after;
$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
|
类别：WordPress开发、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
猜你喜欢GUESS YOU LIKE
还没有任何评论，赶紧来占个楼吧！