Sercons Мед

Корпоративный WordPress сайт компании Sercons для рынка России

Клиент

Sercons

Период

Март - Май 2024

Услуга

Верстка, WordPress адаптация, Интеграция контактных форм

Посмотреть

О проекте

SerconsMed представляет собой медицинский центр, расположенный в Москве, предлагающий широкий спектр медицинских услуг как для физических лиц, так и для организаций. 

  • Диагностика и консультации: включая терапевтические осмотры, консультации специалистов и комплексные обследования.​
  • Медицинские справки и осмотры: оформление медицинских справок, проведение профосмотров и диспансеризации.
  • Лабораторные анализы: сдача различных анализов с гарантией точности и быстроты получения результатов.
  • Вызов врача на дом: предоставление квалифицированной медицинской помощи на дому.

Задача

Тип проекта: Корпоративный сайт медицинского центра
Технологии: WordPress, HTML5, CSS3, JavaScript, PHP
CMS: WordPress
Дизайн: предоставлен заказчиком в виде готового макета (Figma)

Передо мной как разработчиком стояли следующие ключевые задачи:

  1. Сверстать сайт по готовому дизайн-макету, строго соблюдая все отступы, шрифты, цвета и адаптивность.
  2. Интегрировать верстку в CMS WordPress, обеспечив удобную админку для редактирования контента клиентом.
  3. Настроить отправку заявок через формы обратной связи, с возможностью редактирования форм через админку.
  4. Обеспечить кроссбраузерность и адаптивность — сайт должен корректно отображаться на всех устройствах и в современных браузерах.
  5. Оптимизировать производительность сайта — обеспечить быструю загрузку страниц, чистый код и логичную структуру.
  6. Подготовить сайт к дальнейшему 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.

Настроил базовую защиту от спама в формах.

Обновил права доступа пользователей и настроил резервное копирование.