如何在导航栏添加图片?
很多客户有在导航栏添加产品图片的需求,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添加图片,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>'
));
}
```