WordPress函数wp_nav_menu给a标签添加class

描述

在进行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>

从上面的代码中我们可以看出,a标签是有class的,但是WordPress函数wp_nav_menu的参数中并没有给a添加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)
?>

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

开始

一、添加自定义hook

function add_menu_link_class( $atts, $item, $args ) {
	if (property_exists($args, 'link_class')) {
		$atts['class'] = $args->link_class;
	}
	return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 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['link_class']      = 'menu-link menu-toggle';
	$args['link_before']     = '<span class="menu-text">';
	$args['link_after']      = '</span>';
	wp_nav_menu($args)
?>

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

$args['link_class']      = 'menu-link menu-toggle';

实现思路

调用WordPress的nav_menu_link_attributes hook,从传给wp_nav_menu的参数中得到 link_class ,之后插入a 的class中。

人已赞赏
建站程序

WordPress函数wp_nav_menu给li标签添加class

2020-11-17 21:48:43

建站程序

WordPress获取模板或者页面名称

2020-11-19 10:17:42

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