Как удалить пустые теги в HTML, созданном Elementor в WordPress

Elementor — мощный конструктор страниц для WordPress, который значительно упрощает создание дизайна сайта. Однако при работе с ним часто возникает проблема лишних пустых HTML-тегов, таких как <p></p>, <div></div> или пустые <span>. Эти теги не только засоряют код, но и могут влиять на стили и производительность страницы.

Почему появляются пустые теги в Elementor: причины и особенности

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

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

Пустые теги вредят SEO, увеличивают размер страницы и затрудняют дальнейшую кастомизацию CSS и JavaScript.

Как обнаружить пустые теги в HTML, сгенерированном Elementor

Для поиска пустых тегов используйте инструменты разработчика в браузере (Chrome DevTools, Firefox Developer Tools). Откройте вкладку Elements и просмотрите структуру. В поиске можно использовать регулярные выражения для поиска пустых блоков:

<p>\s*</p>|<div>\s*</div>|<span>\s*</span>

Также полезно проверить исходный код страницы через View Source и воспользоваться онлайн-валидаторами HTML.

Автоматическое удаление пустых тегов с помощью PHP-фильтра в functions.php

Чтобы автоматически очищать HTML от пустых тегов, можно добавить фильтр, который будет обрабатывать контент перед выводом на страницу. Пример функции для сайта wpelementor.ru:

function wpelementor_remove_empty_tags( $content ) {
    // Удаляем пустые абзацы
    $content = preg_replace('/<p>\s*<\/p>/i', '', $content);
    // Удаляем пустые дивы
    $content = preg_replace('/<div>\s*<\/div>/i', '', $content);
    // Удаляем пустые спаны
    $content = preg_replace('/<span>\s*<\/span>/i', '', $content);
    return $content;
}
add_filter('the_content', 'wpelementor_remove_empty_tags', 20);

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

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

Расширение фильтра для удаления пустых тегов из виджетов Elementor

Для очистки виджетов и других элементов Elementor добавьте аналогичный фильтр:

add_filter('elementor/frontend/the_content', 'wpelementor_remove_empty_tags', 20);

Это позволит очищать HTML, генерируемый самим Elementor, улучшая качество кода и уменьшая его размер.

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

Если вы не хотите писать код самостоятельно, можно воспользоваться плагинами, которые помогут оптимизировать HTML:

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

Эти инструменты помогают не только удалить пустые теги, но и повысить общую производительность сайта на WordPress с Elementor.

Практические рекомендации по предотвращению появления пустых тегов

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

• Регулярно проверяйте содержимое виджетов и блоков на предмет пустых элементов.
• Используйте условное отображение в Elementor, чтобы скрывать блоки, если они пустые.
• Старайтесь не оставлять пустые колонки или секции без контента.
• При использовании динамического контента через ACF, WPRemark или другие плагины убедитесь, что поля заполнены, либо используйте проверки в шаблонах.

Пример условного отображения в Elementor с помощью PHP-шорткода

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

function wpelementor_conditional_acf_content( $atts ) {
    $field = get_field( $atts['field'] );
    if ( ! empty( $field ) ) {
        return '<div class="custom-content">' . esc_html( $field ) . '</div>';
    }
    return '';
}
add_shortcode( 'wpelementor_acf_conditional', 'wpelementor_conditional_acf_content' );

Используйте шорткод [wpelementor_acf_conditional field="my_field"] в Elementor, чтобы избежать вывода пустых блоков.

Выводы и советы опытному пользователю

Удаление и предотвращение пустых HTML-тегов важно для чистоты кода и оптимизации сайта на WordPress с Elementor. Комбинация автоматических фильтров, использования плагинов и правильной организации контента позволит добиться качественного результата.

Для комплексной оптимизации рекомендую ознакомиться с плагином Clearfy Pro, который предлагает множество решений для очистки и ускорения сайта.

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