Разработка Шапки WordPress: SVG, CSS Стили и Адаптация под Gutenberg | Урок eCommerce

🧾 Плэйлист курса: https://www.youtube.com/watch?v=M8F_bv1kfmY&list=PL2CKgzoZxvxUHGZIDa7sPmuVsRexHIJAO 🎯 Все уроки в одном видео: https://www.youtube.com/watch?v=c8nob2rQ9To В этом уроке мы продолжаем разработку eCommerce платформы на WordPress и детально работаем над шапкой сайта (header). Показываю, как правильно стилизовать блоки Gutenberg с помощью SCSS, работать с CSS переменными для светлой и темной темы (Dark Mode) и включить поддержку SVG в WordPress. Вы научитесь встраивать SVG-иконки прямо в HTML для управления их цветом через CSS, экспортировать графику из Figma и настраивать Flexbox-лейаут для шапки. Также разберем, как исправлять отображение стилей в админ-панели Gutenberg. Тайм-коды: 0:00 - Вступление и запуск проекта 0:41 - Как включить поддержку SVG в WordPress (через хук) 1:20 - Добавляем Reset CSS 2:20 - Используем Copilot/ChatGPT для генерации PHP-хука 5:08 - Экспорт SVG логотипа и иконок из Figma 6:25 - Настройка CSS переменных (для Light и Dark Mode) 11:53 - Написание SCSS стилей для блока шапки (block-header) 14:49 - Группировка блоков в Gutenberg для Flexbox 16:43 - Запуск SCSS компилятора (npm run start) 21:23 - Встраивание SVG иконок в HTML для стилизации 27:19 - Стилизация правой секции (Right Section) и кнопки 31:05 - Решение проблемы с отображением SVG в админке (Editor Styles) 35:28 - Добавление пунктов меню в навигацию 🔹 Курс по СУБД: https://www.youtube.com/playlist?list=PL2CKgzoZxvxX92nPjMnxdQo0I--Oj97UJ 🔹 Полезное по PHP - https://www.youtube.com/watch?v=NxH7khLkR7s&list=PL2CKgzoZxvxWW_s7Vq7axPYiH1aiF1qjj&pp=gAQB 🔹 Разработка сайтов на WordPress - https://www.youtube.com/watch?v=8yIRvyWJWQE&list=PL2CKgzoZxvxUgFmayuWeSSw9cazuZLRUx 🔹 Как создавать плагины под WordPress - https://www.youtube.com/watch?v=HGJBPDI7uOU&list=PL2CKgzoZxvxU4fKv7Ce5l2zZf84tLzsZ9&pp=gAQB 🔹 Laravel: https://www.youtube.com/watch?v=TwLQmLifQ6w&list=PL2CKgzoZxvxWdMBXM1m-zjLNVXjGp9sC0&pp=gAQB 🔹 Github Actions: https://www.youtube.com/playlist?list=PL2CKgzoZxvxUgafrEtnzBcr7SBMfTBH80