В профессиональной веб-разработке и верстке сайтов грамотная типографика играет ключевую роль. Одна из самых частых проблем, портящих внешний вид текстовых блоков — это «висячие» предлоги и союзы. Когда короткие слова (в, на, под, из, к и т.д.) остаются на концах строк и отрываются от связанных с ними слов, текст становится визуально «рваным» и хуже читается.
Браузер переносит текст в местах обычных пробелов. Чтобы заставить предлог «прилипнуть» к следующему слову, необходимо использовать неразрывный пробел (HTML-сущность ). На многостраничных проектах делать это вручную нецелесообразно, а установка тяжелых плагинов-типографов (например, WP Typograph) может создавать лишнюю нагрузку на сервер и замедлять загрузку страницы, что негативно сказывается на SEO-показателях и Core Web Vitals.
Оптимальное решение для современных сайтов на WordPress — использование легкого кастомного JavaScript-кода, который автоматически отформатирует текст на стороне клиента.
Как работает скрипт автоматической замены
Представленный ниже код запускается сразу после полной загрузки DOM-дерева страницы. Он сканирует заданные текстовые элементы (заголовки всех уровней, абзацы, списки), находит отдельно стоящие кириллические предлоги и заменяет следующий за ними обычный пробел на неразрывный. Скрипт безопасен для разметки, так как не нарушает структуру HTML-тегов.
JS-код для исправления висячих предлогов
Скопируйте следующий фрагмент кода:
HTML
<script>
document.addEventListener("DOMContentLoaded", function() {
// 1. Выбираем все текстовые теги, включая специфические классы Elementor для заголовков
var elements = document.querySelectorAll("p, h1, h2, h3, h4, h5, h6, li, .elementor-heading-title");
// 2. Регулярное выражение: ищет начало строки, пробел или закрывающий тег перед предлогом
var shortWordsRegex = /(^|\s|>)(в|во|с|со|к|ко|о|об|обо|на|над|за|по|из|от|до|для|без|у|при|под|про|через|и|а|но|да|или)\s+/gi;
// 3. Запускаем цикл замены
elements.forEach(function(el) {
if (el.innerHTML) {
// $1 — сохраняет предшествующий символ (пробел или тег)
// $2 — сохраняет сам предлог, после чего добавляется неразрывный пробел
el.innerHTML = el.innerHTML.replace(shortWordsRegex, '$1$2 ');
}
});
});
</script>
Инструкция по внедрению кода в Elementor
Чтобы скрипт работал безошибочно и форматировал уже отрендеренный текст, его необходимо разместить в самом конце HTML-документа. В экосистеме Elementor это делается встроенными инструментами без редактирования файлов темы:
- Авторизуйтесь в панели администратора WordPress.
- В боковом меню перейдите в Elementor ➔ Пользовательский код (Custom Code).
- Нажмите кнопку «Добавить новый».
- В поле расположения (Location) обязательно выберите
<body> - Конец (End). Это критически важно для производительности. - Вставьте скопированный код в текстовое поле.
- Нажмите «Опубликовать» и в открывшемся окне условий (Conditions) выберите «Весь сайт» (Entire Site).
Важное примечание для разработчиков: Скрипт не отрабатывает внутри самого визуального редактора Elementor. Это сделано намеренно, чтобы не засорять поля ввода спецсимволами при редактировании макетов. Типографика преобразится сразу после сохранения страницы и её просмотра на фронтенде (со стороны пользователя).
ЕСЛИ ВАМ НУЖЕН САЙТ, ТО...
Я могу его сделать для вас. Меня зовут Илья - являюсь автором блога, занимаюсь разработкой сайтов на Wordpress более 10-ти лет. Специализируюсь на форматах: блог, лендинг, сайт-визитка, корпоративный сайт.
В портфолио найдете мои работы, а детали по разработке читайте по ссылке.
Читайте также:
Инструкция как получить Elementor Pro бесплатно и легально
Добавляйтесь в мой телеграм. Там больше советов про сайты, заработок, фриланс. И можем лично пообщаться.
