使用 Bootstrap 将活动类动态添加到 Wordpress 中的自定义菜单

Question

我有一个旧网站，我必须将其复制到 Wordpress。我创建了一个自定义主题来实现这一点。我有一个自定义导航栏，我正在拉入一个自定义 sidebar.php 文件。正如您在我的标记中看到的那样，我还按页面 ID 连接页面。我无法动态添加一个活动类以在导航栏上突出显示它们所在的页面。我尝试了很多jQuery，但无济于事。我还与 boostrap 相关联以提高响应能力。

任何帮助将不胜感激！

<div id="leftnav">
  <ul class="nav-bar">
    <li>
      <!-- Link to section at level 2 -->
      <a href="<?php echo get_page_link(202); ?>">The Battle &amp; Beyond</a>
      <!-- navigation object : Menu - Left Navigation -->
      <ul class="nav-bar">
        <li><a href="<?php echo get_page_link(204); ?>">Map</a></li>
        <li><a href="<?php echo get_page_link(212); ?>">The Ravine</a></li>
        <li><a href="<?php echo get_page_link(215); ?>">Groggin's Field</a></li>
        <li><a href="<?php echo get_page_link(218); ?>">Oldbridge Village</a></li>
        <li><a href="<?php echo get_page_link(220); ?>">Battle Artillery</a></li>
        <li><a href="<?php echo get_page_link(224); ?>">King William's Camp</a></li>
        <li><a href="<?php echo get_page_link(226); ?>">King James's Camp</a></li>
        <li><a href="<?php echo get_page_link(228); ?>">Crossing the Ford</a></li>
        <li><a href="<?php echo get_page_link(233); ?>">The River Crossing</a></li>
        <li><a href="<?php echo get_page_link(235); ?>">King William's Crossing</a></li>
        <li><a href="<?php echo get_page_link(237); ?>">The Retreat</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

执行此操作的最快方法（但不是推荐的“WordPress”执行此操作的方法）是在您的 <li> 或 <a> 标签上添加一个 if 语句来检查当前页面 ID，如下所示：

<div id="leftnav">
  <ul class="nav-bar">
    <li>
      <!-- Link to section at level 2 -->
      <a href="<?php echo get_page_link(202); ?>">The Battle &amp; Beyond</a>
      <!-- navigation object : Menu - Left Navigation -->
      <ul class="nav-bar">
        <li <?= (is_page(204)) ? 'class="active"' : ''; ?>><a href="<?php echo get_page_link(204); ?>">Map</a></li>
        <li <?= (is_page(212)) ? 'class="active"' : ''; ?>><a href="<?php echo get_page_link(212); ?>">The Ravine</a></li>
        <li <?= (is_page(215)) ? 'class="active"' : ''; ?>><a href="<?php echo get_page_link(215); ?>">Groggin's Field</a></li>
        <li <?= (is_page(218)) ? 'class="active"' : ''; ?>><a href="<?php echo get_page_link(218); ?>">Oldbridge Village</a></li>
        <li <?= (is_page(220)) ? 'class="active"' : ''; ?>><a href="<?php echo get_page_link(220); ?>">Battle Artillery</a></li>
        <li <?= (is_page(224)) ? 'class="active"' : ''; ?>><a href="<?php echo get_page_link(224); ?>">King William's Camp</a></li>
        <li <?= (is_page(226)) ? 'class="active"' : ''; ?>><a href="<?php echo get_page_link(226); ?>">King James's Camp</a></li>
        <li <?= (is_page(228)) ? 'class="active"' : ''; ?>><a href="<?php echo get_page_link(228); ?>">Crossing the Ford</a></li>
        <li <?= (is_page(233)) ? 'class="active"' : ''; ?>><a href="<?php echo get_page_link(233); ?>">The River Crossing</a></li>
        <li <?= (is_page(235)) ? 'class="active"' : ''; ?>><a href="<?php echo get_page_link(235); ?>">King William's Crossing</a></li>
        <li <?= (is_page(237)) ? 'class="active"' : ''; ?>><a href="<?php echo get_page_link(237); ?>">The Retreat</a></li>
      </ul>
    </li>
  </ul>
</div>

“WordPress”方式是注册一个新的导航菜单，以便您可以在后端动态创建菜单。当您这样做时，您可以显示动态菜单，WordPress 会自动为您添加活动类。

functions.php 文件

function register_my_custom_menu() {
  register_nav_menu('sidebar-menu', __( 'Sidebar Menu' ));
}
add_action( 'init', 'register_my_custom_menu' );

sidebar.php 文件：

<div id="leftnav">
    <ul class="nav-bar">
        <li>
            <!-- Link to section at level 2 -->
            <a href="<?php echo get_page_link(202); ?>">The Battle &amp; Beyond</a>
            <!-- navigation object : Menu - Left Navigation -->
            <?php wp_nav_menu( array( 
                    'theme_location' => 'sidebar-menu',
                    'menu_class' => 'nav-bar'
                ) 
            ); ?>
        </li>
    </ul>
</div>

完成此操作后，登录到您的 WordPress 管理员并转到外观 > 菜单，您就可以在那里构建您的菜单。

参考资料： https://codex.wordpress.org/Navigation_Menus https://developer.wordpress.org/reference/functions/wp_nav_menu/

Answer 2

在上面mread1208的帮助下，我找到了最有效的解决方案。

sidebar.php（或 sidebar-whateveryouwant.php）文件的 HTML。 注意：在 Wordpress 的后端构建菜单时，勾选菜单结构下方菜单设置中的“侧边栏菜单”框。

<div id="leftnav">
<ul class="nav-bar">
    <li>
        <!-- Link to section at level 2 -->
        <a href="<?php echo get_page_link(202); ?>">The Battle &amp; Beyond</a>
        <!-- navigation object : Menu - Left Navigation -->
        <?php wp_nav_menu( array(
                'theme_location' => 'sidebar-menu',
                'menu_class' => 'nav-bar'
            )
        ); ?>
    </li>
</ul>

添加到functions.php文件中：

   // Adds custom menu
function register_my_custom_menu() {
  register_nav_menu('sidebar-menu', __( 'Sidebar Menu' ));
}
add_action( 'init', 'register_my_custom_menu' );

在您的 CSS 中定位活动类：

#leftnav ul li.current_page_item > a, #leftnav ul li.current_page_parent > a, #leftnav ul li.current-menu-ancestor > a, #leftnav ul li.current-menu-item > a, #leftnav ul li.current-menu-parent > a {
background-color: #ffc107;
border-color: 4em solid #ffc107;}

希望对某人有所帮助。