我的整个网站都是用 wordpress 制作的。所有菜单都在文本链接中。我想通过使用图像链接而不是文本链接来突出显示其中一个。我如何在 Wordpress 中做到这一点?
3 回答
每个菜单项都有一个唯一的 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 属性则显示图像。
对每个菜单项重复。
您可以使用 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 属性为具有图像背景的菜单项设置样式。
另一个选项是在 WP 设置菜单中,添加<img src=".."/>
然后您的标题,这样它就可以在菜单中显示图像,而无需您编辑代码。或者你也可以使用 CSS