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

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

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

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

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

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

Мы решили делать портал на WordPress:

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

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

Чтобы сайт было удобно просматривать с экранов разных размеров, мы применили адаптивную верстку. Изначально мы предположили, что большинство пользователей будет заходить на сайт с мобильных устройств. Позже показатели посещаемости подтвердили гипотезу: 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 простой интерфейс, поэтому обучение прошло быстро;
• организовали чат технической поддержки: журналисты и редакторы задавали вопросы и описывали недочеты в работе сайта, настройке плагинов, создании статей, новостей и программы передач — мы отвечали и исправляли.

Мы создали для «Первого Ростовского» полноценный медиапортал за 2 месяца:

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

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