Революция на logema.org, или — зачем разработчикам понадобился блог и причем тут вакансии

ЗаказчикКомпания «Логема«ЗадачаПодключить WordPress для публикации контента и вакансий. Создать кастомные блоки для WP.

В мире IT-разработки каждый день что-нибудь происходит: деплоятся новые проекты, объявляется срочный сбор резюме, появляются поводы для гордости, о которых хочется рассказать широкой аудитории. В компании «Логема» для этих целей мы используем три раздела: Блог, Проекты, Вакансии. Раньше публикация материалов занимала неприлично много времени — на весь процесс создания страницы статьи/кейса/вакансии могло уходить до 40+ часов!  

Мы решили, что пора что-то менять: нужно было сделать так, чтобы контент-менеджер мог быстро добавлять любые материалы в блог, тратя на это не более 1 часа. Попутно придумали, как можно ускорить работу с разделом вакансий на сайте и создать кастомные блоки для WP. В кейсе разбираемся, какие метаморфозы произошли на сайте, зачем все это было нужно и причем тут WordPress (WP).

9c5365f96cad03f36787eaa92d1b8aaa.png

«Решение оптимизировать работу с блогом стало для нас стратегическим шагом. В какой-то момент мы столкнулись с тем, что времени на публикацию контента на сайте требовалось много и нам хотелось ускорить этот процесс. Мы задумались о том, что было бы здорово уйти от привычной работы с макетами в Figma и фронтенд-разработки. Наличие готового текста и графики достаточно, чтобы опубликовать новую статью. В дальнейшем мы применили такой подход в работе с кейсам — это тот самый контент, который помогает отделу продаж продавать больше и повышать лояльность клиентов. Трансформация logema.org потребовала переосмысления структуры сайта и подхода к управлению контентом: обеспечить гибкость процесса публикации и сохранить целостность существующей архитектуры. Решение этой задачи помогло нам по-новому взглянуть на процесс производства контента.» 

Сергей Горелов,
генеральный директор в компании «Логема»

Оптимизация работы с контентом для контент-менеджера

До внедрения нового решения создание и публикация одной статьи могла отнимать 3–6 дней и включать отрисовку макетов, верстку, тестирование и сам деплой. И это без учета времени на создание текстового материала и графики!

5ee9c57ec72410af4b65d13c47788fde.png

 До внедрения WP. Наиболее трудоемкими этапами были: создание макетов (3–8 часов), верстка (8–35 часов) и тестирование (1–5 часов)

70f4c3b03f5403524a9573a6ee862cf6.png

 После внедрения WP. Публикация кейса и статья занимает 1–2 часа, изменение контента — 10–15 минут

Весь процесс для разделов «Блог» и «Проекты» был пересмотрен, поскольку они обновлялись чаще всего. Таким образом, весь процесс должен был сократиться с 3–5 рабочих дней до одного.

Для реализации этой задачи мы решили использовать связку WordPress (WP) и NuxtJS — теперь публикация контента происходит через админку WP, интерфейс которой интуитивно понятен и прост. 

Ключевые аспекты решения:

  • Текст, графику, метатеги и JSON-разметку добавляет контент-менеджер в режиме «единого окна», а не фронтенд-разработчик.
  • Добавление ссылок в sitemap и создание разметки Schema.org в формате JSON-LD происходит автоматически при публикации.
  • Использование стандартизированных блоков в WordPress исключает необходимость создания макетов в Figma для каждой статьи/кейса.
  • Предварительно созданные блоки в WordPress значительно уменьшили объем ручной верстки и позволили сохранить единый стиль с остальными страницами сайта на NuxtJS.
  • Адаптивность страниц и стандартизация процесса публикации позволили исключить этап тестирования при размещении контента.

dfe6a6d5cefdcdf329a65d360154bb36.png

«При выборе системы для управления контентом блога и проектов рассматривались два варианта: Filament и WordPress. Мы остановились на WordPress по нескольким причинам. Во-первых, это проверенное решение в сообществе PHP-разработчиков, и у нас уже был опыт работы с этой платформой на проекте «МТС Линк». Во-вторых, WordPress предложил почти готовое решение, тогда как для адаптации Filament пришлось бы писать больше кода —, а мы хотели сэкономить время и усилия, не теряя в качестве.

Так как наш фронтенд уже был реализован на NuxtJS, мы решили использовать WordPress как headless CMS: то есть за администрирование и редактирование контента отвечает WordPress, а NuxtJS через REST API забирает данные и интегрирует их в наше приложение.

Для упрощения процесса управления контентом мы активно используем плагин Advanced Custom Fields (ACF), который позволяет добавлять необходимые поля без программирования. Например, если нам нужно добавить заголовок для страницы с проектами, мы просто создаем это поле через ACF, получаем данные через API, и задача решена.» 

Кирилл Пермяков,
fullstack-разработчик в компании «Логема»

Новый подход принес существенные улучшения как с точки зрения разработки, так и с позиции бизнеса: удалось значительно сократить время на создание новых страниц (с 40+ часов до одного часа) и снизить затраты на разработку/дизайн за счет автоматизации рутинных задач.

7817921ce8c65f4abf2785aeb0198b63.gif

Создание кастомных блоков для WP

В дополнение к уже существующим блокам встроенного в WordPress редактора Gutenberg мы реализовали еще два кастомных блока — «Отзыв клиента» и «Цитата». Обязательное условие — верстка и визуальное сходство этих блоков на WP с аналогичными на NuxtJS.

30d1250bac746cb89d5c51651a0eb728.png

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

dfe6a6d5cefdcdf329a65d360154bb36.png

«Для создания административного интерфейса управления вакансиями мы использовали стандартный функционал WordPress — создали новый тип контента «Вакансия», добавили туда необходимые блоки, и подключили все это дело в NuxtJS — так же, как и до этого подключали блог и проекты с помощью WordPress REST API.

На мой взгляд, WordPress сейчас — лучшее open-source решение для быстрого создания контентных сайтов. У этой CMS низкий порог входа для разработчиков и контент-менеджеров, она хорошо документирована и имеет классный, легко расширяемый API.

Конечно, можно было использовать Filament или внедрить TinyMCE/CKEditor –, но все эти решения в бесплатной версии имеют существенное количество ограничений. В последние несколько лет создатели WordPress проделали серьезную работу над редактором Gutenberg, который обладает обширным функционалом, открыт для разработчиков и хорошо выглядит для контент-менеджеров. К тому же, он очень похож на полюбившийся многим Notion — так что у контент-менеджеров не будет проблем с освоением этого редактора.» 

Кирилл Пермяков,
fullstack-разработчик в компании «Логема»

Так выглядит блок в редакторе WordPress — здесь применяется верстка на React и используются компоненты WordPress для создания интерфейса, позволяющего интерактивно редактировать данные в блоке.

0174c6b9d630e34e960ad75746860d31.png

Так выглядит блок в приложении на NuxtJS. Фреймворк через API забирает HTML-верстку (которую WordPress генерирует силами PHP) и встраивает ее на страницу.

f9a1296d209c86453962810f4b9afc9f.png

 Ключевые аспекты решения:

  • Выбор пал на Gutenberg из-за хорошей документации и дружелюбности к начинающим разработчикам.
  • Для создания редактируемых блоков в Gutenberg используется React. Он позволяет видеть результат редактирования блоков «на лету», а также гибко настраивать функциональность и внешний вид блоков.
  • Разработанное решение позволяет NuxtJS через API получать HTML-верстку, сгенерированную WordPress, и встраивать ее на страницу.
  • За счет этого обновления удалось упростить добавление/изменение существующих отзывов и цитат. Теперь контент-менеджер может самостоятельно добавлять и редактировать эти блоки без участия разработчиков и использовать мгновенный предпросмотр внесенных изменений.

e6f64c1d58162345e8c29eead3fc42e0.png

«WordPress оказался удобным инструментом: больше не нужно ждать несколько дней, пока новый кейс или статья появится на сайте. Процесс публикации готового материала сократился до 1–2 часов. Работа с контентом стала более гибкой и удобной — чтобы добавить новые блоки или поменять их порядок (обновить текст, добавить ссылку на другой релевантный контент), достаточно 5–10 минут, и не нужно привлекать фронтенд-разработчика. 

Думаю, это первый шаг к переносу остальных блоков с контентом на WordPress. В будущем мы планируем внедрить использование этого решения и для других страниц, например, где нужно регулярно обновлять контент «в моменте». Или, если нужно быстро создать посадочные страницы услуг и протестировать спрос. Теперь доработки, направленные на увеличение лидгена стали менее трудозатратными и стрессовыми.» 

Анастасия Шевчукова,  
специалист по интернет-маркетингу в компании «Логема»

Оптимизация размещения новых вакансий для удобства HR-менеджера

В «Логеме» мы стараемся оптимизировать процесс работы для сотрудников, предоставив им все необходимые инструменты для решения задач. Одна из ключевых задач HR — оперативно размещать информацию о вакансиях. Если с HH.ru все понятно, то на сайте компании сделать это быстро было невозможно. Требовался фронтенд-разработчик, что занимало время, а нам хотелось, чтобы все происходило быстро как на HH.ru. Скорость анонса вакансии влияет на эффективности ее закрытия!

Мы решили применить подход в духе ИТ-компании — предоставить возможность HR самостоятельно размещать вакансию через админку WP. 

Предыстория: у нас была страница вакансии на NuxtJS, мы перенесли ее структуру в WP, создали шаблон. Шаблон можно было скопировать, если нужно было создать новую страницу вакансии. HR по сути оставалось только поменять текст внутри блоков страницы и добавить название вакансии в метатеги (title, description, keywords), чтобы заголовки страниц и описание были уникальными — для SEO. 

Нашей задачей было сделать так, чтобы страница выглядела профессионально и привлекательно для потенциальных кандидатов. Как это стало возможным? Мы создали интерфейс в WordPress для управления актуальными вакансиями на сайте и разграничили права пользователей: редакторы имеют доступ к редактированию статей, HR — к редактированию страниц с вакансиями и списка вакансий, а администраторы — имеют полный доступ ко всем разделам админки WP.

b37ec034d4ec4c03fd67d206bcd3fb91.png

 Интерфейс управления вакансиями в админке. Список вакансий.

cf369f231bc9178066c5db953af0fbab.png

 Интерфейс управления вакансиями в админке: редактируем блок «Почему мы?»

058ceaab34cc8168e2b1ef3de884ef3b.png

 Получаем на выходе готовую страницу

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

Ключевые аспекты решения:

  • Ранее блоки страницы, связанные с публикацией и оформлением вакансий были в NuxtJS, а теперь мы перенесли их на WP.
  • Разработанное решение позволило реализовать отправку HTML-верстки, сгенерированной в WordPress, прямо в NuxtJS через API:

7db9f35eb1e4cd9bc0f44fcec09e7979.png

 Как теперь публикуется контент на сайте logema.org

6a646c94466b673a61806b4d533c605b.png

«WordPress — это удобный инструмент, который позволяет мне самостоятельно управлять вакансиями на сайте без необходимости обращаться к разработчикам. Особенно удобно, когда нужно быстро внести изменения или добавить новую вакансию.

Это экономит время и помогает сосредоточиться на поиске лучших специалистов для компании.» 

Олег Пучков,  
HR-менеджер в компании «Логема»

Что в итоге?

Нередко к нам обращаются клиенты с запросом на подбор удобного, интуитивно-понятного решения для работы с контентом. Теперь нам есть что рассказать. Например, что внедрение автоматизации для публикации контента и вакансий на сайте значительно упростило работу нашим контент- и HR-менеджерам. Сейчас новая статья или кейс публикуются за пару часов, новая вакансия — за 10–15 минут, не нужно привлекать фронтенд-разработчика к рутине или лишним тестам!

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

  • мы отказались от макетов в Figma и добавили возможность работать с разными блоками (от текста до метатегов) в одном окне;
  • разработали кастомные блоки для отзывов и цитат, которые сможем в будущем переиспользовать на других страницах, созданных на WP;
  • оптимизировали процесс размещения новых вакансий, сделав его более автономным.

Проверка гипотезы о том, насколько удобно работать в админке в WP, если вы не разработчик, а контент-менеджер или HR, прошла успешно! Хотите также? Приходите в «Логему» за разработкой подобного гибкого решения на WordPress.

Перейти на сайт

Полный текст статьи читайте на CMS Magazine