Рефакторинг та оптимізація меню

Мета: Перенести керування меню з хардкоду (ACF) у стандартний функціонал WordPress, налаштувати коректну роботу мовних версій (Polylang) та забезпечити адаптивність для 8-ми пунктів меню.

1. Поточний стан (Діагностика)

На даний момент меню реалізовано через хардкод у файлах теми та вивід тексту через плагін ACF.

• Шляхи до файлів: wp-content/themes/theme/header.php, header-en.php, footer.php, footer-en.php.

• Логіка: Текст пунктів береться з мета-полів сторінок з ID 7 (UA) та ID 428 (EN) за допомогою the_field('header_menu_item_X', ID).

• Проблема: Будь-яка зміна структури або додавання пункту (наприклад, нової сторінки «Кваліфікація») потребує редагування PHP-файлів. Меню не синхронізоване між мовами автоматично.

2. Архітектурні зміни (Backend)

Необхідно повністю відмовитися від поточної реалізації на користь стандартного інструментарію WordPress.

• Реєстрація меню: У functions.php зареєструвати області меню (наприклад, primary для хедера та mobile_popup для поп-апу).

• Впровадження wp_nav_menu():

  • У файлах header.php (та мовних версіях) замінити статичні списки <ul> на виклик wp_nav_menu().

  • Те саме зробити для поп-ап меню у footer.php.

• Керування через адмінку: Меню має повністю керуватися через розділ Зовнішній вигляд -> Меню.

• Синхронізація мов: Налаштувати зв'язок між UKR та EN меню через Polylang, щоб при перемиканні мови автоматично підставлялося відповідне меню.

• Очищення: Після перенесення видалити застарілі поля ACF (header_menu_item_1-8) з групи полів "Головна", щоб не засмічувати адмінку.

3. Оновлена структура меню (8 пунктів)

Необхідно створити та налаштувати меню з наступним списком:

1. Головна

2. Навчання

3. Атестація

4. Кваліфікація (Нова сторінка)

5. Послуги

6. FAQ

7. Новини

8. Контакти

4. Адаптивність та UI-оптимізація (Frontend)

Оскільки кількість пунктів збільшується до 8, необхідно запобігти розриву рядка (випадінню пунктів) на ноутбуках.

• Діапазон тестування: 1024px — 1440px.

• Методи оптимізації:

  • Зменшити padding між пунктами меню (клас .menu__item або аналогічні).

  • Зменшити font-size на 1-2px для десктопної версії, якщо меню не вписується в один рядок.

  • Breakpoint: Налаштувати точку переходу в "бургер-меню" (mobile navigation) таким чином, щоб меню не наповзало на логотип при звуженні екрану.

5. Очікуваний результат

1. Власник сайту може самостійно додавати/видаляти/сортувати пункти меню через адмінку без редагування коду.

2. Новий пункт «Кваліфікація» коректно відображається в обох мовних версіях.

3. Меню виглядає цілісно (в один рядок) на екранах ноутбуків (13-15").

4. Код очищений від зайвих запитів ACF до бази даних для виводу навігації.