Typed Js в WordPress: эффект печатающегося текста

Введение

Контент — король, а оформление — королева. В современном веб-дизайне короткая анимация текста помогает моментально привлечь внимание посетителя. Плагин Typed Js позволяет легко добавить на сайт эффект машинописного текста — строки по очереди печатаются, удаляются и повторяются по заданным правилам.

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

Установка и первоначальная настройка

1. Войдите в админ-панель WordPress.
2. Перейдите в «Плагины → Добавить новый».
3. В поле поиска введите “Typed Js”.
4. Установите и активируйте плагин.

После активации в меню появится пункт Typed. Откройте «Typed → Add New», чтобы создать новый элемент с анимацией.

Important: Обратите внимание на «Generated Shortcode». Это строка в квадратных скобках. Скопируйте шорткод целиком, включая скобки — именно его вы вставите в контент.

Создание элемента Typed: поля и параметры

• Название эффекта: служит только для админки.
• Strings — список строк/фраз/предложений в том порядке, в котором вы хотите их показывать.
  • Кнопка «+» добавляет строку, «-» удаляет.

Параметры времени и поведения:

• Typing Speed — скорость печати (миллисекунды на символ).
• Start Delay — задержка перед первой печатью (в мс).
• Back Speed — скорость удаления текста (в мс).
• Back Delay — пауза перед удалением (в мс).
• Loop — зациклить воспроизведение.
• Show Cursor — показывать курсор.
• Cursor Char — символ курсора (например, | или _).

Все числа измеряются в миллисекундах и задают точный ритм анимации.

Дисплей: вы можете настроить шрифт, размер и цвет текста прямо в настройках плагина (если тема или конструктор не переопределяют стиль).

Когда всё готово — нажмите «Publish» или «Update».

Как вставить эффект на страницу

Typed Js работает через шорткод. Скопируйте сгенерированную строку и вставьте её в контент там, где хотите увидеть анимацию.

Пример шорткода:

[typed_mte id="123"]

Если вы используете конструктор страниц (SiteOrigin, Elementor, Gutenberg и т.п.), вставьте шорткод в текстовый/HTML-виджет или в блок «Shortcode».

Пример с SiteOrigin Page Builder:

1. Страницы → Добавить новую.
2. Переключитесь на вкладку «Page Builder».
3. Добавьте строку, затем виджет «SiteOrigin Hero» или текстовый виджет.
4. Вставьте шорткод в содержимое виджета и сохраните.

Отредактируйте содержимое виджета, вставьте шорткод:

При необходимости добавьте кнопку с переходом на страницу контактов или другой CTA.

Готовый результат выглядит как плавно печатающийся и заменяющийся текст в шапке страницы или в блоке контента.

Когда эффект не подходит или даёт проблемы

• В темах с жёстким CSS-а и JS-а плагин может конфликтовать: проверьте консоль браузера.
• Если сайт критичен к доступности, имейте в виду: анимация текста может мешать экранным читалкам. Добавьте альтернативный статичный текст или aria-атрибуты.
• Не используйте эффект в заголовках, которые индексируют поисковые системы или автогенерируются — это часто ломает форматирование и SEO.
• При большом количестве строк с длинными фразами анимация может стать слишком длительной и раздражающей.

Notes: Всегда тестируйте на мобильных устройствах и при отключённом JS — проверьте, доступен ли смысл сообщения.

Рекомендации по производительности и SEO

• Старайтесь не добавлять более 6–8 строк длинного текста подряд.
• Делайте паузы (Back Delay) удобочитаемыми — 800–1500 мс обычно достаточны.
• Для критичных по скорости страниц предпочтительнее встроить минимальную версию скрипта или использовать lazy-load, если плагин позволяет.
• Для SEO: оборачивайте шорткод в семантический элемент (h2/h3/p) по смыслу, но не помещайте шорткод в заголовок H1.

Альтернативные подходы

• Использовать библиотеку Typed.js напрямую через кастомный скрипт, если нужен тонкий контроль.
• Плагины-аналогии: поискать другие анимационные плагины в репозитории (Typewriter, Animated Text).
• CSS-анимации (keyframes) для простых случаев без JS.

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

Быстрый чек-лист перед публикацией

• Скопировали и вставили корректный шорткод.
• Протестировали на мобильных и десктопе.
• Проверили работу при отключённом JavaScript (есть альтернативный текст).
• Убедились, что курсор и скорость не мешают восприятию.
• Проверили консоль DevTools на ошибки.

Мини-методология: как подобрать настройки за 5 шагов

1. Составьте 3–6 коротких строк (6–12 слов максимум).
2. Установите Typing Speed ≈ 50–120 мс/символ.
3. Start Delay 200–500 мс, Back Delay 800–1500 мс.
4. Включите Loop, если хотите бесконечную демонстрацию; иначе — оставьте выключенным.
5. Тестируйте с реальными посетителями или коллегами и скорректируйте.

Ролевые чек-листы

• Дизайнер: проверяет читаемость, контраст и соответствие бренду.
• Маркетолог: проверяет сообщения CTA и порядок строк.
• Разработчик: тестирует кроссбраузерность и отсутствие ошибок в консоли.
• Контент-редактор: проверяет орфографию и длину фраз.

Критерии приёмки

• Текст отображается корректно во всех целевых браузерах.
• Шорткод вставлен без лишних символов и работает.
• Нет критических JS-ошибок в консоли.
• Альтернативный текст или статичная версия доступны при отключённом JS.

Глоссарий (1 строка)

Typed Js — плагин WordPress, который использует библиотеку для создания эффекта печатающегося текста и управляется через шорткод.

Заключение

Typed Js — удобный инструмент для быстрой добавки динамики в дизайн сайта без программирования. Он отлично подходит для лендингов и секций «герой», но требует тестирования на доступность и производительность. Если нужен полный контроль — рассмотрите прямое подключение библиотеки Typed.js или реализацию через CSS для лёгких эффектов.

Короткое резюме: создайте 3–6 коротких фраз, настройте скорость и задержки, вставьте шорткод в нужный блок и проверьте результат на разных устройствах.

Понравился эффект? Напишите в комментариях, где вы бы использовали Typed Js на своём сайте.