Создание сайта 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 секунды, я добавил анимацию обратного отсчета с плавным исчезновением, чтобы сделать процесс ожидания более интересным.

Раздел "Знакомство с кошками"

Я создал интерактивные карточки, где при нажатии на кнопку "Узнать больше" кнопка исчезает, и появляется описание персонажа. Для этого я использовал 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";
      });
    }
  });
});

Раздел блога

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

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

Для создания этой карусели с автоматической прокруткой я использовал плагин Blog Designer Pack.

Галерея

Для галереи я выбрал 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. В настоящее время я завершаю дизайн карточек и коробки. Игровые карты и коробка будут выглядеть так: