在 Wordpress 主题中使用 CSS 作为导航栏

Question

我有一个自定义的 WordPress 主题，我的导航栏实现得很好，但是我有一些 CSS (style.css)：

#navbar li a.active{

background-color:#000;
color:#fff;
border-top: 3px solid; 
border-color:#d22b2b;
}

这是当前页面所在按钮的样式，因此它显示了当前处于活动状态的页面，这在 WordPress 中实现有点棘手，因为 HTML (index.php) 是这样的：

<div id="navbar">
<div class="navbarcontainer">

          <ul align="center">
          <?php wp_list_pages('title_li=');?>

          </ul>

</div>
</div>

现在我无法添加class="active"，因为我看不到无序列表中的列表项。 需要一种可以将class="active" 添加到每个页面的方法。

Answer 1

我没有足够的代表发表评论，但只是好奇为什么不使用原生 WordPress 菜单？如果你使用 wp_nav_menu(); 也会让你的生活更轻松。

请看这里：http://codex.wordpress.org/Function_Reference/wp_nav_menu

以这种方式正确使用菜单会自动将此类应用于活动菜单项：

.current-menu-item

这只是本机功能。如果您决定这样做，请告诉我，我很乐意提供帮助。

在你的functions.php文件中添加：

register_nav_menus('menu_slug' => 'Menu Name');

这将允许您在后端分配一个菜单。转到外观 -> 菜单。

然后在您尝试调用菜单的地方添加以下代码：

wp_nav_menu('menu'=> 'menu_slug');

这将拉取您在后端创建的菜单。您也可以将很多参数传递给 wp_nav_menu 函数。

$defaults = array(
    'theme_location'  => '',
    'menu'            => '',
    'container'       => 'div',
    'container_class' => '',
    'container_id'    => '',
    'menu_class'      => 'menu',
    'menu_id'         => '',
    'echo'            => true,
    'fallback_cb'     => 'wp_page_menu',
    'before'          => '',
    'after'           => '',
    'link_before'     => '',
    'link_after'      => '',
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    'depth'           => 0,
    'walker'          => ''

);

如果您以这种方式使用它，请将此代码添加到您的主题中，然后：

    wp_nav_menu ( $defaults );

您会注意到，如果您这样做，WordPress 会自动为活动菜单项提供当前类。我希望这有帮助。老实说，这是最好的（正确的）方法。在某些时候，您可能想要切换菜单项的排列或添加子菜单或有一个您不想显示的页面。使用这样的菜单将极大地帮助您。