🢂Menu drugiego poziomu w WordPress ‑ Shortcode

Shortcode, pokazany poniżej, umożliwia dynamiczne wyświetlanie menu drugiego poziomu w WordPressie, co może być szczególnie przydatne przypadku stron oferujących szeroki zakres tematyczny, może pomóc w lepszej organizacji treści. Umożliwia to grupowanie powiązanych tematycznie stron lub postów, ułatwiając użytkownikom orientację na stronie.

Aby użyć tego shorkodu w WordPressie, najpierw należy go dodać do pliku functions.php w motywie, którego aktualnie używasz.

Po wklejeniu kodu do pliku functions.php , umieść [show_level2_sibling_or_child_menu] w treści strony, wpisie blogowym lub widgetach. Pozwoli to na wyświetlenie elementów menu, które są równorzędne lub podrzędne do aktualnie wybranej pozycji, działając zgodnie z logiką menu drugiego poziomu.

Pamiętaj, żeby sprawdzić, czy nazwa lokalizacji menu ('primary') jest zgodna z tą, której faktycznie używasz w swoim motywie. Jeśli używasz innej nazwy lokalizacji niż główne menu (primary), zaktualizuj wartość zmiennej $menu_name w funkcji, aby odpowiadała Twojej konfiguracji.

function show_sibling_or_child_menu_items_level2()
{
  global $wp_query;
  $menu_name = 'primary'; // Zmień na lokalizację menu, której używasz
  $locations = get_nav_menu_locations();
  $menu = wp_get_nav_menu_object($locations[$menu_name]);
  $menu_items = wp_get_nav_menu_items($menu->term_id);

  $queried_object = get_queried_object();
  $current_item_id = 0;
  $parent_item_id = 0;
  $found_items = [];

  // Znajdź bieżący element menu
  foreach ($menu_items as $item) {
    if (($item->object_id == $queried_object->term_id && $item->type === 'taxonomy') || ($item->object_id == $queried_object->ID && $item->type === 'post_type')) {
      $current_item_id = $item->ID;
      $parent_item_id = $item->menu_item_parent;
      break;
    }
  }

  // Jeśli bieżący element ma rodzica, szukaj rodzeństwa, w przeciwnym razie szukaj dzieci
  if ($parent_item_id != 0) {
    foreach ($menu_items as $item) {
      if ($item->menu_item_parent == $parent_item_id) {
        $found_items[] = $item; // Rodzeństwo, włącznie z bieżącym elementem
      }
    }
  } else {
    // Szukaj dzieci dla bieżącego elementu, jeśli nie ma rodzica
    foreach ($menu_items as $submenu) {
      if ($submenu->menu_item_parent == $current_item_id) {
        $found_items[] = $submenu;
      }
    }
  }

  // Wyświetl znalezione elementy
  if (!empty($found_items)) {
    $menu_list = '<ul class="submenu id-' . $current_item_id  . '">';
    $poz = 1;
    foreach ($found_items as $item) {
      $menu_list .= '<li class="item-' . $poz . '"><a href="' . $item->url . '">' . $item->title . '</a></li>';
      $poz++;
    }
    $menu_list .= '</ul>';
    return $menu_list;
  } else {
    //return 'Brak elementów podrzędnych lub równorzędnych na poziomie 2.';
    return  null;
  }
}

// Dodaj shortcode, aby umożliwić łatwe wyświetlanie menu w treści
add_shortcode('show_level2_sibling_or_child_menu', 'show_sibling_or_child_menu_items_level2_shortcode');
function show_sibling_or_child_menu_items_level2_shortcode() {
    return show_sibling_or_child_menu_items_level2();
}

W pokazanym fragmencie kodu, generowane jest menu z elementami, które otrzymują unikalne klasy CSS, co znacząco ułatwia ich stylizację. Każdej liście <ul> przypisywana jest klasa submenu wraz z unikalnym identyfikatorem id- odpowiadającym bieżącemu elementowi menu (np. submenu id-168), a każdemu elementowi listy <li> przypisywana jest unikalna klasa item- wraz z numerem porządkowym, który jest inkrementowany w każdej iteracji pętli (np. item-1,item-2 itd.).

Styl menu

Aby dostosować wygląd wyświetlanego menu za pomocą CSS, możesz dodać reguły stylów w pliku style.css swojego motywu. Poniżej znajdziesz przykładowe reguły, które zmienią wygląd listy i linków menu:

/* Stylowanie listy menu */
ul {
    list-style-type: none; /* Usuwa domyślne znaczniki listy */
    padding: 0; /* Usuwa domyślne wcięcia */
    margin: 0; /* Usuwa domyślne marginesy */
}

/* Stylowanie poszczególnych elementów listy */
ul li {
    margin: 5px 0; /* Dodaje margines pomiędzy elementami listy */
    padding: 5px; /* Dodaje wewnętrzny odstęp dla elementów listy */
}

/* Stylowanie linków w menu */
ul li a {
    text-decoration: none; /* Usuwa podkreślenie linków */
    color: #333; /* Ustawia kolor tekstu linków */
    font-weight: bold; /* Ustawia pogrubienie tekstu */
}

ul li a:hover {
    color: #007bff; /* Zmienia kolor linków przy najechaniu */
    text-decoration: underline; /* Dodaje podkreślenie przy najechaniu */
}
/* wygląd każdej pozycji menu oraz całego submenu. */
.submenu {
    list-style-type: none; /* Usunięcie domyślnych znaczników listy */
    padding: 0; /* Usunięcie domyślnego paddingu */
    margin: 20px 0; /* Dodanie marginesu wokół submenu */
    background-color: #f9f9f9; /* Ustawienie tła submenu */
}

.submenu li {
    margin: 5px 0; /* Margines dla każdego elementu */
    padding: 10px; /* Padding dla każdego elementu */
}

.submenu li a {
    text-decoration: none; /* Usunięcie podkreślenia z linków */
    color: #333; /* Kolor tekstu */
    display: block; /* Sprawia, że linki zajmują cały dostępny obszar */
}

.submenu li a:hover {
    background-color: #e9e9e9; /* Kolor tła przy najechaniu */
}

/* Przykład stylizacji konkretnego elementu */
.item-1 {
    font-weight: bold; /* Pierwszy element menu będzie pogrubiony */
}