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

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

Коротко

  • 01
    Что за инструмент

    CMS WordPress

  • 02
    Где используем

    Сайт телеканала «Первый Ростовский»

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

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

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

    Посещаемость сайта от 4 до 8 тысяч пользователей в месяц при охвате телеканала 1 миллион зрителей.

Городской телеканал борется за место в сетке вещания

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

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

Проблема: у молодого телеканала нет сайта

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

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

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

Решение: сайт на WordPress

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

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

Создали функционал с помощью плагинов

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

ПлагинЗа что отвечает
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-файла с распределением данных по соответствующим полям. Потом автоматически созданную программу можно корректировать вручную.

Автоматическая загрузка программы передач из 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 человек в месяц.

В чем бы вы ни нуждались, мы можем помочь!

Расскажите нам, с какими проблемами вы сталкиваетесь в своем бизнесе. Мы с нетерпением ждем вашего ответа.

Получите ответ по смс

Ваше сообщение успешно отправлено!
Представьтесь пожалуйста
Укажите номер, на который придет ответ
Нажимая на кнопку, вы даете согласие
на обработку персональных данных.