为 BS5 导航栏自定义 walker_nav_menu 时遇到问题

Question

我在兔子洞里翻来覆去，尝试了使用 WordPress 主题为我的 BS5 主导航栏提供不同的解决方案。

为

walker_nav_menu class

构建了一个扩展的

wp_nav_menu()

，可以在其中使用

start_el

或

end_lvl

函数。

我的

end_lvl

函数似乎没有被解雇或其他什么，正如您在下面的代码中看到的那样。应该在列表中添加一个额外的元素，其中包含用于在两种语言之间切换的 languagebare。

你能告诉我我做错了什么吗？

functions.php中的代码

class BS5_MainMenu extends Walker_Nav_Menu
{

  public function start_el(&$output, $data_object, $depth = 0, $args = null, $current_object_id = 0)
  {
    $item = $data_object; // use more descriptive name for use within this method.

    $frontpageID = get_option('page_on_front');

    if ($item->post_parent != 0 || $item->ID == $frontpageID) {
      return;
    }

    $itemUrl = get_permalink($item);

    $children = $this->getChildren($item->ID);

    $_liCssClass = "nav-item";
    $_aCssClass = "nav-link";

    if (count($children)) {
      $_liCssClass .= " dropdown";
      $_aCssClass .= " dropdown-toggle";
    }

    $output .= '<li class="' .  $_liCssClass . '">';

    if (!empty($itemUrl) && $itemUrl != '#') {
      $output .= '<a href="' . $itemUrl . '" class="' . $_aCssClass . '" role="button" data-bs-toggle="dropdown" aria-expanded="false">';
    } else {
      $output .= '<span>';
    }

    $output .= $item->post_title;

    if (!empty($itemUrl) && $itemUrl != '#') {
      $output .= '</a>';
    } else {
      $output .= '</span>';
    }

    $output .= $this->renderChildrenDropdownHtml($item->ID);
  }

  public function end_lvl(&$output, $depth = 0, $args = null)
  {
    $otherLanguage = $this->get_other_languages()[0];

    $output .= '<li class="nav-item mx-4">';
    $output .= '<a class="nav-link nav-translate" href="' . $otherLanguage->permalink . '">' . $otherLanguage->res_label . ' <span>' . $otherLanguage->displaylanguage . '</span></a>';
    $output .= '</li></ul>';
  }

  private function get_other_languages()
  {
    $_all = get_available_languages();
    $_other = array();
    $_current = get_locale();

    foreach ($_all as $result) {
      if ($_current == $result) {
        continue;
      }

      $_lang_of_result = explode("_", $result)[0];

      $_obj = new stdClass();
      $_obj->displaylanguage = Locale::getDisplayLanguage($_lang_of_result, $_lang_of_result);
      $_obj->permalink = get_msls_permalink($result);
      $_obj->flagurl = get_msls_flag_url($result);
      $_obj->res_label = $_lang_of_result == "da" ? "Skift til" : "Switch to";

      $_other[] = $_obj;
    }

    return $_other;
  }

  private function renderChildrenDropdownHtml($post_id)
  {
    if (!$post_id) {
      return false;
    }

    $children = $this->getChildren($post_id);
    if (!count($children)) {
      return false;
    }

    $html = '<ul class="dropdown-menu">';

    foreach ($children as $child) {
      $html .= '<li><a class="dropdown-item" href="' . get_permalink($child) . '">' . $child->post_title . '</a></li>';
    }

    $html .= '</ul>';
    return $html;
  }

  private function getChildren($post_id)
  {
    if (!$post_id) {
      return false;
    }

    $args = array(
      'post_parent' => $post_id,
      'post_type' => 'any',
      'numberposts' => -1,
      'post_status' => 'any'
    );
    return get_children($args);
  }
}

在我的parts/header.php中

<nav class="navbar navbar-main navbar-expand-lg highlighted" data-bs-theme="dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="/index.html">
        <img src="<?php echo esc_url(get_template_directory_uri() . '/img/logo.svg'); ?>" height="70" />
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-navbar"
        aria-controls="main-navbar" aria-expanded="false" aria-label="Visning af navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="main-navbar">
        <?php

        wp_nav_menu([
          'theme_location' => 'MainMenu',
          'menu_class' => 'navbar-nav ms-auto mb-2 mb-lg-0',
          'container' => 'ul',
          'walker' => new BS5_MainMenu()
        ]);

        ?>
      </div>
    </div>
  </nav>

我尝试过不同的东西，在谷歌上找到的

Answer 1

在自定义 walker 类中，如果您重写 end_lvl，则还需要在调用父级的 end_lvl 后将修改附加到输出。如果未调用父方法，则将跳过 wp_nav_menu 中结束级别的默认行为。

对于您的 end_lvl 函数，请尝试以下操作

public function end_lvl(&$output, $depth = 0, $args = null) {
    // Call the parent to maintain default behavior
    parent::end_lvl($output, $depth, $args);

    // Append the language bar after the submenu closes
    if ($depth === 0) { // Only add at the top-level menu
        $otherLanguage = $this->get_other_languages()[0];

        $output .= '<li class="nav-item mx-4">';
        $output .= '<a class="nav-link nav-translate" href="' . $otherLanguage->permalink . '">'
                . $otherLanguage->res_label . ' <span>' . $otherLanguage->displaylanguage . '</span></a>';
        $output .= '</li>';
    }
}