Question

我有一堆以wordpress命名的图片。例如：

页面名称：heart-health
图片名称：heart-health.png

我的主菜单有1个子菜单级别，对于子级别的每个页面名称，我想将图像显示为设置在左侧的背景图像。我尝试了很多不同的方法，但没有运气。

我知道您可以在管理员的菜单中添加自定义文字，但我希望这一切都能自动完成。

我在“nav-menu-template.php”中找到了子级别菜单项的开头和结尾。 “类-WP-walker.php”

目前，当您翻转时，我只是在所有子菜单项上显示相同的图片，但这只是使用CSS。

.menu ul ul :hover > a{color:#000000;background-color: #eeeeee; background-image:url(images/menu-images/fruit.png); background-repeat:no-repeat;}

非常感谢任何帮助或建议。

Answer 1

最好的方法是通过CSS。

例如

.menu ul ul .custom-class a { ... }
.menu ul ul .custom-class:hover a { ... }

您可以在WordPress菜单管理中为每个菜单项设置自定义类，只需确保选中“屏幕选项”（页面右上角）中的“CSS类”复选框。

另外，为了方便起见，我建议您在菜单中制作一张图片精灵，以便您的CSS代码更加简单。

.menu ul ul a {
  background:url('/url-to-sprite.png') no-repeat 0px 0px;
}

.menu ul ul :hover a {
  background-position:-20px 0px;
}

.menu ul ul .custom-class a {
  background-position:0px -20px;
}

.menu ul ul .custom-class:hover a {
  background-position:-20px -20px;
}

Wordpress。子菜单不同的背景图像为每个链接

1 个答案: