Как удалить пустые HTML-теги в WordPress

Пустые HTML-теги, такие как <p></p>, <div></div> или <span></span>, часто появляются в контенте WordPress по разным причинам: при копировании текста из внешних источников, работе визуального редактора Gutenberg или из-за особенностей тем и плагинов. Они не несут информации, увеличивают объем HTML-кода, замедляют загрузку страницы и могут негативно повлиять на SEO. В этой статье разберёмся, как эффективно находить и удалять пустые HTML-теги в WordPress с помощью готовых плагинов и собственных функций.

Почему важно удалять пустые HTML-теги в WordPress

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

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

Где появляются пустые HTML-теги в WordPress?

Основные причины появления пустых тегов:

• Вставка контента из Word или других редакторов с лишними тегами.
• Автоматические фильтры визуального редактора Gutenberg или классического редактора, которые добавляют дополнительные <p> и <br>.
• Некорректная работа некоторых плагинов, которые модифицируют содержимое поста.
• Особенности тем, которые выводят контейнеры без содержимого.

Чтобы устранить эту проблему, можно использовать как готовые инструменты, так и написать собственные функции для фильтрации вывода.

Использование плагинов для удаления пустых HTML-тегов

Существует несколько плагинов, которые помогают очистить контент от пустых тегов и избыточных переносов строк:

• Remove Empty Tags: плагин, который автоматически удаляет пустые <p>, <div> и <span> из контента. Имеет минимальные настройки, работает по умолчанию при выводе.
• WP Optimize: комплексный плагин для оптимизации базы и файлов, включает функцию очистки HTML, в том числе пустых тегов.
• Clearfy Pro: если у вас есть этот плагин из каталога wpshop.ru, то в нём есть расширенные настройки по оптимизации вывода, включая удаление пустых тегов и лишних атрибутов. Подробнее — Clearfy Pro на WPSHOP.

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

Как написать собственную функцию для удаления пустых тегов в WordPress

Для удаления пустых тегов можно использовать фильтр the_content, который обрабатывает содержимое поста перед выводом. Ниже пример простой функции, которая удаляет пустые <p> и <div>:

function wpid_remove_empty_html_tags($content) {
    // Удаляем пустые теги <p> и <div>
    $pattern = '/<(p|div)([^>]*)>\s*<\/\1>/i';
    $content = preg_replace($pattern, '', $content);
    return $content;
}
add_filter('the_content', 'wpid_remove_empty_html_tags');

Эта функция ищет теги <p> и <div>, которые не содержат никакого текста или других элементов, и удаляет их. Можно расширить регулярное выражение для других тегов.

Удаление пустых <span> и других тегов

Если нужно удалить пустые <span> или другие теги, измените шаблон так:

function wpid_remove_all_empty_tags($content) {
    $pattern = '/<(p|div|span|section|article)([^>]*)>\s*<\/\1>/i';
    while (preg_match($pattern, $content)) {
        $content = preg_replace($pattern, '', $content);
    }
    return $content;
}
add_filter('the_content', 'wpid_remove_all_empty_tags');

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

Удаление пустых тегов из виджетов и других областей

Если пустые теги появляются не только в контенте постов, а, например, в виджетах или в пользовательских полях, фильтр the_content не сработает. Для таких случаев можно применить фильтры widget_text или фильтровать вывод на уровне темы.

Пример для текстового виджета:

function wpid_widget_remove_empty_tags($widget_content) {
    $pattern = '/<(p|div|span)([^>]*)>\s*<\/\1>/i';
    $widget_content = preg_replace($pattern, '', $widget_content);
    return $widget_content;
}
add_filter('widget_text', 'wpid_widget_remove_empty_tags');

Такой подход помогает поддерживать чистоту кода во всех пользовательских областях сайта.

Как проверить, что пустые теги действительно удалились

После внедрения функций или активации плагинов важно проверить результат на фронтенде. Для этого:

1. Откройте страницу с постом, где раньше были пустые теги.
2. Используйте инструменты разработчика в браузере (обычно F12) и перейдите на вкладку Elements (Элементы).
3. Поиск по тегам <p></p>, <div></div> без содержимого должен не находить пустых элементов.
4. Проверьте визуально, что контент отображается корректно, без сбоев.

Если все верно, значит оптимизация выполнена успешно.

Советы по предотвращению появления пустых тегов в будущем

Чтобы минимизировать появление пустых тегов, придерживайтесь следующих рекомендаций:

• При копировании текста из Word и других редакторов используйте функцию вставки без форматирования.
• Регулярно проверяйте и чистите контент с помощью плагинов оптимизации, например, Clearfy Pro (ссылка на WPSHOP).
• Если используете кастомные поля или редакторы, добавляйте фильтры очистки при сохранении.
• Обновляйте темы и плагины, чтобы избежать багов, приводящих к появлению лишних тегов.