Створення сайту BubacatCity на WordPress

Мета

• Передати зухвалу атмосферу "єгипетських котів"
• Зробити сайт зрозумілим менш ніж за 10 секунд
• Забезпечити блискавичне завантаження (покупці ігор нетерплячі!)
• Підготувати чисту основу WooCommerce для карт + футболок, кепок тощо
• Адаптивні макети для мобільних пристроїв
• Місце для блогу, профілів персонажів та галереї

Кастомізація теми та глобальні стилі

На кожному новому сайті я завжди роблю перший крок: налаштовую дизайн-систему в Elementor та Astra. Я визначаю глобальні кольори, типографіку та адаптивні брейкпойнти перед створенням будь-яких розділів. Це гарантує візуальну цілісність на всіх пристроях.

• Elementor > Налаштування сайту > Глобальні кольори
• Elementor > Налаштування сайту > Глобальні шрифти
• Elementor > Налаштування сайту > Макет > Брейкпойнти

(Опціонально) Appearance / Astra > Customize > Global > Colors (Typography / Container) — стилі Elementor мають пріоритет над налаштуваннями Astra. Проте керовані темою області, такі як архіви блогів, хедери та футери, використовують конфігурацію Astra. Якщо ви помітили невідповідності в цих областях, перевірте налаштування кастомайзера Astra.

Хедер (Логотип, Меню, Кнопка)

Для цього проекту я використав гнучкий конструктор хедерів Astra та розширив його за допомогою дочірньої теми. Я створив дочірню тему за допомогою офіційного генератора дочірніх тем Astra, що дозволило мені безпечно додавати кастомний CSS, не торкаючись батьківських файлів. Мета була створити прозорий хедер, який фіксується при прокручуванні. Я досяг цього так:

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
}
#content {
  margin-top: -92px; /* Your header height */
}

Hero-розділ

Для першого екрану я додав 8 іконок-ієрогліфів та скрипт, який повільно показує їх по одному у випадковому порядку. Оскільки завантаження та відображення займає 2-3 секунди, я додав анімацію зворотного відліку з плавним зникненням, щоб зробити процес очікування цікавішим.

Розділ блогу

Для створення блогу я використав плагін The Post Grid та кастомізував його стилі, щоб вони відповідали дизайну сайту.

В кінці кожної статті я додав карусель схожих публікацій зі стрілками у вигляді котячих лапок:

Для створення цієї каруселі з автоматичною прокруткою я використав плагін Blog Designer Pack.

Розділ "Знайомство з котами"

Я створив інтерактивні картки, де при натисканні на кнопку "Дізнатися більше" кнопка зникає, і з'являється опис персонажа. Для цього я використав JavaScript:

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".reveal-container").forEach((container) => {
    const btn = container.querySelector(".reveal-btn");
    const hidden = container.querySelector(".hidden-text");
    if (btn && hidden) {
      btn.addEventListener("click", () => {
        btn.style.display = "none";
        hidden.style.display = "block";
      });
    }
  });
});

Галерея

А для галереї я обрав Modula Image Gallery – Photo Grid. Також я вирішив додати можливість перемикання зображень у галереї за допомогою стрілок на клавіатурі (ліва стрілка — попереднє зображення, права — наступне). Щоб це запрацювало, я використав JavaScript-код, який при натисканні клавіші імітує клік по стрілках "вперед" або "назад":

document.addEventListener('keydown', function(e) {
    const container = document.querySelector('.modula-fancybox-container');
    if (!container) return;

    const style = window.getComputedStyle(container);
    if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') return;

    const next = container.querySelector('.f-button.is-next');
    const prev = container.querySelector('.f-button.is-prev');

    if (!next || !prev) return;

    if (e.key === 'ArrowRight') next.click();
    if (e.key === 'ArrowLeft') prev.click();
});

Магазин та фінальний результат

Для магазину я використав плагін WooCommerce. Наразі я завершую дизайн карток та коробки. Гральні карти та коробка виглядатимуть так: