如何在导航栏添加图片?

很多客户有在导航栏添加产品图片的需求,Wordpress不支持这一项,需要我们去创建和自定义。

function函数添加这个即可

add_filter('wp_nav_menu_objects', 'my_wp_nav_menu_objects', 10, 2);
function my_wp_nav_menu_objects( $items, $args ) {
	foreach( $items as &$item ) {
		$img = get_field('nav_product', $item);
		if( $img ) {
			$item->title = '<img src="'.$img.'">'.$item->title;
		}
	}
	return $items;
}

其中 $item->title = '<img src="'.$img.'">'.$item->title;意思是在title添加图片,imgimg 来着img = get_field('nav_product', $item);,这个是ACF插件创建的自定义分类

前台header.php里面的导航栏 不需要修改任何地方,因为已经注入了图片。

if (has_nav_menu('primary')) {
							wp_nav_menu(array(
								'theme_location' => 'primary',
								'menu'              => 'primary',
								'depth'             => 0,
								'container'         => '',
								'container_class'   => '',
								'menu_class'        => 'nav navbar-nav',
								'items_wrap'        => '<ul class="%2$s">%3$s</ul>'
							));
						}

	```