Сен

Плагіни для створення стрічки новин з біжучим рядком в WordPress

Елемент біжучої стрічки новин можна часто зустріни на новинних сайтах, які передають важливу інформації внизу сторінки безупинно в режимі реального часу. Або його можна побачити на великих економічних порталах/сервісах, де в біжучий рядок транслюються курси валют або котирування акцій на біржах. Сьогодні покажу декілька плагінів які дозволяють реалізувати цю функцію.

В іншому блозі я вже публікував пост як зробити стрічку новин через CSS без JavaScript де був приклад зі створенням спеціального шорткоду для WordPress. Там я використав відображення списку останніх постів через WP_Query та механізм створення шорткодів в WordPress + безпосередньо HTML/CSS код для біжучого рядка. Якщо вас цікавить реалізація задачі без плагінів – можете перейти на ту статтю.

Перед тим як починати вибирати конкретний плагін/рішення вам потрібно дати відповідь на декілька питань стосовно того, яка взагалі потрібна функціональність:

Де має виводитись блок в вашому дизайні: шапка / футер (тобто в шаблоні) або через код в сайдбарі?
Чи має бути функція «липкої» строки коли вона рухається разом с прокруткою?
Який потрібен стиль відображення контенту: текстовий біжучий рядком, слайдшоу, fade ефект і т.п.
Який саме контент має виводитись: останні пости блогу? пости по категоріям? нові кастомні записи?

Все це так чи інакше буде впливати на вибір модуля.

Плагіни для біжучого рядка в WordPress

Для початку невеликий дисклеймер: деякі з цих модулів після встановлення я вивчав плюс-мінус «поверхнево», тому що мені було потрібно зрозуміти чи підходять вони мені взагалі чи ні. Далі пишу тільки про свій досвід роботи з ними і деякі нюанси я міг не помітити.

Ditty

Почну з плагіна Ditty, який виконав все, що від нього було потрібно – і циклічне відображення новин без «білих пустих рядків», і налаштування через адмінку, і т.п. У нього реально багато різних параметрів:

спочатку ви вибираєте тип відображення, де можна вказати «біжучий рядок»;
далі визначаєте які саме елементи поста виводити: заголовок, лінк, зображення, дату, автора, анонс і т.п.;
після цього є можливість налаштувати стилі відображення усіх елементів включно зі шрифтами та відступами.

В цілому, не дивлячись на те, що в коментах пишуть буцімто в безкоштовній версії мало можливостей, це не так. Навпаки, мені здалося, що тут їх навіть забагато, тому модуль виглядає «занадто громіздким». Звісно новачкам з ним буде простіше працювати, але велика кількість функцій збільшує навантаження на адмінку/сайт. І, не дивлячись на те, ще тут доступна опція «Ajax завантаження» стрічки новин, після активації плагіна адмінка сайту у мене почала завантажуватися значно повільніше. Після вимкнення — все повернулось до норми. Отже до навантажень на сайт є питання.

PJ News Ticker

PJ News Ticker — досить простий плагін, але зі своєю задачею справляється на всі 100%. Налаштувань вистачає і (що головне) всі вони коректно працюють. Бігучий рядок вставляється на сайт через шорткод + є можливість використовувати параметри і перезаписувати загальні налаштування плагіну, вказані в адмінці. Для розробників і для можливості відображення декількох блоків новин це, безумовно, плюс.

Стосовно мінусів. По перше, тут є один глобальний недолік для подібного роду скриптів — новини не виводяться «циклічно» в рядку, і після останньої відображається пусте місце аж поки вона «не дійде» до початку блоку і не почне відображатись з нуля.

Другий мінус, про який кажуть в відгуках на офіційному репозиторії – можливі проблеми з адаптивністю. У мене персонально такого не було, але в іншому сайті після додавання шорткоду в шаблон, скрипт не захотів відображатись взагалі. Тому перевіряйте ці моменти у себе після встановлення модуля.

T4B News Ticker

T4B News Ticker — більш-менш нормально працює, як і попереднє рішення. При цьому плагін новіший + має більше завантажень. Але знов ж таки виводиться пусте місце в кінці рядка з новинами, коли починая відображатись останній запис. Тут треба розбиратись або з JavaScript, або правити CSS код. Також до корисних функцій можна додати можливість виводити кастомний (користувацький) текст замість постів блогу.

В дописах розділу Підтримки на офф.сайті Вордпресс була інфа (рік тому) про повільну загрузку і якісь косяки на мобільних (начебто на це жалівся Google). Розробники відписались, що це все виправили в нових версіях, але я особисто не тестував реакцію Гугла на модуль.

TopNewsWp

В TopNewsWp треба створювати новини окремо, і вони не беруться з WP-постів. Саме тому даний плагін особливо детально я не вивчав. Хоча в репозиторії він має все позитивні відгуки (7шт.). Завантажень малувато, але після встановлення ви отримуєте реально багато налаштувань в адмінці. Раджу глянути це рішення, особливо якщо вам потрібно створювати записи окремо, а не автоматично виводити записи блогу.

Post Ticker Ultimate

Post Ticker Ultimate — прикольний дизайн стрічки новин, де ви можете використати різні ефекти відображення/зміни тексту. Але тут є великі питання до доступної функціональності в безкоштовній версії — як мінімум дивно робити адаптивність преміальною опцією.

Висновок. В цілому для своєї задачі я йшов досить довгим шляхом. З самого початку після тестування я зупинився на модулі PJ News Ticker. Але через глюк з пустим місцем в кінці бігучого рядка почав вивчати інші варіанти. Спробував T4B News Ticker — і він мені ще більше сподобався ніш перший плагін, але там знов та сама проблема.

Далі поставив Ditty і, о чудо, купа налаштувань + коректна робота, що відповідала всім моїм запитам. Але при переносі цього рішення на сайт клієнта я помітив, що дійсно адмінка почала дуже довго завантажуватися. На тестовому сайті цієї проблеми не було. Оскільки я не мав додаткового часу проводити детальне тестування, то просто зробив стрічку новин через CSS без JavaScript з виводом в шорткод.

Якщо вам вдастся розібратись з «пустим місцем» в кінці біжучого рядка через CSS, то цілком можна ставити рішення T4B News Ticker або PJ News Ticker.