Корпоративный сайт Национальной ассоциация охраны труда
Клиент
Sercons
Период
Март - Май 2024
Услуга
Верстка, WordPress адаптация, Интеграция контактных форм
О проекте
SerconsMed представляет собой медицинский центр, расположенный в Москве, предлагающий широкий спектр медицинских услуг как для физических лиц, так и для организаций.
Задача
Тип проекта: Корпоративный сайт медицинского центра
Технологии: WordPress, HTML5, CSS3, JavaScript, PHP
CMS: WordPress
Дизайн: предоставлен заказчиком в виде готового макета (Figma)
Передо мной как разработчиком стояли следующие ключевые задачи:
- Сверстать сайт по готовому дизайн-макету, строго соблюдая все отступы, шрифты, цвета и адаптивность.
- Интегрировать верстку в CMS WordPress, обеспечив удобную админку для редактирования контента клиентом.
- Настроить отправку заявок через формы обратной связи, с возможностью редактирования форм через админку.
- Обеспечить кроссбраузерность и адаптивность — сайт должен корректно отображаться на всех устройствах и в современных браузерах.
- Оптимизировать производительность сайта — обеспечить быструю загрузку страниц, чистый код и логичную структуру.
- Подготовить сайт к дальнейшему SEO-продвижению — включая семантическую верстку и базовую оптимизацию.
Результат
1. Верстка по макету
Полностью сверстал все страницы сайта: главную, страницы услуг, карточки врачей, страницу контактов и т. д.
Использовал семантическую HTML5-разметку для улучшения SEO.
Реализовал адаптивную верстку с использованием CSS Flexbox и Media Queries для корректного отображения на мобильных, планшетах и десктопах.
2. Интеграция в WordPress
Подготовил кастомную тему WordPress, без использования готовых шаблонов.
Использовал шаблонизатор WordPress (Loop, WP_Query) для динамического вывода данных (например, список врачей, новости, услуги).
Настроил кастомные типы записей (CPT) для удобного добавления врачей и услуг через админку.
Создал настраиваемые поля (ACF) для гибкого редактирования контента (должности врачей, часы приёма, адреса, цены и др.)
3. Обратная связь и формы
Подключил и настроил контактные формы через плагин Contact Form 7.
Формы валидируются на клиенте, данные отправляются на почту администратора.
При необходимости формы можно редактировать в админке без вмешательства в код.
4. Оптимизация и производительность
Минимизировал CSS и JS-файлы, отключил лишние скрипты WordPress.
Добавил кеширование и lazy loading изображений.
Использовал SVG-иконки и оптимизированные изображения для ускорения загрузки.
5. Безопасность и администрирование
Отключил редактирование файлов через админку WordPress.
Настроил базовую защиту от спама в формах.
Обновил права доступа пользователей и настроил резервное копирование.