Skip to content

README.md

Latest commit

 

History

History
260 lines (191 loc) · 12.8 KB

README.md

File metadata and controls

260 lines (191 loc) · 12.8 KB

GameStore WordPress Тема и Блоки

📖 Язык документации: Русский (текущий) | English

Современная блочная тема WordPress для игровых магазинов с поддержкой полного редактирования сайта и кастомными блоками на React.

🎮 Обзор проекта

  • Блочная тема: Современная FSE (Full Site Editing) тема, оптимизированная для игровых магазинов
  • Кастомные блоки: Блоки Gutenberg на React для расширенной функциональности
  • Основной плагин: Базовая функциональность и кастомизация
  • MU плагин: Обязательный плагин для функций всего сайта
  • Автоматизированный деплой: CI/CD pipeline на GitHub Actions

🏗️ Структура проекта

game-store/
├── .github/workflows/
│   └── CICD.yml                 # Пайплайн автоматического деплоя
├── docs/
│   └── ru/                      # Русская документация
├── mu-plugins/
│   └── gamestore-general.php    # Обязательный плагин
├── plugins/
│   ├── blocks-gamestore/        # Кастомные React блоки
│   └── core-gamestore/          # Плагин основной функциональности
├── themes/
│   └── game-store/              # Основная блочная тема
├── docker-compose.yml           # Среда локальной разработки
├── wp-version-control.cfg       # Управление версиями WordPress
└── README.md                    # Главный файл

🔧 Архитектура и компоненты проекта

🎨 Основная тема: themes/game-store/

Назначение: Блочная тема WordPress с поддержкой полного редактирования сайта (FSE)

Ключевые файлы и директории:

  • themes/game-store/style.css - основные стили темы и мета-информация
  • themes/game-store/theme.json - конфигурация темы, цветовая палитра, типографика
  • themes/game-store/templates/ - HTML шаблоны для разных типов страниц
  • themes/game-store/patterns/ - готовые паттерны блоков для быстрой вставки
  • themes/game-store/parts/ - части темы (header, footer)

Зачем нужна: Обеспечивает визуальную основу сайта, определяет дизайн-систему, цвета, шрифты и общий внешний вид. FSE позволяет редактировать макет через интерфейс WordPress без кода.

🧩 Кастомные блоки: plugins/blocks-gamestore/

Назначение: React-компоненты для создания специализированных блоков Gutenberg

Структура:

  • plugins/blocks-gamestore/src/ - исходный код блоков на React
  • plugins/blocks-gamestore/build/ - скомпилированные блоки для продакшена
  • plugins/blocks-gamestore/package.json - зависимости и скрипты сборки

Зачем нужны: Расширяют стандартный набор блоков WordPress специфическими элементами для игровых магазинов (карточки игр, галереи, рейтинги и т.д.). React обеспечивает интерактивность и современный UX.

⚙️ Основной плагин: plugins/core-gamestore/

Назначение: Централизованная логика и функциональность сайта

Что содержит:

  • Кастомные post types (типы записей для игр, обзоров)
  • API интеграции (платежные системы, каталоги игр)
  • Административные настройки
  • Хуки и фильтры WordPress

Зачем нужен: Отделяет бизнес-логику от представления, обеспечивает переносимость функций между темами, управляет данными специфичными для игрового магазина.

🔧 Обязательный плагин: mu-plugins/gamestore-general.php

Назначение: Критически важная функциональность, которая должна работать всегда

Местоположение: mu-plugins/ (Must Use plugins) - автоматически активируются

Что делает:

  • Базовые настройки безопасности
  • Обязательные редиректы и rewrites
  • Системные хуки, которые нельзя отключить
  • Инициализация констант проекта

Зачем в отдельной папке: MU-плагины нельзя отключить через админку WordPress, что критично для стабильности сайта. Они загружаются раньше обычных плагинов и всегда активны.

🚀 Настройка разработки

Требования

  • Node.js 18+
  • Docker & Docker Compose
  • Git

Локальная разработка

  1. Клонирование репозитория

    git clone https://github.com/GKVSO/GameStore.git>
cd game-store

  2. Запуск среды разработки

    docker-compose up -d

  3. Сборка кастомных блоков

    cd plugins/blocks-gamestore
npm install
npm run start

Команды для разработки блоков

# Режим разработки с горячей перезагрузкой
npm run start

# Продакшн сборка
npm run build

# Форматирование кода
npm run format

# Линтинг
npm run lint:js
npm run lint:css

# Создание zip архива плагина
npm run plugin-zip

🔐 Конфигурация CI/CD

Необходимые секреты GitHub

Для автоматического деплоя необходимо настроить следующие секреты в вашем репозитории GitHub:

Название секрета Описание Пример
SERVER_HOST IP адрес сервера или домен 192.168.1.100 или example.com
SERVER_USER Имя пользователя SSH ubuntu
SERVER_SSH_PASSWORD Пароль SSH your-secure-password
SERVER_PORT Порт SSH (обычно 22) 22
SERVER_DEV_TARGET_PATH Путь для деплоя разработки /var/www/dev.example.com
SERVER_PROD_TARGET_PATH Путь для продакшн деплоя /var/www/example.com

Настройка секретов

  1. Перейдите в ваш репозиторий GitHub
  2. Откройте Settings → Secrets and variables → Actions
  3. Нажмите New repository secret
  4. Добавьте каждый секрет с соответствующим значением

Контроль версий WordPress

Файл wp-version-control.cfg содержит URL для загрузки WordPress:

https://wordpress.org/latest.zip

Это обеспечивает единообразие версий WordPress между деплоями.

🚀 Процесс деплоя

События запуска

  • Автоматический деплой разработки: Push в ветку dev
  • Автоматический продакшн деплой: Создание релиза
  • Ручной деплой: Через веб-интерфейс GitHub Actions с выбором окружения и версии WordPress

Ручной запуск деплоя

  1. Перейдите в ваш репозиторий GitHub
  2. Откройте вкладку Actions
  3. Выберите workflow GameStore Deploy
  4. Нажмите Run workflow
  5. Выберите параметры:
    • Environment: dev или prod
    • WordPress version: оставьте пустым для использования версии из wp-version-control.cfg или укажите конкретную версию (например, 6.3.2)

Этапы деплоя

  1. Подготовка

    • Загрузка WordPress из wp-version-control.cfg
    • Упаковка плагинов, тем и mu-плагинов

  2. Передача файлов

    • Загрузка WordPress и пакетов контента на сервер
    • Включение режима обслуживания

  3. Обновление ядра WordPress

    • Резервное копирование существующей конфигурации
    • Замена файлов ядра WordPress (сохранение wp-config.php)
    • Обновление директорий admin и includes

  4. Обновление контента

    • Обновление плагинов, тем и mu-плагинов
    • Сохранение существующих загрузок и конфигураций

  5. Очистка

    • Отключение режима обслуживания
    • Удаление временных файлов
    • Проверка деплоя

Особенности деплоя

  • Деплой без простоя: Режим обслуживания предотвращает сломанные состояния
  • Полное обновление WordPress Core: В отличие от стандартных деплоев, где обновляются только темы и плагины, данный подход загружает и заменяет весь WordPress Core целиком. Это критично для крупных проектов, где важен строгий контроль версий
  • Контроль версий WordPress: Файл wp-version-control.cfg позволяет зафиксировать конкретную версию WordPress для всех окружений, что исключает несовместимость и обеспечивает стабильность
  • Селективные обновления: Сохраняет wp-config.php и директорию uploads с медиафайлами
  • Автоматическая очистка: Удаляет временные файлы после деплоя
  • Пути для разных сред: Разные пути для dev/prod

🛠️ Рабочий процесс разработки

Работа с блоками

  1. Создание нового блока

    cd plugins/blocks-gamestore
npx @wordpress/create-block new-block-name

  2. Процесс разработки

    npm run start  # Запуск сервера разработки
# Редактирование файлов в src/
# Браузер автоматически обновляется

  3. Продакшн сборка

    npm run build

Разработка темы

  • Редактирование файлов шаблонов в themes/game-store/templates/
  • Изменение паттернов в themes/game-store/patterns/
  • Обновление стилей в themes/game-store/style.css
  • Настройка темы в themes/game-store/theme.json

📝 Участие в разработке

  1. Сделайте fork репозитория
  2. Создайте ветку для функции
  3. Внесите изменения, следуя стандартам кодирования WordPress
  4. Протестируйте локально с Docker
  5. Отправьте pull request

📄 Лицензия

Этот проект лицензирован под GPL v2 или более поздней версией - подробности в файле LICENSE.

👨‍💻 Автор

GKVSO

📖 Документация: Русский (текущий) | English