Поступила заявка на разработку современного и технологически продвинутого сайт-визитки для премиальной студии электроэпиляции и косметологии. Функциональность сайта и дизайн должны не просто декларировать, а визуально и эмоционально подтверждать высокий класс услуги, вызывать безусловное доверие к бренду и мастерам, внушать уверенность в безопасности и профессионализме. Сайт должен быть построен как убедительный инструмент конверсии: с чёткой и логичной структурой, убедительными аргументами (например, сертификаты, отзывы, «до/после»), продуманной навигацией и мощными триггерами для принятия решения — всё это должно мотивировать посетителя не просто задуматься, а оперативно и уверенно оставить заявку на запись.
Работа на чистом коде — это единственно верный путь к долговечности, скорости и настоящей кастомизации без компромиссов. WordPress в этом случае выступает только как удобная админ-панель для вас, а вся фронтальная и бэкенд-логика пишется руками. Вот как это я реализовал технически и визуально:
Архитектура темы: с нуля
Я не беру готовую тему и не перекрашиваю её. Я создаю кастомную тему с нуля, где каждый файл отвечает строго за свою задачу. Никакого лишнего кода.
Отказ от плагинов: как это работает
Каждый функционал, который обычно отдают плагинам, пишу сам ровно в том объёме, который нужен. Это исключает уязвимости и раздувание базы данных.
| Задача | Как делаем без плагинов |
|---|---|
| Форма заявки + Онлайн-запись | AJAX-обработчик в functions.php. Данные уходят на email и сохраняются в кастомный тип записи в админке «Заявки». Защита: nonce + Google reCAPTCHA v3 (подключается через API ключи, без плагина). |
| SEO-структура | Чистая семантическая вёрстка (<header>, <main>, <section>, <article>), микроразметка https://Schema.org (Organization, Service, FAQ), кастомные мета-теги выводятся через хуки WP. XML-карта генерируется простым скриптом. |
| Слайдер «До/После» | Пишем на чистом JS (requestAnimationFrame, touch events для свайпа на телефоне). Вес ~2 КБ. |
| Галерея студии | Используем встроенную галерею WordPress, но выводим её через кастомный легковесный лайтбокс на CSS (свойство :target или <dialog>). |
| Отзывы | Кастомный тип записи. Вывод через WP_Query. Схема Review в микроразметке. |
| FAQ (Часто задаваемые вопросы) | Кастомный тип записи + аккордеон на <details> <summary> с плавной анимацией. Схема FAQPage. |
| Кеширование | Серверный уровень (настроим Nginx FastCGI Cache). На стороне WP — никаких плагинов кеширования. |
Скорость загрузки: показатели Google PageSpeed 95+
Без плагинов и с чистым кодом можно достичь почти идеальных показателей.
Технические решения:
- Критический CSS: Стили первого экрана вшиваются прямо в
<head>. Остальной CSS грузится асинхронно с атрибутомmedia="print"с переключением наallпри загрузке. - Изображения: Используем формат WebP с фолбэком на JPEG. Размеры прописываются явно (width/height) для предотвращения сдвигов макета. Ленивая загрузка — нативный атрибут
loading="lazy". - Шрифты: Локальное хранение (не Google Fonts). Подключаем только нужные начертания. Используем
font-display: swapдля мгновенного показа текста. - JS: Никаких jQuery, jQuery Migrate и прочего наследия. Только чистый ES6+. Все скрипты с атрибутом
defer. - HTTP-запросы: Минимальны. CSS — 1 файл, JS — 1 файл, шрифты — выборочно.
Анимации на чистом CSS и JS
Никаких библиотек анимации (AOS, GSAP, anime.js). Только то, что легко поддерживать:
- Плавное появление блоков: Используем Intersection Observer API. Когда блок попадает во вьюпорт, мы добавляем ему класс
.is-visible, который запускает CSS-переходы (opacity + transform). Это аппаратно ускоряется браузером. - Параллакс на первом экране: Чистый CSS через
perspectiveиtranslateZили лёгкий скрипт на requestAnimationFrame, который не дёргает перерисовку. - Аккордеон FAQ: Нативный тег
<details>сmax-heightанимацией через небольшой JS-хелпер (для плавности). - Плавный скролл: Нативный CSS
scroll-behavior: smooth.
Удобство редактирования
- Главная страница: блоки собираются в админке через кастомные поля (пишу свою метабокс-логику).
- Услуги: кастомный тип записи. Вы добавляете новую услугу как обычную запись, заполняя поля: название, описание, фото, цена, длительность.
- Специалисты: фото, имя, специализация, описание, ссылка на запись к конкретному специалисту.
- Фото студии: галерея управляется через стандартный медиа-загрузчик WordPress.
- SEO: каждый блок — это отдельный подключаемый файл, поэтому вы можете в любой момент расширить структуру главной страницы, добавив новый
template-part.
Мобильная версия (адаптация)
- Шапка: логотип слева, бургер-меню справа. При открытии меню занимает весь экран с затемнённым фоном.
- Первый экран: текст центрируется, кнопки в столбик на всю ширину.
- Блоки «Почему мы» и «Специалисты»: 2 колонки → 1 колонка.
- Галерея: сетка 4 фото → 2 фото в ряд → возможность свайпа.
- Форма: все поля на всю ширину, кнопка «Записаться» на всю ширину.
- Отступы уменьшаются до 24px по бокам.
Резюме
Вы получаете тему WordPress, которая:
- весит минимально (вся тема < 200 КБ без картинок);
- работает на чистом коде PHP, CSS, JS;
- легко редактируется;
- не зависит от обновлений сторонних плагинов;
- имеет идеальную базу для SEO;
- выглядит эксклюзивно, потому что в ней нет ни строчки чужого дизайна.