当前位置：文江博客话题详情

WordPress：如何为导航菜单分配不同的颜色

发布于 2024-11-17 19:38:05 字数 151 浏览 1 评论 0原文

我想给我的顶部导航菜单按钮单独的颜色。例如，我希望“主页”菜单按钮的颜色与“关于”菜单按钮的颜色不同。有人可以帮我解决这个问题吗？我的 CSS 很糟糕。

有没有 WordPress 插件可以做到这一点。

我希望有人帮助我。提前致谢。

托马斯

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧街凉风 2024-11-24 19:38:05

如果您使用 Wordpress 菜单管理，您可以通过“外观”下的“菜单”选项为每个菜单项分配一个类，您只需创建多个具有所需颜色的 css 类，然后单击菜单项上的下拉菜单并添加它。

.red { color:red }

在此处输入图像描述

If you're using Wordpress menu management you can assign a class to every menu item through the "Menus" option under "Appearance", you just have to create multiple css classes with the desired colors and click the drop-down on the menu item and add it.

.red { color:red }

enter image description here

回复收藏 0 原文

绿萝 2024-11-24 19:38:05

首先，您知道如何打开 style.css（或适合您主题的任何主 CSS 文件）。打开后，为您想要更改的任意多个菜单项添加跨度类。例如：

.item-1 {
color:red;
}
.item-2 {
color:blue;
}
.item-3 {
color:purple;
}
.item-4 {
color:orange;
}
.item-5 {
color:green;
}

然后，打开 page.php（或任何主 PHP 文件）并将这些 CSS span 类包装在菜单项的 html 周围。然后，您当然可以添加一些简单的 :hover 效果来更改鼠标滚动时的颜色。只需在 CSS 文件中重新输入 CSS 项并在其后添加 :hover 即可。例如：

.item-1:hover {
color:pink;
}

那么，好了！希望能有所帮助。如果您从核心构建网站，它总是会更有趣，并且您可以更好地控制周围的事物。如果您对此有任何疑问，请告诉我。

First, do you know how to open the style.css (or whatever the main CSS file is for your theme). Once open, add span classes for however many menus items you want to change. For example:

.item-1 {
color:red;
}
.item-2 {
color:blue;
}
.item-3 {
color:purple;
}
.item-4 {
color:orange;
}
.item-5 {
color:green;
}

Then, open your page.php (or whatever the main PHP file is) and wrap these CSS span classes around the html for the menu items. Then, you can of course add some simple :hover effects to change the color when the mouse scrolls over. Just retype the CSS item in the CSS file and add :hover after it. For example:

.item-1:hover {
color:pink;
}

So, there ya go! Hope that helps a bit. It's always more fun and you have better control of what's around you if you build a site from the core. Lemme know if you have any questions on that.

回复收藏 0 原文