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

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

Почему появляются пустые теги HTML в WordPress

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

• Редактор Gutenberg и классический визуальный редактор иногда добавляют лишние параграфы и дивы при форматировании текста.
• Импорт контента из внешних источников, где HTML был неочищен или содержит лишние обёртки.
• Плагины и темы, которые автоматически оборачивают элементы в теги, но иногда не заполняют их содержимым.

Если пустые теги не удалять, они:

• Увеличивают размер HTML-документа, замедляя загрузку.
• Могут влиять на стили и расположение элементов.
• Создают избыточность кода, что плохо сказывается на SEO.

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

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

function wpwp_remove_empty_tags($content) {
    // Удаляем пустые параграфы
    $content = preg_replace('/<p>\s*( |\s)*<\/p>/i', '', $content);
    // Удаляем пустые div
    $content = preg_replace('/<div>\s*( |\s)*<\/div>/i', '', $content);
    // Удаляем пустые span
    $content = preg_replace('/<span>\s*( |\s)*<\/span>/i', '', $content);
    return $content;
}
add_filter('the_content', 'wpwp_remove_empty_tags');

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

Важно: такой подход работает с основным контентом записи, но не удаляет пустые теги в виджетах, меню или других частях темы.

Удаление пустых тегов на уровне вывода HTML (output buffering)

Для более универсального удаления можно использовать буферизацию вывода и фильтрацию всего HTML-кода страницы перед отправкой пользователю.

function wpwp_filter_empty_html_tags($buffer) {
    // Регулярка для удаления пустых тегов p, div, span
    $pattern = '/<(p|div|span)[^>]*>\s*( |\s)*<\/\1>/i';
    do {
        $buffer = preg_replace($pattern, '', $buffer, -1, $count);
    } while ($count > 0);
    return $buffer;
}

function wpwp_start_buffer() {
    ob_start('wpwp_filter_empty_html_tags');
}

function wpwp_end_buffer() {
    ob_end_flush();
}

add_action('template_redirect', 'wpwp_start_buffer');
add_action('shutdown', 'wpwp_end_buffer');

Этот код запускает буферизацию, применяет фильтр к всему HTML и удаляет пустые теги. Метод универсален, но требует тестирования на совместимость с плагинами и темой.

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

Если вы не хотите писать код, есть готовые решения:

• Clearfy – многофункциональный плагин оптимизации, который включает очистку лишних тегов и улучшение HTML-разметки.
• WPRemark – плагин для управления отзывами, в котором есть опции по очистке HTML, полезные и для других типов контента.

Для установки плагина просто перейдите в админку WordPress → Плагины → Добавить новый, найдите нужный и активируйте.

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

Чтобы минимизировать появление пустых тегов:

• Используйте блоки Gutenberg аккуратно, избегая лишних пустых параграфов.
• При импорте контента очищайте HTML с помощью специализированных инструментов.
• Проверяйте работу плагинов и тем, которые могут автоматически форматировать содержимое.
• Используйте кастомные фильтры в функциях темы для контроля вывода.

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

Пример расширенного фильтра с логированием

Для отладки можно добавить вывод количества удалённых тегов в лог:

function wpwp_remove_empty_tags_with_log($content) {
    $patterns = [
        '/<p>\s*( |\s)*<\/p>/i',
        '/<div>\s*( |\s)*<\/div>/i',
        '/<span>\s*( |\s)*<\/span>/i'
    ];
    foreach ($patterns as $pattern) {
        preg_match_all($pattern, $content, $matches);
        $count = count($matches[0]);
        if ($count > 0) {
            error_log("[wpwp_remove_empty_tags] Удалено пустых тегов: $count");
        }
        $content = preg_replace($pattern, '', $content);
    }
    return $content;
}
add_filter('the_content', 'wpwp_remove_empty_tags_with_log');

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