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

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

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

Пустые теги — это, например, <p></p> или <div></div>, которые не содержат контента. Пустые атрибуты — это, например, class="" или style="". Они увеличивают размер HTML, создают лишний код и могут вызвать проблемы с отображением или стилизацией.

В WordPress такая разметка часто появляется из-за особенностей редактора Gutenberg или плагинов, добавляющих свои стили и структуру. Ручное удаление становится утомительным, поэтому оптимально автоматизировать процесс.

Как найти пустые теги и атрибуты в WordPress

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

• Просмотр исходного кода страницы через браузер и поиск шаблонов <tag></tag> без содержимого.
• Использование браузерных расширений для анализа HTML и выявления неиспользуемых элементов.
• Сканирование HTML с помощью PHP-скриптов на сервере для автоматического выявления пустых элементов.

Для автоматизации именно последний способ подходит лучше всего, особенно если необходимо массово очистить контент.

Удаление пустых тегов и атрибутов с помощью функций WordPress

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

Пример функции wparticles_remove_empty_tags:

function wparticles_remove_empty_tags($content) {
    // Удаляем пустые теги, например <p></p>, <div></div> и т.д.
    $content = preg_replace('/<(\w+)([^>]*)>\s*<\/\1>/i', '', $content);
    
    // Удаляем пустые атрибуты class="", style="", id="" и др.
    $content = preg_replace('/\s+(class|style|id|title|alt)=""/i', '', $content);
    
    return $content;
}
add_filter('the_content', 'wparticles_remove_empty_tags');

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

Улучшение функции с использованием DOMDocument

Регулярные выражения не всегда надежны при работе с HTML. Для более точной очистки можно использовать класс DOMDocument:

function wparticles_clean_html($content) {
    libxml_use_internal_errors(true);
    $dom = new DOMDocument();
    $dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));
    
    $xpath = new DOMXPath($dom);
    // Удаляем пустые теги
    foreach ($xpath->query('//*[not(node()) and not(@src) and not(@href) and not(self::br)]') as $node) {
        $node->parentNode->removeChild($node);
    }
    
    // Удаляем пустые атрибуты
    foreach ($xpath->query('//@*') as $attr) {
        if (trim($attr->value) === '') {
            $attr->ownerElement->removeAttributeNode($attr);
        }
    }
    
    return $dom->saveHTML();
}
add_filter('the_content', 'wparticles_clean_html');

Этот метод более надежен и учитывает особенности HTML, не удаляя важные пустые теги, например, <br>.

Плагины для очистки HTML в WordPress

Если вы предпочитаете готовые решения, рассмотрите следующие плагины:

• Clearfy Pro — плагин для оптимизации WordPress, который умеет очищать HTML от лишних тегов и атрибутов. Поддерживает тонкую настройку и интеграцию с другими оптимизаторами. Подробнее на wpshop.ru.
• WP Rocket — хотя это кеширующий плагин, в нем есть возможность минимизации HTML, которая включает удаление пустых тегов.
• Autoptimize — также умеет минимизировать и очищать HTML-код, упрощая структуру.

Использование этих плагинов позволяет не писать свой код и быстро улучшать структуру страниц.

Особенности и подводные камни удаления пустых тегов и атрибутов

Перед тем, как применять автоматическую очистку, важно учитывать:

• Некоторые пустые теги используются для верстки (например, пустые <span> с CSS-стилями), их удаление может испортить дизайн.
• Удаление атрибутов, даже пустых, может влиять на работу JavaScript или плагинов, если они ожидают их наличие.
• Лучше тестировать изменения на тестовом сайте, чтобы не нарушить функциональность.

При необходимости можно расширить функцию, чтобы исключить из очистки определённые теги или атрибуты.

Пример исключения тегов из очистки

function wparticles_remove_empty_tags_except($content) {
    $allowed_tags = ['span', 'i', 'b'];
    libxml_use_internal_errors(true);
    $dom = new DOMDocument();
    $dom->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));
    $xpath = new DOMXPath($dom);
    foreach ($xpath->query('//*[not(node()) and not(@src) and not(@href) and not(self::br)]') as $node) {
        if (!in_array($node->nodeName, $allowed_tags)) {
            $node->parentNode->removeChild($node);
        }
    }
    return $dom->saveHTML();
}
add_filter('the_content', 'wparticles_remove_empty_tags_except');

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

Заключение

Удаление пустых тегов и атрибутов из HTML в WordPress — важный шаг для оптимизации сайта. Вы можете использовать простой код на регулярных выражениях для базовой очистки или более мощный подход с DOMDocument для точного контроля. Также рекомендуем обратить внимание на специализированные плагины, например, Clearfy Pro, которые автоматизируют процесс и дополняют возможности оптимизации.