Задача

Клиент обратился с задачей сверстать блог для уже работающего сайта EvExperts.

Сайт был не новым проектом с нуля, а действующим WordPress-сайтом, в который нужно было аккуратно встроить новые страницы по готовым макетам из Figma.

Нужно было сделать:

РазделЧто требовалось
Страница блогаВывод статей, фильтрация по категориям, кнопка загрузки новых материалов
Страница статьиОтдельный шаблон для публикаций с контентом, сайдбаром и дополнительными блоками
ИнтеграцияВстроить всё в существующую тему WordPress
АдаптивностьНастроить корректное отображение на десктопе, планшетах и мобильных
ПередачаПодготовить финальную копию сайта с файлами, базой и инструкцией

Главное ограничение проекта: сайт уже был рабочим, поэтому важно было не нарушить существующую структуру, стили и логику.

Что было сделано

Страница блога с фильтрами

Для сайта была реализована отдельная страница блога. Она выводит публикации в виде карточек и позволяет фильтровать материалы по категориям.

Были сделаны:

  • hero-блок страницы блога;
  • вывод категорий в виде фильтров;
  • сетка карточек статей;
  • первичная загрузка публикаций;
  • AJAX-фильтрация без перезагрузки страницы;
  • кнопка «Показать ещё статьи»;
  • состояние пустого результата;
  • адаптивная версия для разных экранов.

Фильтрация работает без полной перезагрузки страницы: пользователь выбирает категорию, а список материалов обновляется динамически.

Шаблон отдельной статьи

Отдельно был сделан шаблон single.php для страниц статей.

В шаблон вошли:

  • hero-блок статьи с изображением;
  • breadcrumbs;
  • вывод категорий;
  • дата публикации;
  • время чтения;
  • основная колонка с контентом;
  • сайдбар;
  • оглавление статьи;
  • активный пункт оглавления при скролле;
  • нижний блок с мета-информацией;
  • блок связанной статьи;
  • блок других статей после материала;
  • кнопка перехода ко всем статьям.

Особое внимание было уделено структуре страницы: статья не должна выглядеть просто как стандартный WordPress-пост. Она должна быть частью сайта, визуально соответствовать макету и помогать пользователю читать материал удобно.

Блок других статей

Под основной статьёй и сайдбаром был добавлен отдельный блок с другими публикациями.

В нём предусмотрены:

  • серый фон секции;
  • контент по центру с ограничением ширины;
  • карточки других статей;
  • изображения фиксированной высоты;
  • excerpt;
  • декоративный corner-элемент;
  • кнопка перехода ко всем статьям.

Этот блок помогает удерживать пользователя на сайте и переводить его к следующим материалам.

Адаптивность

После интеграции были отдельно доработаны мобильные состояния.

Правились:

  • расположение даты и времени чтения;
  • вывод категорий;
  • поведение карточек;
  • отступы между блоками;
  • высота изображений;
  • переносы элементов на узких экранах.

В результате блог и страницы статей корректно отображаются не только на десктопе, но и на мобильных устройствах.

Техническая часть

Работа выполнялась внутри существующей WordPress-темы.

Использовались:

WordPress
PHP
HTML
CSS
JavaScript
AJAX
WP_Query
get_categories()
admin-ajax.php

Для страницы блога была реализована логика фильтрации через AJAX. Для страницы статьи был доработан шаблон single.php с генерацией оглавления по заголовкам h2.

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

Что было готово по итогу

В результате работы для EvExperts были готовы:

  • страница блога;
  • фильтры по категориям;
  • AJAX-загрузка статей;
  • кнопка «Показать ещё статьи»;
  • карточки материалов;
  • шаблон отдельной статьи single.php;
  • hero-блок статьи;
  • breadcrumbs;
  • дата и время чтения;
  • категории статьи;
  • оглавление;
  • сайдбар;
  • блок связанной статьи;
  • блок других статей;
  • адаптивная версия;
  • финальный архив сайта;
  • дамп базы данных;
  • инструкция для переноса и восстановления.

Передача проекта

После завершения работ была подготовлена финальная копия сайта.

В пакет вошли:

test1-vagizov-files-2026-05-14.tar.gz
test1-vagizov-db-2026-05-14.sql.gz
README.txt

Отдельно в инструкции было указано, что после переноса нужно:

  • импортировать базу данных;
  • прописать доступы в wp-config.php;
  • заменить временный домен на основной;
  • пересохранить постоянные ссылки;
  • открыть сайт для индексации;
  • проверить robots.txt и sitemap.xml;
  • проверить страницы, изображения, формы и админку.

Итог

Для сайта EvExperts был свёрстан и интегрирован полноценный блог на WordPress.

Работа включала не только внешний вид по макетам, но и реальную интеграцию в существующий сайт: шаблоны, фильтрацию, AJAX-загрузку, адаптивность и финальную техническую передачу проекта.

Сайт получил готовый раздел блога, отдельные страницы статей и понятную структуру для дальнейшей публикации материалов.