我怎样才能在wordpress菜单中使用图像？

Question

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

Answer 1

您可以使用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号，在上面的示例中 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属性设置带图像背景的菜单项。

Answer 2

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

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

创建菜单并查看页面来源以查找菜单ID。您可以将背景图像设置为菜单项并使用CSS隐藏文本。使用上面的例子：

  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;
}

将width和height属性设置为图像的大小。 text-indent属性会将菜单链接文本隐藏在屏幕外，而background-image属性则显示图像。

对每个菜单项重复。

Answer 3

另一个选项是在WP设置菜单中，添加<img src=".."/>，然后添加标题 这样它就可以在菜单中显示图像，而无需更改代码。或者你也可以使用css