Как создать тикеры новостей в WordPress

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

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

Давайте начнем!

Что такое тикеры новостей?

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

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

Как показано на гифке ниже, видите ли вы, что заголовок новостей работает? Так работает новостная лента.

Пример новостной ленты в WordPress

Почему мы должны использовать тикеры новостей?

Новостные ленты имеют разные преимущества для разных типов веб-сайтов:

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

Таким образом, новостные ленты, несомненно, являются полезным инструментом для владельцев веб-сайтов. Более того, очень легко добавить бегущие строки новостей на ваш сайт WordPress. Перейдем к следующей части и получим одну для себя!

Как добавить тикеры новостей в WordPress?

Есть много способов добавить ленту новостей.

Вы можете использовать предварительно созданную тему с тикерами новостей в начале; это было бы проще всего. Просто внимательно прочтите документацию по теме.

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

В этом посте мы будем использовать бесплатный плагин под названием Ditty News Ticker plugin . Это бесплатно, очень просто в использовании и легко настраивается . Вам просто нужно скачать и активировать его в Личном кабинете.

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

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

Шаг 1. Добавьте новую тикер новостей

Сначала перейдите в Ленту новостей > Добавить новый .

На следующем экране вы увидите 5 вкладок ниже: Добавить заголовок, Шорткод, Режим тикера, Тип тикера и Глобальные настройки . Эти вкладки используются для настройки и отображения бегущей строки новостей.

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

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

После этого нажмите « Тип тикера», затем добавьте контент для отображения в ленте новостей (со ссылкой, если необходимо) в разделе « Текст тикера».

Как я уже упоминал выше, ваша новостная лента может содержать много тиков . Просто нажмите кнопку ( + ), чтобы добавить его, и нажмите кнопку ( x ), чтобы удалить.

Шаг 2. Настройте тикер новостей

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

Прежде всего, выберите, как будут отображаться ваши новостные ленты. Нажмите « Режим бегущей строки» , вы увидите 3 варианта: « Прокрутка», «Повернуть» и « Список» . На самом деле Scroll - самый распространенный вариант, но вы можете решить, какой из них наиболее подходит для вашего сайта.

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

Лично я выбрал режим прокрутки , поэтому я буду регулировать действие прокрутки. Следует отметить две важные вещи: скорость прокрутки и пробел . Собственно, чтобы узнать наиболее подходящие параметры, придется много раз пробовать. Лично я предпочитаю скорость прокрутки 8 и расстояние между отметками 10 пикселей.

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

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

Теперь ваша лента новостей готова к отображению!

Шаг 3. Отображение тикеров новостей

Вернемся к вкладке Shortcode вверху экрана:

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

Обычно мы не используем тикеры новостей для содержания сообщения. Было бы лучше, если бы вы разместили тикеры новостей в верхнем, нижнем колонтитуле или боковой панели. Я могу привести пример ленты новостей на боковой панели. Сначала я выбираю случайную страницу, перехожу в « Предварительный просмотр» > « Настроить» > « Виджет» .

Затем перейдите на боковую панель > Добавить виджет . Вы увидите множество опций для дополнительных боковых панелей, таких как «Аудио», «Календарь»,… Выберите « Текст», затем вы увидите небольшое поле, в котором можно добавить имя боковой панели и вставить свой шорткод:

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

Лента новостей выглядит не так красиво, поэтому я немного стилизовал ее с помощью CSS. Перейдите в раздел "Настроить" > " Дополнительные CSS" .

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

Я использую тему памяти с основной палитрой синего и белого. Поэтому я добавил этот CSS, чтобы лента новостей была синего цвета:

 .mtphr-dnt-tick-contents a {
	color: var (- основной цвет);
}

.mtphr-dnt-tick-contents a: hover {
	цвет: # 000;
}

Нажмите « Опубликовать» и посмотрите, что у нас получилось:

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

Последние слова

Итак, это все о добавлении ленты новостей на ваш сайт WordPress с помощью плагина Ditty News Ticker . Мы постарались сделать его кратким и понятным, поэтому надеемся, что этот пост будет полезен для вас.

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