硬编码WordPress响应式导航栏跳转后样式异常及点击失效问题求助

纯硬编码开发WordPress站点（未使用任何插件或主题），已实现响应式导航栏，开发者视图中功能正常，但点击导航链接跳转页面后，导航栏样式异常，且后续无法点击任何导航链接。附上导航栏代码，求原因、解决方案及优化建议。

导航栏CSS代码 #

.navbar {
    background-color: #ECEDE8;
}

.navbar-brand,
.nav-link {
    color: black !important;
    margin-top: 20px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.nav-link.active {
    color: #8AA899 !important;
}

.nav-link:after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background-color: #8AA899;
    transition: width 0.3s ease-in-out;
}

.nav-link:hover:after,
.nav-link.active:after {
    width: 100%;
}

/* Adjust brand image and nav links for small screens */
@media (max-width: 767.98px) {
    .navbar-brand img {
        width: 150px;
    }

    .nav-link {
        margin-top: 10px;
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {
    .navbar-brand img {
        width: 120px;
    }

    .nav-link {
        font-size: 12px;
    }

    .navbar {
        padding: 10px 15px;
    }
}

导航栏HTML代码 #

<nav class="navbar navbar-expand-lg navbar-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="/wp-content/uploads/2024/09/cropped-LOGO.png" style="width:200px;" /></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/about-us">About us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/contact-us">Contact us</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

核心原因分析 #

1. Bootstrap JS未正确加载/重复加载：导航栏依赖Bootstrap的collapse组件，跳转页面后JS未加载或重复加载，会导致折叠菜单无法交互、样式错乱。
2. active类未动态绑定：当前页面的导航链接未自动添加active类，不仅样式异常，还可能因样式层级问题遮挡点击区域。
3. 资源路径错误：跳转页面后，Bootstrap资源、Logo图片的相对路径失效，导致样式和功能崩溃。
4. WordPress自动插入标签破坏DOM：WordPress会自动给HTML代码添加<p>标签，打乱导航栏DOM结构，引发样式和交互问题。

针对性解决方案 #

• 统一加载Bootstrap资源：
  在header.php中用绝对路径引入Bootstrap CSS和JS，避免重复加载：

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  

• 动态添加active类：
  利用WordPress内置函数，给当前页面的导航链接自动绑定active类：

  <li class="nav-item">
      <a class="nav-link <?php if(is_front_page()) echo 'active'; ?>" aria-current="page" href="<?php echo home_url('/'); ?>">Home</a>
  </li>
  <li class="nav-item">
      <a class="nav-link <?php if(is_page('about-us')) echo 'active'; ?>" href="<?php echo home_url('/about-us'); ?>">About us</a>
  </li>
  <li class="nav-item">
      <a class="nav-link <?php if(is_page('contact-us')) echo 'active'; ?>" href="<?php echo home_url('/contact-us'); ?>">Contact us</a>
  </li>
  

• 修复资源路径：
  用WordPress函数获取绝对路径，避免跳转后路径失效：

  <a class="navbar-brand" href="<?php echo home_url('/'); ?>">
      <img src="<?php echo wp_get_attachment_image_url(attachment_id, 'full'); ?>" style="width:200px;" />
  </a>
  

  （注：将attachment_id替换为Logo图片在媒体库中的实际ID）

• 禁用自动添加标签：
  在functions.php中添加代码，禁止WordPress对导航区域自动插入<p>标签：

  remove_filter('the_content', 'wpautop');
  remove_filter('the_excerpt', 'wpautop');
  

优化建议 #

• 减少!important使用：通过提升选择器优先级覆盖默认样式，比如将.nav-link.active改为.navbar-nav .nav-link.active，避免样式冲突。
• 迁移内联样式到CSS：将Logo的width:200px内联样式移到.navbar-brand img中，统一管理样式。
• 改用WordPress菜单函数：放弃硬编码导航，使用wp_nav_menu()函数，自动处理active类且更灵活：

  <?php
  wp_nav_menu(array(
      'theme_location' => 'primary-menu',
      'container' => 'div',
      'container_class' => 'collapse navbar-collapse justify-content-end',
      'container_id' => 'navbarNav',
      'menu_class' => 'navbar-nav',
      'add_li_class' => 'nav-item',
      'link_class' => 'nav-link'
  ));
  ?>
  

  同时在functions.php中注册菜单：

  register_nav_menus(array(
      'primary-menu' => __('Primary Menu', 'your-theme-slug')
  ));
  

内容的提问来源于stack exchange，提问作者Eldyssss