html - 在 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

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

参见此处:http://codex.wordpress.org/Function_Reference/wp_nav_menu

以这种方式正确使用菜单会自动将此类应用到事件菜单项:

.current-menu-item

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

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