Задача: показать короткие сообщения, акции или свежие заголовки, которые плавно прокручиваются без просадок FPS и ошибок доступности. В WordPress это решается тремя подходами: готовым плагином (например, Ditty или Ticker Ultimate), собственным блоком/шорткодом с CSS keyframes, либо JavaScript-инициализацией через wp_enqueue_script. Тег <marquee> не используем: он устарел и ломает поведение на мобильных и скринридерах.
Если требуется лёгкая вёрстка без зависимостей, используйте CSS-анимацию: контейнер фиксированной высоты с маской переполнения, одна строка в одну линию (white-space: nowrap), анимация transform: translateX с равномерным таймингом. Для UX включайте паузу на фокус/ховер (animation-play-state), а для доступности – скрытый дублирующий текст без анимации внутри aria-hidden и «живую» область для читателей экрана. Такой вариант не создаёт лишних перерисовок и работает на чистом CSS.
Дальше в статье будут два маршрута: настройка через конкретный плагин с точными шагами и создание собственного решения с блоком/шорткодом, стилями, скриптом и примерами внедрения в тему или плагин сайта.
Установка и базовая настройка плагина тикера новостей
Чтобы добавить бегущую строку, откройте панель администратора WordPress и перейдите в раздел Плагины → Добавить новый. В строке поиска введите название выбранного тикера, например News Ticker или Live News. После установки нажмите Активировать, чтобы плагин стал доступен в настройках сайта.
В настройках обычно доступны параметры скорости движения, направления прокрутки и задержки между циклами. Рекомендуется выставить скорость так, чтобы текст был легко читаем на всех устройствах. Для русскоязычных сайтов важно включить корректное кодирование, чтобы символы отображались без ошибок.
После сохранения настроек скопируйте предоставленный шорткод и вставьте его в запись, страницу или виджет. Таким образом бегущая строка начнет отображаться в нужном месте сайта без дополнительной доработки кода.
Добавление бегущей строки в редакторе Gutenberg: блок и шорткод
Варианта два: готовый блок плагина и вставка шорткода. Ниже – пошаговые действия и рабочие параметры.
- Через блок
- Откройте запись или страницу в Gutenberg.
- Нажмите «+» и найдите блок «Ticker» или «Бегущая строка» (обычно ставится вместе с плагином новостного тикера).
- Вставьте блок в нужное место.
- Выберите источник данных:
- «Ручной список» – добавляйте элементы вручную: заголовок, ссылка, иконка-метка (если поддерживается).
- «Записи» – выберите рубрики/метки, ограничение по количеству (например, 5–10), порядок (по дате по убыванию), обрезку заголовка (например, 70–90 символов).
- Настройте поведение:
- Скорость: 40–80 px/s для чтения без рывков.
- Направление: left/right.
- Пауза при наведении: включите для удобства.
- Интервал между элементами (gap): 24–48 px.
- Дублирование ленты: 2–3 копии подряд для бесшовного цикла.
- Открытие ссылок: в новой вкладке при внешних переходах.
- Адаптив: отдельная скорость для мобильных, отключение на узких экранах при необходимости.
- Проверьте предпросмотр: без заеданий, элементы читаются, фокус по Tab попадает на ссылки.
- Готовые пресеты
- Короткие заголовки: скорость 60–80 px/s, gap 24 px.
- Длинные заголовки: скорость 40–55 px/s, обрезка 80–100 символов + «…».
- RTL-сайты: направление right, проверьте порядок символов.
- Через шорткод
Большинство тикер-плагинов дают шорткод. Его можно вставить в «Короткий код» или «Параграф».
- Откройте нужную запись/страницу.
- Добавьте блок «Короткий код».
- Вставьте шорткод с параметрами.
Примеры:
[ticker text="Скидки до 30% на хостинг|Новый релиз темы 2.4|Гид по Gutenberg" speed="60" direction="left" pause="hover" gap="32" loop="infinite"]
[news_ticker source="posts" cat="akcii,novosti" count="7" order="DESC" trim="85" speed="50" pause="hover" gap="28" duplicate="2"]
- Ключевые параметры шорткода
text– элементы через вертикальную черту|для ручного ввода.source–postsилиmanual(зависит от плагина).cat/tag– фильтры записей через запятую.count– 5–10 для компактной ленты.trim– длина усечения заголовка, 70–100.speed– 40–80.direction–leftилиright.pause–hoverдля остановки при наведении.gap– 24–48.duplicate/loop– бесконечный цикл без рывков.
- Практика размещения
- Верх страницы: сразу после шапки – максимум видимости, но проверяйте, чтобы не перекрывалось меню.
- Внутри записи: перед блоком с контентом для анонсов и важных обновлений.
- Сайдбар: скорость ниже (40–55), чтобы не отвлекать.
- Проверки перед публикацией
- Клавиатура: Tab проходит по всем ссылкам в ленте.
- Пауза: наведение мышью и фокус по клавиатуре останавливают движение.
- Контраст: текст читается на фоне темы.
- Мобильные: нет горизонтальной прокрутки страницы, скорость снижена.
- Частые ошибки
- Слишком высокая скорость – текст «смазывается».
- Отсутствие дублирования – виден разрыв в конце ленты.
- Длинные элементы без разделителей – используйте усечение и gap.
- Ссылки без атрибутов – включайте открытие в новой вкладке для внешних ресурсов.
Если плагин поддерживает и блок, и шорткод, сохраняйте единые значения скорости и gap, чтобы лента выглядела одинаково на разных страницах.
Для создания бегущей строки с динамическим контентом в WordPress используется комбинация стандартных функций темы и шорткодов. Чтобы вывести последние записи, применяется функция WP_Query с указанием параметров: posts_per_page для количества постов и orderby для сортировки по дате. Результат цикла помещается внутрь контейнера, обрабатываемого скриптом бегущей строки.
Произвольные поля подключаются через get_post_meta(). Можно выбрать конкретное поле, например, ticker_text, и добавить его содержимое в HTML-контейнер бегущей строки. Для нескольких полей рекомендуется формировать массив и объединять значения с разделителями, обеспечивая корректное отображение текста в анимации.
Для удобного управления динамическим контентом стоит создавать отдельные шорткоды: один для последних записей, другой для рубрик и третий для произвольных полей. Это упрощает интеграцию бегущей строки на страницах и обеспечивает гибкость настройки без правки кода темы.
Размещение в шапке, подвале и сайдбаре через виджет и хуки
Для добавления бегущей строки в шапку, подвал или сайдбар оптимальным решением будет использование виджетов и хуков WordPress. Если тема поддерживает виджеты, создайте текстовый или HTML-виджет и поместите в нужную область: Header, Footer или Sidebar. В виджете вставьте код шорткода или HTML-структуру бегущей строки.
Использование хуков позволяет разместить бегущую строку без изменения шаблонных файлов и обеспечивает совместимость с обновлениями темы. Для кастомизации можно подключать CSS-анимацию и динамический контент через WP_Query, ACF или стандартные поля. Такой подход сохраняет производительность сайта и позволяет контролировать отображение на разных страницах через условные теги.
Параметры прокрутки: скорость, направление, задержка и пауза при наведении
Бегущая строка в WordPress может иметь различные настройки прокрутки, которые напрямую влияют на восприятие информации пользователями. Основные параметры включают скорость движения текста, направление, задержку и поведение при наведении курсора.
- Скорость прокрутки: измеряется в пикселях в секунду или как процент от ширины контейнера за единицу времени. Для новостных лент рекомендуется скорость 50–100 px/сек, чтобы текст оставался читаемым, но динамичным.
- Направление: чаще всего используется горизонтальная прокрутка слева направо или справа налево. При выборе направления учитывайте привычки аудитории: в большинстве языков текст легче воспринимается справа налево в бегущей строке.
- Задержка перед стартом: параметр позволяет задержать начало прокрутки на 0,5–2 секунды после загрузки страницы, что улучшает восприятие информации пользователем.
- Пауза при наведении: эта функция временно останавливает движение текста при наведении курсора, позволяя прочитать длинные заголовки или сообщения. В WordPress реализуется через JavaScript или настройки плагина тикера.
Для достижения оптимального эффекта рекомендуется тестировать комбинации скорости, направления и задержки на разных устройствах. Например, слишком высокая скорость на мобильных экранах снижает читаемость, а отсутствие паузы при наведении затрудняет изучение длинного текста.
В большинстве плагинов для бегущих строк WordPress эти параметры можно настраивать индивидуально для каждого блока, что позволяет создавать уникальные динамические элементы на сайте и повышать вовлеченность пользователей.
Стилизация через CSS: шрифты, отступы, высота строки, иконки и адаптивность
Для бегущей строки важно задать шрифт, который обеспечит читаемость на любых устройствах. Рекомендуется использовать системные шрифты, например Arial, Verdana, Helvetica, или подключать веб-шрифты через @font-face. Размер шрифта указывается в rem или em для корректной масштабируемости, обычно от 0.9 до 1.2rem для текста и до 1.5rem для заголовков.
Отступы между элементами бегущей строки регулируются через padding и margin. Для горизонтальных отступов используется padding-left и padding-right от 5 до 15px, чтобы текст не сливался с краями контейнера. Вертикальные отступы и высота строки управляются через line-height, оптимальное значение – 1.4–1.6, что улучшает читаемость и визуальную целостность.
Добавление иконок помогает выделить важные сообщения. Для этого применяются шрифтовые иконки, такие как Font Awesome, с размерами 0.8–1rem. Иконки размещаются перед текстом с помощью ::before и отступов через margin-right, чтобы не сливались с контентом.
Адаптивность обеспечивается медиа-запросами. Для экранов шириной до 768px уменьшаются шрифты до 0.8–1rem и сокращаются отступы. Для мобильных устройств рекомендуется уменьшать высоту строки и скрывать декоративные иконки при необходимости, чтобы бегущая строка оставалась компактной и читабельной.
Цвет текста и фон контейнера задаются через color и background-color. Для плавного восприятия рекомендуется контрастное сочетание: темный текст на светлом фоне или светлый текст на темном фоне. При использовании градиентов важно сохранить читаемость, избегая чрезмерной насыщенности.
Доступность и SEO: aria-live, скрытые заголовки и разметка ссылок
Для улучшения доступности бегущей строки используйте атрибут aria-live. Он уведомляет вспомогательные технологии о динамическом обновлении контента. Для непрерывной прокрутки оптимально значение aria-live="polite", чтобы экранные читалки оповещали пользователя без резкой прерывающей речи.
Скрытые заголовки помогают структурировать страницу для SEO и вспомогательных технологий. Их можно реализовать через тег h3 или h4 с классом, скрывающим визуальное отображение, например: class="screen-reader-text". Такие заголовки повышают релевантность контента в поисковых системах и обеспечивают логическую иерархию для пользователей с ограничениями зрения.
Разметка ссылок внутри бегущей строки должна быть семантически корректной. Используйте <a> с явным текстом ссылки, избегая «кликните здесь». Добавьте атрибут title для уточнения назначения ссылки. Если ссылка открывает внешнюю страницу, указывайте rel="noopener noreferrer" для безопасности и SEO.
Пример корректной структуры бегущей строки с доступностью и SEO:
<div class="ticker" aria-live="polite">
|
Регулярное обновление контента с корректным aria-live обеспечивает своевременное оповещение пользователей, скрытые заголовки структурируют поток для SEO, а правильная разметка ссылок улучшает индексирование страниц и удобство навигации.
Вопрос-ответ:
Как добавить бегущую строку в WordPress без плагинов?
Вы можете использовать стандартный блок «HTML» в редакторе Gutenberg. Внутри блока добавьте тег <marquee> с текстом или ссылками, которые хотите прокручивать. Для большей гибкости используйте CSS-анимацию: создайте контейнер с фиксированной шириной и добавьте анимацию с помощью свойства @keyframes, чтобы текст плавно перемещался слева направо или справа налево.
Можно ли выводить динамический контент в бегущей строке?
Да. Для этого используйте виджеты или шорткоды, которые обращаются к последним записям, рубрикам или произвольным полям. Например, шорткод может получать последние новости и автоматически формировать список ссылок. В редакторе Gutenberg такой шорткод можно вставить через блок «Шорткод» или подключить его в PHP-шаблоне темы.
Как контролировать скорость и направление движения текста?
Если используется тег <marquee>, параметры scrollamount и direction позволяют регулировать скорость и направление прокрутки. При использовании CSS-анимации скорость задаётся длительностью анимации (animation-duration), а направление — начальной и конечной позицией текста в контейнере. Также можно добавить паузу при наведении с помощью :hover и animation-play-state.
Какие методы улучшения доступности бегущей строки существуют?
Для улучшения доступности используйте атрибут aria-live="polite" или aria-live="assertive", чтобы экранные читалки уведомляли о смене текста. Скройте заголовки с помощью class="screen-reader-text", чтобы сохранялась структура страницы. Также важно использовать семантические ссылки внутри бегущей строки и проверять контраст текста и фона для комфортного чтения.
Как вставить бегущую строку в шапку или подвал сайта?
Вы можете использовать виджеты с поддержкой текста или HTML. Для шапки и подвала также подходят хуки темы: добавьте код PHP, который выводит HTML-блок бегущей строки в нужное место. В некоторых темах есть специальные области для пользовательского HTML, куда можно вставить шорткод или HTML-код с анимацией.
Можно ли создать бегущую строку в WordPress без установки плагинов?
Да, можно. Для этого используют встроенные возможности темы или редактора Gutenberg. В Gutenberg добавляют блок HTML и вставляют код с тегом `
Как подключить к бегущей строке динамический контент из записей WordPress?
Для вывода динамических данных используют короткие циклы WordPress или шорткоды. Например, можно создать шорткод, который извлекает последние публикации определенной рубрики и формирует список ссылок, а затем помещает его внутрь блока бегущей строки. Это позволяет автоматически обновлять содержимое без ручного редактирования текста и обеспечивает актуальность информации на сайте. Также важно учитывать разметку для ссылок и заголовков, чтобы сохранить правильное отображение и доступность для посетителей.
