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');

这将允许您在后端分配菜单。转到外观 - ＆gt;菜单。

然后，在您尝试调用菜单的位置，添加以下代码：

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会自动为活动菜单项提供当前类。我希望这有帮助。老实说，这是最好（正确）的方式。在某些时候，您可能想要切换菜单项的排列或添加子菜单或有一个您不想显示的页面。使用这样的菜单将对您有所帮助。

在Wordpress主题中使用CSS导航栏

1 个答案: