Техподдержка сайта на Wordpress, как правильно выстроить развитие проекта, а главное сэкономить деньги клиента!

Для успешного развития и доработки сайта необходимо уделить внимание трём ключевым аспектам:

1) коммуникация с командой разработки

2) настройка среды разработки и релиза

3) процесс постановки и приёмки задач.

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

В этой статье мы рассмотрим причины возникновения такой ситуации и предложим пути её решения на примере одного проекта. А также детально разберём те задачи, которые были реализованы нашей командой в рамках технической поддержки на протяжении 3 лет. И разберем гибкий метод разработки с использованием канбан.

Клиент Онлайн-касса.ru — федеральная компания по автоматизации бизнеса. Подбирает и продает торговое оборудование и программное обеспечение в соответствии с законодательством (54-ФЗ, Закон о маркировке).

За 3 года разработки командой Xpert было выполнено более 2500 веток в GitLab, совершено более 5000 коммитов, а на проект было потрачено более 2000 часов работы команды. Этот значительный вклад отражает профессионализм, ответственность и четкость в каждом этапе работы. Отдельный респект Радиславу и Алексу!

Содержание:

Краткое описание
Основные задачи и цели клиента в рамках технической поддержки сайта
Описание процесса взаимодействия с клиентом и ведения задач в Kaiten (аналог Trello)
Описание процесса приемки задач
Заключение

Сайт создан на платформе WordPress с использованием плагина WooCommerce. Это позволяет эффективно управлять каталогом товаров, обеспечивая удобный процесс покупки для пользователей. Все заказы оформляются непосредственно через сайт, что делает шопинг простым и быстрым. WooCommerce предоставляет гибкие возможности для настройки платежей, доставки и управления товарами, что идеально подходит для успешного онлайн-бизнеса.

На сайте также подключены различные услуги для улучшения пользовательского опыта и функциональности:

Доставка СДЭК: интеграция с системой доставки позволяет пользователям быстро рассчитать стоимость и сроки доставки прямо на сайте, а также отслеживать статус отправлений.
FormDesigner: это онлайн-конструктор веб-форм, который позволяет легко создавать формы любой сложности. Интеграция с FormDesigner дает возможность реализовывать заявки, опросы и другие формы для сбора информации от пользователей.
Mailchimp: подключена система email-маркетинга Mailchimp для управления рассылками, создания эффективных email-кампаний, а также сбора и сегментации базы подписчиков для повышения вовлеченности и продаж.
JivoSite, который интегрирован для улучшения взаимодействия с пользователями. Специальная модификация JivoSite позволяет на страницах товаров отображать персонализированное приветствие, основанное на тегах товара. Это значит, что в зависимости от того, какой товар или категория товара просматривается, пользователю будет показано индивидуальное сообщение, соответствующее теме или категории, к которой относится данный товар. Это улучшает взаимодействие с клиентами, повышает их вовлеченность и помогает быстрее решить вопросы или предоставить консультацию по товару.

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

На сайте был выполнен полный редизайн, направленный на улучшение пользовательского опыта и современный внешний вид. Обновленный интерфейс включает:

Обновленную главную страницу с акцентом на визуальное представление товаров и ключевых предложений.
Улучшенные карточки товаров с интуитивно понятным расположением элементов, включая слайдер фотографий по наведению, рейтинги и бейджи.
Современный дизайн каталога, включающий переработанный фильтр, улучшенную систему поиска и адаптацию для мобильных устройств.
Обновленный блог, где переработан шаблон постов, добавлен трендовый сайдбар и улучшена читабельность материалов.
Обновленный поиск, который стал более удобным и функциональным
Полная адаптация сайта для мобильных устройств и планшетов, что обеспечивает комфортный доступ с любых устройств.

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

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

Покупка в 1 клик — позволяет клиентам быстро оформить заказ, минимизируя количество шагов.
Баннерная система — предоставляет возможность эффективно управлять рекламными материалами, привлекая внимание к акциям или популярным товарам.

Расчет рассрочки — интерактивный инструмент, позволяющий пользователям рассчитать условия оплаты в рассрочку прямо на странице товара.
Видео-виджеты с переключением YouTube/Rutube — интегрированные видеоплееры, которые позволяют переключаться между платформами в зависимости от предпочтений пользователя или региональных ограничений.

Эти функции делают сайт удобным и функциональным, как для покупателей, так и для владельцев бизнеса.

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

Добавлен слайдер фотографий по наведению, что позволяет пользователям быстро ознакомиться с продуктом.
Доработана система рейтинга для более точного отображения отзывов покупателей.
Выведены атрибуты товара, такие как характеристики и дополнительные параметры.
Внедрена система бейджей для товаров (например, «Хит», «Скидка», «Новинка»).
Также был добавлен блок «Комплект «Онлайн-касса под ключ», который позволяет пользователям просчитывать стоимость комплекта товаров и дополнительных услуг. В этом блоке предусмотрена возможность добавления дополнительных услуг в комплект, что делает процесс выбора и покупки более гибким и удобным для клиентов.
На сайте переработаны табы товара, что улучшает структуру и удобство навигации по информации о товаре. Добавлены новые вкладки, такие как инструкции, которые можно управлять напрямую в административно товара. Это позволяет легко добавлять и редактировать инструкции, обеспечивая клиентам доступ к полезной информации о товаре. Кроме того, в вкладке «Описание» был добавлен виджет «С этим товаром покупают», который выводит похожие товары, предлагая покупателям дополнительные варианты для выбора. Это помогает увеличить средний чек и улучшить пользовательский опыт, предоставляя рекомендации на основе интересов клиентов.

Переработан фильтр каталогов, добавлены новые параметры и улучшена скорость работы.
Улучшен поиск по сайту: Поиск осуществляется как по товарам, так и по категориям. Для блога создан отдельный поиск, фокусирующийся на статьях.

Полностью переработан шаблон постов, выведены теги статей, количество уникальных просмотров, имя автора с возможностью редактирования данных, модифицирован плагин рейтинга для статей.
Добавлен сайдбар, где размещены: трендовые статьи, подписка на рассылку и возможность размещения баннера.
Добавлены шорткоды для блога, позволяющие удобно интегрировать дополнительные элементы, с возможностью создания кастомных шорткодов.
На сайте добавлена функция автоматической генерации содержания статьи, которое формируется на основе заголовков h2 и h3. Это позволяет пользователям быстро ориентироваться в структуре статьи и переходить к интересующим разделам, улучшая навигацию и удобство чтения. Содержание автоматически обновляется при добавлении новых заголовков, обеспечивая актуальность и полноту информации на протяжении всего текста.
Реализован виджет «Другие статьи», который показывает схожие материалы по теме.

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

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

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

Особенности управления:

Администраторы могут гибко настраивать страницы, добавляя или изменяя блоки контента.
Gutenberg предоставляет удобный интерфейс, позволяющий создавать уникальные комбинации текстовых, графических и интерактивных элементов.
Возможность добавления кастомных блоков, например: галереи изображений, видео-виджеты, контактные формы, с возможностью менять картинку, описание формы и выбор формы. Списки и таблицы с возможностью фильтрации.

Преимущества нового подхода:

Удобство управления - блоки Гутенберга позволяют быстро и легко редактировать страницы, создавая уникальные кейсы без необходимости сложной разработки.
Гибкость отображения - с помощью фильтров пользователи могут легко находить релевантную информацию, а адаптивный дизайн страниц обеспечивает удобство просмотра на любых устройствах.
Повышение вовлеченности - интерактивные элементы и продуманная структура страниц делают их более привлекательными для пользователей, что способствует улучшению взаимодействия с контентом и увеличению времени, проведенного на сайте.

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

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

Быстрый просмотр товара в виджетах, позволяющий быстро ознакомиться с продуктом, не переходя в карточку товара.
На сайте добавлены колбэки в виде попапов с логикой, которые активируются в зависимости от действий пользователей. Эти попапы могут отображаться на основе различных условий, таких как время нахождения на странице, действия с элементами сайта или нажатия на кнопки. Логика попапов позволяет гибко настраивать их поведение, обеспечивая интерактивный опыт для пользователей, например, для уведомлений о скидках, предложениях, подписке на рассылку или уточнении информации.
На сайте была внедрена схема разметки (Schema Markup) для улучшения SEO и взаимодействия с поисковыми системами.
Были добавлены следующие типы разметки: разметка организации - включает основные данные об организации, такие как название, адрес, контактная информация и логотип. Это позволяет улучшить отображение компании в результатах поиска.
Разметка товаров и категорий - каждый товар и категория имеют структурированную разметку, что помогает поисковым системам лучше интерпретировать и отображать информацию о продукции. Разметка для кастомных типов автоматизаций - уникальные типы автоматизаций также получили структурированные данные, что повышает их видимость в поиске и упрощает индексацию. Эти изменения способствуют улучшению видимости сайта в поисковых системах, увеличению CTR (Click-Through Rate) и упрощению взаимодействия пользователей с сайтом через органический поиск.
Cистема настройки шаблонов: одно из ключевых нововведений! Теперь клиентам и администраторам доступна возможность гибкой настройки отображения информации для различных товаров и категорий через индивидуальные шаблоны.
Система позволяет: применять определенные шаблоны к товарам и категориям - администратор может выбрать и привязать конкретный шаблон к определенному товару или категории, чтобы изменить способ отображения информации или интерфейса.
Гибкость в управлении контентом: система позволяет быстро адаптировать представление информации, создавая уникальные пользовательские интерфейсы для разных категорий и товаров, повышая их привлекательность и удобство.
Персонализация для разных сегментов аудитории: настройка шаблонов позволяет адаптировать контент и визуальные элементы под предпочтения целевой аудитории, улучшая пользовательский опыт.
Простота управления: система интуитивно понятна и позволяет администраторам быстро и без дополнительных знаний менять отображение контента.
Как это работает? Администратор выбирает категорию или товар в административной панели. К товару или категории привязывается определенный шаблон, который изменяет внешний вид или структуру информации на странице. Шаблон может включать в себя различные элементы: Различные блоки информации (например, описание, видео, инструкции). Интерактивные элементы, такие как баннеры или дополнительные подсказки. Динамическое отображение информации в зависимости от пользовательского поведения.
На сайте реализованы интерактивные формы с использованием плагина Contact Form 7 (CF7), обеспечивающие удобное и безопасное взаимодействие с пользователями.
Особенности форм: формы включают скрытые поля, которые автоматически собирают дополнительные данные, такие как источник трафика, уникальные идентификаторы сессий или пользовательские параметры. Эти данные полезны для аналитики, настройки персонализированного опыта и повышения качества обслуживания.
Интеграция капчи: формы защищены капчей для предотвращения автоматического спама. Капча имеет гибкую настройку - может включаться или выключаться в конфигурационном файле. Это позволяет быстро адаптировать систему в зависимости от текущих требований безопасности или нагрузки на сайт.
Гибкость и адаптивность: возможность управления настройками капчи через конфиг ускоряет внесение изменений и снижает необходимость ручной правки форм.
Безопасность: капча эффективно защищает формы от злоумышленников и спам-ботов.
Удобство для администраторов: простая настройка скрытых полей и управление параметрами через плагин. Эти улучшения обеспечивают безопасное, функциональное и гибкое использование форм, соответствующее современным стандартам качества.

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

Для эффективной аналитики и оценки работы сайта в проекте реализована настройка целей и отслеживания метрик на основе пользовательских действий. Это позволяет собирать данные о поведении пользователей, эффективности отдельных элементов сайта и общего пользовательского пути.

1) Цели на пользовательские действия:

Оформление заказа - отслеживается завершение процесса оформления заказа, включая действия на страницах корзины, выбора способа доставки и оплаты.
Покупка в 1 клик - событие фиксируется при успешной отправке формы покупки в 1 клик.
Добавление товара в корзину - учет каждого нажатия на кнопку добавления товара

2) Цели на взаимодействие с элементами сайта:

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

3) Поведенческие метрики:

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

Переходы по баннерам: отслеживается количество кликов на рекламные баннеры.
Подписка на рассылку: событие фиксируется при успешной регистрации в базе подписчиков.
Клики на видео-виджеты: учитывается взаимодействие с видеоконтентом (проигрывание, пауза).

Google Analytics / Яндекс.Метрика:

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

Tag Manager:

Интеграция с Google Tag Manager позволяет настраивать события без изменения кода сайта, простая настройка триггеров на основе действий пользователя. Возможность тестирования и отладки целей в режиме реального времени.
Дополнительные инструменты - кастомные события, настройка индивидуальных триггеров для специфических элементов сайта.

Повышается прозрачность пользовательского пути: понятно, какие действия совершают посетители сайта.
Улучшается управление маркетинговыми кампаниями: данные помогают корректировать акценты на ключевых этапах взаимодействия с пользователями.
Появляется возможность своевременно выявлять и устранять «узкие места» в функционале сайта.

Хотим сказать отдельное спасибо коллегам из Kaiten за то, что мы оперативно импортировали все свои проекты из системы Trello! Всем советуем этот сервис!

Сбор требований - это один из очень важных этапов!

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

Кровь, слёзы и боль!

Когда в компании не выстроен процесс постановки задач, внедрение канбан (и не только) доски и взаимодействие в единой среде - это очень сложно и больно, но мы помогаем всеми силами на данном этапе - потому, что это в первую очередь помогает снизить расходы на поддержку сайта!

На этапе обсуждения задач с клиентом выявляются ключевые потребности, уточняются детали и сроки выполнения. Все пожелания фиксируются в понятной и структурированной форме.

Создание задач

После уточнения всех деталей задачи создаются в Кайтене и добавляются в колонку Бэклог. Каждая задача содержит четкое описание, критерии готовности и дополнительные файлы (при необходимости).

Утверждение приоритетов

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

Обратная связь по задачам

Если во время выполнения задач возникают вопросы или требуется уточнение деталей, это решается следующим образом:

Оставляется комментарий к задаче в Кайтене с конкретным вопросом или уточнением.
При необходимости быстрых уточнений информация обсуждается в общем чате Telegram, где участники команды могут оперативно ответить.

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

Бэклог - здесь хранятся все задачи, которые пока не взяты в работу. Это своеобразный «резерв» задач для будущих спринтов.
Спринт - В эту колонку задачи перемещаются на период текущего спринта. Команда работает только с задачами, находящимися здесь, чтобы обеспечить концентрацию.
Мерж Реквест - после завершения разработки задача перемещается сюда. На этом этапе создается запрос на объединение кода с основной веткой проекта (Pull Request).
Smoke тестирование - после успешного мёрджа задача передается для первичной проверки (Smoke тестирования). Это быстрый набор тестов для выявления критичных ошибок.
Тестирование на Host - задачи, прошедшие Smoke тесты, перемещаются сюда. Тестирование выполняется на промежуточном сервере (Host), чтобы удостовериться в корректной работе функционала перед релизом.
Релиз на Live - после успешного тестирования на Host задача выпускается в продакшн (Live). Раз в неделю выполняется релиз всех готовых задач на продакшен (Live). Этот регулярный процесс позволяет поддерживать стабильный ритм выпуска обновлений.
Тестирование на Live - после релиза проводится финальное тестирование на продакшене, чтобы проверить работу функционала в реальных условиях.
Готово - завершенные задачи, прошедшие все этапы тестирования, попадают сюда. Это финальная колонка, обозначающая, что работа над задачей завершена.

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

Разработка - каждый разработчик создает отдельную ветку для выполнения задачи. В процессе работы код пишется в соответствии с заданием и требованиями клиента.
Pull Request - после завершения работы над задачей создается Pull Request (PR) в GitLab. PR включает описание выполненной задачи, список изменений, ссылки на связанные задачи в трекере.
Код-ревью - тимлид проверяет все Pull Request’ы. Его задачи включают проверку кода на соответствие стандартам качества, проверку логики выполнения задачи, устранение потенциальных ошибок или конфликтов.
Слияние (Merge) - после успешного прохождения ревью тимлид одобряет слияние ветки в основную (production или staging) ветку репозитория.
Релиз - тимлид выполняет сборку и выкладывает изменения на продакшн (Live). Регулярные релизы происходят раз в неделю, что обеспечивает стабильный процесс обновления сайта и минимизацию рисков.

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

Этот подход гарантирует надежность и высокий уровень технического сопровождения проекта.

Релиз происходит строго раз в неделю. Это позволяет

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

А мы в свою очередь гарантируем клиенту регулярное и корректное обновление функционала.

Каждая задача в Кайтене имеет назначенного исполнителя и сроки выполнения. Это помогает команде и клиенту отслеживать, кто за что отвечает и когда задача будет готова.
Постоянное обновление статусов задач позволяет быстро реагировать на изменения или проблемы.

Прозрачность: все участники процесса (как со стороны команды, так и со стороны клиента) видят статус задач в реальном времени.
Контроль качества: многоуровневое тестирование (Smoke, Host, Live) обеспечивает надежность и стабильность результата.
Гибкость: возможность корректировать приоритеты задач на этапе Бэклога или Спринта позволяет оперативно реагировать на изменения требований.

На проекте предусмотрен тестировщик, который выполняет следующие действия:

Smoke тестирование - тестировщик проверяет базовую функциональность задачи после мёрджа. Это быстрый набор тестов, позволяющий выявить очевидные проблемы.
Тестирование на Host - после Smoke тестов задача проверяется на промежуточном сервере (Host). Тестировщик убеждается, что новая функциональность работает корректно и не ломает существующую.
Тестирование на Live - после релиза задачи на продакшен тестировщик проводит финальное тестирование в реальных условиях, чтобы подтвердить стабильную работу.

Помимо основной продакшн-площадки (Live), были развернуты и используются еще две среды:

Дев (Development): среда для разработки, на которой команда проводит интеграцию новых функций и проверку их работоспособности до этапа тестирования и релиза.
Хост (Host): промежуточная среда для более детального тестирования после Smoke-тестов и перед выходом на продакшен.

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

На проекте реализована автоматизация тестирования через Jenkins. Автотесты полностью эмулируют действия человека и проверяют задачи на всех этапах:

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

После успешного прохождения всех этапов (тестировщиком и автотестами) задача перемещается в колонку Тестирование на Live.
После финальной проверки на продакшене задача получает статус Готово.

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

Клиент Онлайн Касса — это успешный пример компании, где внедрение современных технологий и продуманных решений позволило создать функциональный и удобный сайт для пользователей и бизнеса. Платформа WordPress с WooCommerce, дополненная уникальными функциями и интеграциями, обеспечивает надежное управление каталогом товаров, заказами и взаимодействием с клиентами.

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

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

Команда XPERT - может помочь и вам встать на путь истины и правильно заняться технической поддержкой сайта на WordPress! Записывайтесь на бесплатной аудит сайта!

Техподдержка сайта на Wordpress, как правильно выстроить развитие проекта, а главное сэкономить деньги клиента!

Краткое описание проекта

Основные задачи и цели клиента в рамках технической поддержки сайта

Карточки товаров

Каталоги и поиск

Шаблон блога

Новый тип страниц

Управление страницей кейса в административной панели

Дополнительные функции

Аналитика - настройка целей и метрик на различные события

Основные цели и события

Инструменты настройки и отслеживания

Результаты настройки целей

Описание процесса взаимодействия с клиентом и ведения задач в Kaiten

1. Взаимодействие с клиентом

Слёзы вытерли, авторизовались в Кайтене и погнали!

2. Ведение задач в Кайтене

Процесс разработки и выпуска кода

Основные этапы:

Преимущества подхода:

3. Еженедельный релиз

4. Прозрачность и контроль

Преимущества такого подхода

Описание процесса сдачи задач

Дополнительные развернутые площадки

3. Автотесты на проекте

4. Итоговая сдача задач

5. Преимущества подхода

Заключение