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

«Первый Ростовский» был создан в декабре 2019 года крупнейшей региональной телерадиокомпанией «Тихий Дон» как первый городской телеканал Ростова-на-Дону. В апреле 2020 он начал вещание в кабельной сети.

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

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

Orbitsoft начал разработку сайта с нуля в мае 2020: у нас оставалось около 5 месяцев. За это время на медиапортале нужно было предусмотреть:

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

Мы решили вести разработку на CMS WordPress:

• это одна из самых популярных CMS с большим сообществом разработчиков, которые постоянно дополняют базовую версию новыми плагинами — модулями, отвечающими за отдельные функции. Web-разработка на WordPress упрощает процесс — большую часть сайта можно собрать из готовых элементов без необходимости программирования. Это сокращает сроки проекта;
• у системы открытый исходный код на PHP — если готовые элементы не подходят, можно доработать их самостоятельно. С созданием сайта на WordPress справилась команда из 2 человек: дизайнера и разработчика. Пару раз понадобилась помощь фронтенда и бэкенда, а также системного администратора. Небольшая команда позволила сэкономить бюджет;
• С системой легко работать: у административной панели простой интерфейс, понятный текстовый редактор, а в интернете есть ответы на любой вопрос.

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

Плагин	За что отвечает в разработке web-сайтов
Breadcrumb NavXT	работа с цепочкой навигации;
Category Order and Taxonomy Terms Order	порядок разделов и категорий;
Post Types Order	порядок статей и новостей;
Cyr-To-Lat	преобразование кириллических символов в названиях рубрик и телепрограмм в латинские для создания легко читаемых URL;
FileBird	каталогизирование медиафайлов: изображений, документов, аудио и видео;
Regenerate Thumbnails	пересоздание изображений-миниатюр для статей, категорий, программ и новостей при изменении соотношения сторон или разрешения;
Relevanssi	увеличение соответствия поисковой выдачи запросу пользователя;
User Role Editor	изменение прав доступа для разных категорий пользователей сайта: кто создает материалы, кто их утверждает и публикует;
W3 Total Cache	кэширование страниц для ускорения загрузки;
WPForms	управление формами обратной связи, через которые пользователи предлагают новости и присылают материалы в редакцию;
Yoast Duplicate Post	возможность копирования статей, чтобы редакторы могли использовать старые статьи для написания новых;
Advanced Custom Fields PRO	плагин-конструктор дополнительных полей для статей и разделов сайта;
CM Ad Changer — Server Pro	показ рекламных объявлений.

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

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

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

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

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

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

Телекомпании не обязательно покупать собственные сервера, их можно арендовать, подключившись к сети доставки контента. Такие сети состоят из множества кэширующих серверов, которые ускоряют доставку контента жителям ближайших к ним городов. Для этого проекта была выбрана сеть CDNvideo. Ее узлы установлены в 20 городах России. Зрители «Первого Ростовского» получают видео с серверов, расположенных в Ростове-на-Дону.

Мы помогли компании настроить получение данных с оборудования телеканала. С серверов CDNvideo видеопоток выводится на сайт через HTML5-плеер, который транскодирует его в трех разрешениях в зависимости от скорости интернета пользователя: на низкой скорости запустится видео разрешением 480p, на высокой — 1080p. Дизайн встроенного плеера мы переделали в соответствии с цветовой гаммой «Первого Ростовского» и разместили его на сайте в рубрике «Прямой эфир».

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

Мы решили сделать программу передач самостоятельно. За основу взяли функцию создания собственных типов постов в WordPress, а плагином Advanced Custom Fields PRO ввели дополнительные поля: название передачи, время начала, возрастная категория, периодичность и отметка «Наш материал».

Но вносить информацию вручную — это долго и неудобно. Мы решили настроить автоматическое заполнение из оригинального файла: редакция телеканала составляет план вещания раз в две недели в виде Excel-таблицы.

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

Одним из пожеланий клиента было добавить на сайт кликабельные баннеры для размещения рекламных объявлений или ссылок на продвигаемые материалы телеканала. В административной панели должна была быть предусмотрена возможность:

• считать количество показов и переходов;
• изменять периодичность показа объявления;
• выбирать место на странице для показа;
• добавлять на баннер не только изображения, но и видео.

Практически со всеми этими задачами справился плагин для рекламных объявлений CM Ad Changer — Server Pro. Он позволяет задавать расписание показов, поддерживает как графические, так и видеобаннеры, но не умеет показывать объявления в заданных местах.

Эту функцию мы добавили с помощью виджетов — редактируемых фрагментов темы оформления. Они входят в стандартный набор функций WordPress, их можно включать и выключать через админку. Мы запрограммировали столько виджетов, сколько нужно было баннеров, и вывели содержание плагина Ad Changer — Server Pro в нужных частях страницы.

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

Среди разработчиков есть мнение, что сайты на WordPress уязвимы, их легко взломать из-за высокой популярности и открытого исходного кода. На самом деле популярность — это преимущество WordPress. Над этой платформой работает большое сообщество разработчиков: регулярно выходят обновления самой системы и основных плагинов, улучшаются функции и безопасность. Если вовремя устанавливать обновления, правильно настраивать сервер и систему создания бэкапов, то безопасность сайта на WordPress не будет уступать решениям, написанным с нуля или на CMS с закрытым исходным кодом. Неслучайно WordPress используют крупные IT-компании. Например, Microsoft и PlayStation ведут на ней свои блоги news.microsoft.com и blog.playstation.com. Даже сайт Белого дома whitehouse.gov сделан на WordPress.

Когда веб-дизайн и разработка сайта была закончена, мы загрузили его на сервер Mail.Ru Cloud Solutions и представили заказчику. После всех согласований приступили к обучению редакторского состава:

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

Разработка медиапортала на CMS WordPress для «Первого Ростовского» заняла 2 месяца. За это время команда OrbitSoft:

• разработала дизайн и создала адаптивный сайт на WordPress;
• вывела на сайт прямую трансляцию через сеть доставки контента;
• настроила автозаполнение программы передач;
• реализовала систему видеобаннеров;
• добавила интерактивную функцию «Предложить новость».

«Первый Ростовский» принял участие в конкурсе на 22-ю кнопку с полностью готовым сайтом и стал обязательным общедоступным телеканалом Ростова-на-Дону. Его трансляция ограничена территорией города: аудитория насчитывает до 1 000 000 телезрителей. Сайт 1rostov.tv посещают в среднем от 4000 до 8000 человек в месяц.