WordPress函数wp_nav_menu给li标签添加class

在进行WordPress二开的时候会经常用到wp_nav_menu函数,而为了减少自己写css,我们大多数都会使用第三方css框架,比如bs的。

描述

在进行WordPress二开的时候会经常用到wp_nav_menu函数,而为了减少自己写css,我们大多数都会使用第三方css框架,比如bs的。

在BS中菜单代码如下:

<div class="header-menu-wrapper header-menu-wrapper-left" id="kt_header_menu_wrapper">
	<div id="kt_header_menu" class="header-menu header-menu-left header-menu-mobile header-menu-layout-default">
		<!--begin::Header Nav-->
		<ul class="menu-nav">
			<li class="menu-item">
				<a href="javascript:;" class="menu-link menu-toggle">
					<span class="menu-text">Dashboard</span>
				</a>
			</li>
		</ul>
		<!--end::Header Nav-->
	</div>
	<!--end::Header Menu-->
</div>

从上面的代码中我们可以看出,li标签是有class的,但是WordPress函数wp_nav_menu的参数中并没有给li添加class的代码,常规如下:

								<?php
								$args['menu']            = 'menu-1';
								$args['menu_class']      = 'menu-nav';
								$args['container']       = 'div';
								$args['container_class'] = 'header-menu header-menu-left header-menu-mobile header-menu-layout-default';
								$args['container_id']    = 'kt_header_menu';
								wp_nav_menu($args)
								?>

如果我们这样直接使用,输出的li标签是没有BS的class的,这时候就得按照BS的菜单重写css样式,那么如果添加自定义class呢?

开始

一、添加自定义hook

function add_additional_class_on_li($classes, $item, $args) {
	if(isset($args->add_li_class)) {
		$classes[] = $args->add_li_class;
	}
	return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);

二、重写调用菜单函数如下:

								<?php
								$args['menu']            = 'menu-1';
								$args['menu_class']      = 'menu-nav';
								$args['container']       = 'div';
								$args['container_class'] = 'header-menu header-menu-left header-menu-mobile header-menu-layout-default';
								$args['container_id']    = 'kt_header_menu';
								$args['add_li_class']    = 'menu-item';
								wp_nav_menu($args)
								?>

其中与之前代码不一样的是:

$args['add_li_class']    = 'menu-item';

实现思路

调用WordPress的nav_menu_css_class hook,从传给wp_nav_menu的参数中得到 add_li_class ,之后插入li 的class中。

人已赞赏
建站程序

WordPress判断邮箱是否存在

2020-5-27 17:30:13

建站程序

WordPress函数wp_nav_menu给a标签添加class

2020-11-17 21:55:08

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索