1

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

4

3 回答 3

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

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

对每个菜单项重复。

于 2013-07-18T12:44:15.947 回答
1

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

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

&lt;li id=&quot;menu-item-1704&quot; class=&quot;menu-item menu-item-type-post_type menu-item-1704&quot;&gt;&lt;a href=&quot;http://www.wordpress.org&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;

这里要注意的是 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-imagecss 属性为具有图像背景的菜单项设置样式。

于 2013-07-17T20:42:10.720 回答
0

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

于 2017-06-21T18:19:45.690 回答