«Путь создания сайта на WordPress»
Пошаговый разбор от идеи до запуска. На примере именно этого сайта. Проходим весь цикл: проект, верстка, натяжка на WordPress, структура, контент и первые шаги по продвижению. Каждый этап — в формате эпизода с готовым планом действий и примерами кода.
Скоро стартует мой новый проект по созданию сайта на WordPress!
Цели и задачи проекта
WordPress — мощная платформа: на ней можно сделать и простой блог, и сложный проект. Но «профессиональный блог» — это не только тема и посты, а целая система: архитектура, скорость, SEO, безопасность, аналитика и регулярный контент. Разобраться во всём сразу будет непросто.
В этом проекте я покажу полный путь на примере своего сайта: от идеи и структуры до разработки, публикации и продвижения. Вы увидите не только готовые решения, но и промежуточные версии, правки, метрики и даже ошибки — чтобы вы понимали, как всё устроено на практике.
Для новичков это понятный маршрут: шаг за шагом, без прыжков через важные детали. Для опытных — разбор конкретных решений и того, почему они выбраны, а также нюансы масштабирования и поддержки.
Поддержать проект
Для кого этот проект
Начинающие: старт без страха
Если вы только знакомитесь с WordPress, здесь вы пройдёте путь от хостинга и установки до первой публикации. Объясняю простыми словами, без лишней теории, и показываю, почему каждый шаг важен — чтобы вы не просто копировали, а понимали логику.
Веб‑разработчики и фрилансеры
Для тех, кто уже работает с WordPress: разбираем нюансы архитектуры, автоматизации и типовых решений. Покажу, как ускорить рутину, избежать типовых ошибок и сделать процесс предсказуемым — чтобы брать больше проектов и тратить меньше времени.
Владельцы сайтов и блогов
Если у вас уже есть сайт или вы планируете его запуск: покажу, как выстроить структуру, контент и продвижение так, чтобы сайт работал на ваши цели. Практические шаблоны, чек‑листы и сценарии публикаций помогут системно развивать проект.
Те, кто хочет систематизировать знания
Даже если вы умеете «кое‑что» на WordPress, часто не хватает единой картины. Здесь — выстроенный маршрут от идеи до первых результатов: этапы, метрики, типичные ошибки и способы их избежать. Это база, которую можно использовать как референс и основу для своих проектов.
Что мы создадим в итоге
Чему мы научимся
1.
Подготовка рабочей среды — настройка сервера и инструментов разработки
2.
Организация файлов — правильное структурирование кода и ресурсов
3.
Чтение макета и планирование проекта сайта
4.
Работа с шаблонами — преобразование статичной верстки в динамические шаблоны
5.
Адаптивная, семантическая и кроссбраузерная верстка без использования препроцессоров
6.
Создание кастомных типов записей, таксономий, gutenberg-блоков с помощью ACF-Pro
7.
Интеграция форм — верстка и подключение контактных форм
8.
Работа с медиа — настройка и организация галереи, обработка и оптимизация изображений
9.
Оптимизация — улучшение производительности и безопасности сайта
10.
Подготовка к продвижению — настройка плагина RankMath, индексация в поисковых системах
11.
Работа с контентом — планироование и организация публикация, работа с AI
12.
Развитие сайта — продвижение интеграции и монетизация
Эпизоды проекта: план пути
-
Эпизод #0.0
Старт пути: как устроен «Путь создания сайта на WordPress»
Разбираем структуру курса, стек технологий, формат практики и план на ближайшие эпизоды.
-
- Интро
-
- Цели курса
-
- Что будет на курсе
-
- Главная фишка курса
-
- Стек технологий
-
- Формат обучения
-
- Что в следующих эпизодах
Доп материалы
«Путь создания сайта на WordPress» -
-
Эпизод #1.0
Домен и хостинг — выбираем и настраиваем для сайта на WordPress
Пошаговая настройка домена и хостинга для WordPress: выбор домена, привязка через DNS, выпуск SSL, создание SFTP‑доступа и базы данных, базовая безопасность и защита dev‑поддомена от индексации. Без локального сервера — работаем сразу на боевом хостинге через VS Code.
-
- Подобираем хостинг
-
- Выбираем и регистрируем доменное имя
-
- Регистрируем поддомен для разработки
-
- Настраиваем DNS, SSL
-
- Доступы и база данных
-
- Базовая безопасность хостинга
-
- Защита dev-поддомена от индексации
Доп. материалы
Старт пути: как устроен «Путь создания сайта на WordPress» -
-
Эпизод #2.0
Рабочее окружение: настраиваем VS Code, SFTP и Git для разработки на боевом хостинге
Как настроить VS Code и плагин SFTP для работы с WordPress на боевом хостинге, подобрать полезные расширения, организовать Git‑репозиторий и выстроить понятную структуру папок в Яндекс Диске для хранения исходников, документации и артефактов проекта. Без локального сервера: разработка на сервере, контроль версий локально, бэкапы и обмен с соавторами — в облаке.
-
- Настройка VS Code и SFTP
-
- Расширения VS Code
-
- Установка Яндекс Диска
-
- Организация файлов проекта сайта
-
- Система контроля версий Git
-
-
Эпизод #3.0
Приём и чтение макета из Figma и планирование шаблонов WordPress
Пошаговый разбор, как принять и проверить макет в Figma, разбить UI на BEM‑компоненты, спланировать шаблоны WordPress и template-parts, определить условную загрузку CSS/JS, спроектировать ACF‑поля под секции макета и собрать финальную карту реализации. Практично для разработки темы без сборщиков и локального сервера.
-
- Получение макета
-
- Аудит компонентов по BEM
-
- Планирование шаблонов WordPress по макету
-
- Условная загрузка CSS и JS
-
- Планирование CTA по типам страниц
-
- Планирование ACF‑полей по макету
-
- Финальная карта шаблонов
Доп. материалы
-
-
Эпизод #4.0
Дизайн‑токены и адаптивность: строим CSS‑фундамент темы
Учимся переводить макет в систему дизайн‑токенов: переменные цветов, отступов, шрифтов и брейкпоинтов. Фиксируем адаптивность и базовые требования к производительности и доступности
-
- Дизайн‑токены
-
- Требования к адаптивности
-
- Производительность и доступность
-
-
Эпизод #5.0
Установка WordPress и базовая настройка: готовим окружение
Устанавливаем WordPress на dev‑поддомен, настраиваем постоянные ссылки, часовой пояс и язык. Готовим структуру темы и пользователей, фиксируем базовые параметры медиа и автосохранения.
-
- Установка WordPress
-
- Базовые настройки
-
- Пользователи и роли
-
- Подготовка темы
-
-
Эпизод #6.0
Архитектура темы: структура папок и регистрация фич
Проектируем структуру папок темы. Регистрируем ключевые фичи темы (title‑tag, post‑thumbnails, custom‑logo, меню, сайдбары, размеры изображений).
-
- Структура папок темы
-
- Регистрация фич темы
-
-
Эпизод #7.0
Подключение стилей, скриптов, шрифтов и иконок
Подключаем style.css и script.js через wp_enqueue, условно загружаем опциональные стили и скрипты. Настраиваем шрифты (WOFF2, font‑display, preload) и иконки (Font Awesome).
-
- Подключение стилей и скриптов
-
- Шрифты и иконки
-
- CSS‑фундамент
-
-
Эпизод #8.0
Контентная модель: CPT, таксономии и поля ACF
Определяем кастомные типы постов и таксономии. Настраиваем группы полей ACF под разные типы контента, продумываем логику вывода и fallback для пустых полей.
-
- Типы постов и таксономии
-
- Плагин ACF (установка, группы полей)
-
- Логика вывода (шаблоны template‑parts)
-
-
Эпизод #9.0
Вёрстка: каркас, header и footer — базовая структура темы
Создаём .container и .grid для layout‑каркаса. Вёрстаем header.php и footer.php, реализуем бургер‑меню и sticky header. Проверяем «голые» блоки на dev‑поддомене.
-
- Каркас (layout)
-
- Header
-
- Footer
-
-
Эпизод #10.0
Вёрстка: loop и карточки постов — сетка архива и карточки
Вёрстаем archive.php и index.php как fallback‑архив. Создаём шаблон карточки поста (post‑card) с превью, заголовком, мета и ссылкой. Настраиваем сетку и пагинацию.
-
- Loop и архив
-
- Карточка поста
-
- Мета‑данные
-
- Пагинация
-
- Адаптив (сетка 2→1 колонки)
Доп. материалы
Три цикла WordPress (the loop) -
-
Эпизод #11.0
Вёрстка: одиночный пост — структура single.php и стилизация контента
Вёрстаем single.php: заголовок, мета, контент, ACF‑поля, навигация, связанные посты, CTA. Стилизуем контент (.post‑content), код‑блоки, изображения. Настраиваем хлебные крошки.
-
- Структура single.php
-
- Стилизация контента
-
- Вывод ACF‑полей
-
- Хлебные крошки
-
- Навигация
-
- Связанные посты
-
- CTA
Доп. материалы
Обзор плагина WordPress ACF PRO -
-
Эпизод #12.0
Вёрстка: страницы, 404 и поиск — шаблоны и компоненты
Верстаем page.php и кастомные шаблоны страниц. Создаём страницу курса с Hero‑блоком, модулями и эпизодами. Верстаем 404.php и search.php, стилизуем формы и результаты.
-
- page.php, кастомные шаблоны страниц
-
- Страница курса
-
- 404 и Search
-
-
Эпизод #13.0
Дополнительные компоненты и JS‑модули — кнопки, формы, слайдер, валидация
Создаём компоненты (кнопки, формы, слайдер, хлебные крошки, CTA, блок «Содержание»). Реализуем JS‑модули (бургер‑меню, Swiper, валидация форм, lazy‑load, smooth‑scroll, lightbox).
-
- Компоненты
-
- JS‑модули
-
- Проверка адаптивности
-
-
Эпизод #14.0
Функционал и UX — формы, виджеты, комментарии, доступность
Настраиваем формы обратной связи с SMTP и капчей. Регистрируем сайдбары и виджеты. Настраиваем комментарии и юридические страницы.
-
- Формы обратной связи
-
- Виджеты и сайдбары
-
- Комментарии
-
- Юридические страницы
-
- Доступность
-
-
Эпизод #15.0
SEO: стратегия, контент‑план и техническая оптимизация
Определяем нишу, целевую аудиторию и УТП. Составляем контент‑план на 3–6 месяцев, распределяем темы по типам и рубрикам. Настраиваем SEO‑плагин, XML‑карту и robots.txt.
-
- Контент‑стратегия
-
- Контент‑план
-
- SEO‑плагин RankMath
-
- Индексация
-
-
Эпизод #16.0
Производительность — оптимизация изображений, шрифтов, кэширование
Оптимизируем изображения (WebP, размеры, loading=lazy, width/height, preload). Настраиваем шрифты (WOFF2, font‑display, подмножество). Включаем кэширование, минификацию и сжатие.
-
- Оптимизация изображений
-
- Оптимизация шрифтов
-
- Кэширование и минификация
-
- Кэширование и минификация
-
- Проверка скорости
-
-
Эпизод #17.0
Безопасность и финальные проверки — права, обновления, аудит, бэкап
Настраиваем права доступа к файлам и папкам. Обновляем WordPress, плагины и PHP. Проводим аудит уязвимостей, устанавливаем плагин безопасности и настраиваем лимит попыток входа.
-
- Права доступа
-
- Обновления
-
- Аудит уязвимостей
-
- Бэкап перед деплоем
-
- Ручное тестирование
-
-
Эпизод #18.0
Деплой и индексация — перенос файлов и БД, проверки, мониторинг
Переносим файлы темы и медиа на боевой домен через SFTP. Переносим и обновляем базу данных, заменяем URL в дампе. Проверяем HTTPS, стили, изображения, постоянные ссылки и canonical.
-
- Перенос файлов
-
- Перенос базы данных
-
- Проверки после переноса
-
- Снятие защиты от индексации
-
- Индексация
-
- Мониторинг
-
-
Эпизод #19.0
Монетизация и аналитика — счётчики, платёжные инструменты, CTA
Устанавливаем Яндекс Метрику и Google Analytics, настраиваем цели и события. Интегрируем платёжные инструменты (YooKassa), настраиваем CTA‑блоки, подписки и партнёрские ссылки.
-
- Аналитика
-
- Платёжные инструменты
-
- CTA и подписка
-
Поддержи проект — получи бонусы и ранний доступ к материалам!
- Ранний доступ к Эпизодам
- Чек‑лист «Создание сайта на WordPress»
- Готовые фрагменты исходников проекта
- Шпаргалки со сниппетами — копируй и вставляй в реальные проекты
- Доступ в приватный чат: задавай вопросы, получай разбор кода