如何使用wordpress菜单中的图像？

我的整个网站是用wordpress制作的。所有菜单都是文本链接。我想通过使用图像链接而不是文本链接来突出显示其中一个。如何在Wordpress中做到这一点？

您可以使用CSS属性突出显示特定的菜单项。要设置特定菜单项的样式，请参见以下小指南：

假设您在wordpress菜单中创建了一个菜单项“HOME”。在wordpress中创建时，会为该菜单项指定一个特定的ID和类，如：

<li id="menu-item-1704" class="menu-item menu-item-type-post_type menu-item-1704"><a href="http://www.wordpress.org">Home</a></li>

这里需要注意的是WordPress总是为每个“菜单项”分配一个唯一的ID号，在上面的示例中，该ID号是1704-

menu-item-1704

因此，打开主题的样式表（样式菜单），通常是style.css或打开主题的header.php文件，并在head之间添加以下代码：

#menu-item-1704
 {
   background:red; 
   display: block;
   background-image:url('http://url.to/yourbackgroundimage.jpg');
   background-repeat: no-repeat;
   width: 100px;
   height: 50px;
 }

这将设置菜单中ID为1704的特定菜单项的样式。

---

您还可以使用

background image

css属性使用图像背景设置菜单项的样式

每个菜单项都有一个唯一的CSS ID，如以下示例所示：

<li id="menu-item-765"><a href="http://menu.item/url/">Some Menu Item</a></li>

将宽度和高度属性设置为图像的大小。文本缩进属性隐藏屏幕外的菜单链接文本，而背景图像属性显示图像

---

对每个菜单项重复此操作。

另一个选项在WP设置菜单中，添加

，然后添加标题

---

这样，它可以在菜单中显示图像，而无需您编辑代码。或者您也可以使用CSS

您可以更改样式表吗？您可以通过向该菜单选项添加一个类并对其进行适当的样式设置来实现这一点。请参阅我的答案@user2592986-

  li#menu-item-765 a {
   display: block;
   background-image:url('http://url.to/yourbackgroundimage.jpg');
   background-repeat: no-repeat;
   width: 100px;
   height: 50px;
   text-indent: -9000px;
}