Html Wordpress导航-活动样式（CSS）

我正在开发的网站位于

我将我的主题转换为WordPress主题，我不太确定如何使我的导航以同样的方式工作

在ryanbenson.info上的上一个版本中，各个页面调用不同的CSS文档，从而减弱了导航

**请注意，导航是图像，顶部的图像会随着您的悬停而褪色

---

现在CSS和标题文档是整个网站的标准文档，我不知道如何设计它。

这在某种程度上取决于您的工作方式，但一般的解决方案是：

检查当前URL

如果链接指向该URL，请应用使其褪色的类

看起来这个菜单是烘焙到你的标题中的，而不是使用WordPress的任何菜单功能。因此，如果您的代码如下所示：

<a href="/">Home</a>
<a href="/about">About</a>
<a href="/work">Work</a>
<a href="/contact">Contact</a>

相反，您会有如下内容：

<a <?= is_home() ? 'class="current_page"' : '' ?> href="/">Home</a>
<a <?= is_page('about') ? 'class="current_page"' : '' ?> href="/about">About</a>
<a <?= is_page('work') ? 'class="current_page"' : '' ?> href="/work">Work</a>
<a <?= is_page('contact') ? 'class="current_page"' : '' ?> href="/contact">Contact</a>

---

一个好主意是将函数集成到主题中

首先，必须在functions.php中注册菜单

function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );

然后，您必须将header.php中的当前菜单替换为：

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

然后转到wp admin->外观->菜单并添加菜单。

---

现在您有了一个工作菜单，其中包含当前菜单项的类。现在，您可以像以前一样设置新菜单的样式，并突出显示当前菜单项。我建议您使用css精灵或更好的图标字体，而不是图片。

您必须将问题缩小到细节，以获得有用的答案我正在寻找将特定css样式分配到导航的不同部分的最佳方法，具体取决于我的页面。假设我在主页上，我想设置home按钮的样式以匹配悬停样式。每个页面都是一样的。我很好奇菜单是否只可以用css。它成功了：）哇！我今天来看看！这似乎有点多，但它肯定是冷静的，你可以找到它！谢谢，干得好！请考虑在编码时所有的东西都被分割成部分的事实。WordPress@RyanBenson：是，但这些部分会根据请求动态呈现。仅仅因为你的页眉在header.php中并不意味着你不知道你在哪个页面上。我不明白你当时的意思。如果您愿意，请用Wordpress来描述。@RyanBenson:好的，我添加了一个WP特定的示例。@RyanBenson:我不确定您如何认为这与符号字体的使用相冲突。这只是将一个类添加到nav菜单项中，该菜单项反映当前页面，以便您可以对其进行不同的样式设置。您在导航项中放置的内容和应用的样式完全取决于您。我了解Wordpress菜单系统，我的问题是我不知道如何将Wordpress菜单与字体图标系统结合在一起。具体来说，代表当前页面的菜单项的样式是

当前菜单项

。