Refaktoryzacja i optymalizacja menu

Cel: Przenieść zarządzanie menu z hardcodu (ACF) do standardowej funkcjonalności WordPress, skonfigurować poprawne działanie wersji językowych (Polylang) oraz zapewnić responsywność dla 8 punktów menu.

1. Bieżący stan (Diagnostyka)

Obecnie menu jest realizowane przez hardcod w plikach motywu oraz wyświetlanie tekstu przez wtyczkę ACF.

• Ścieżki do plików: wp-content/themes/theme/header.php, header-en.php, footer.php, footer-en.php.

• Logika: Tekst punktów pobierany jest z meta-pól stron o ID 7 (UA) oraz ID 428 (EN) za pomocą the_field('header_menu_item_X', ID).

• Problem: Każda zmiana struktury lub dodanie punktu (np. nowej strony „Kwalifikacja”) wymaga edytowania plików PHP. Menu nie jest automatycznie synchronizowane między językami.

2. Zmiany architektoniczne (Backend)

Należy całkowicie zrezygnować z obecnej realizacji na rzecz standardowego narzędzia WordPress.

• Rejestracja menu: W functions.php zarejestrować obszary menu (np. primary dla nagłówka i mobile_popup dla pop-upu).

• Wdrożenie wp_nav_menu():

  • W plikach header.php (i wersjach językowych) zastąpić statyczne listy <ul> wywołaniem wp_nav_menu().

  • To samo zrobić dla menu pop-up w footer.php.

• Zarządzanie przez panel administracyjny: Menu ma być w pełni zarządzane przez sekcję Wygląd -> Menu.

• Synchronizacja języków: Skonfigurować powiązanie między menu UKR a EN przez Polylang, aby przy przełączaniu języka automatycznie podstawiało odpowiednie menu.

• Oczyszczenie: Po przeniesieniu usunąć przestarzałe pola ACF (header_menu_item_1-8) z grupy pól "Główna", aby nie zaśmiecać panelu administracyjnego.

3. Zaktualizowana struktura menu (8 punktów)

Należy stworzyć i skonfigurować menu z następującą listą:

1. Strona główna

2. Szkolenie

3. Certyfikacja

4. Kwalifikacja (Nowa strona)

5. Usługi

6. FAQ

7. Aktualności

8. Kontakt

4. Responsywność i optymalizacja UI (Frontend)

Ponieważ liczba punktów wzrasta do 8, należy zapobiec łamaniu wiersza (wypadaniu punktów) na laptopach.

• Zakres testowania: 1024px — 1440px.

• Metody optymalizacji:

  • Zmniejszyć padding między punktami menu (klasa .menu__item lub podobne).

  • Zmniejszyć font-size o 1-2px dla wersji desktopowej, jeśli menu nie mieści się w jednym wierszu.

  • Breakpoint: Skonfigurować punkt przejścia w "burger-menu" (mobile navigation) w taki sposób, aby menu nie nachodziło na logo przy zwężaniu ekranu.

5. Oczekiwany rezultat

1. Właściciel strony może samodzielnie dodawać/usuwać/układać punkty menu przez panel administracyjny bez edytowania kodu.

2. Nowy punkt „Kwalifikacja” poprawnie wyświetla się w obu wersjach językowych.

3. Menu wygląda spójnie (w jednym wierszu) na ekranach laptopów (13-15").

4. Kod oczyszczony z zbędnych zapytań ACF do bazy danych dla wyświetlania nawigacji.