Как удалить верстку пустых блоков в WordPress: практическое руководство

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

Почему появляются пустые блоки и как они влияют на верстку

Пустые блоки в WordPress — это, как правило, элементы <div>, <p> или другие теги, которые не содержат текста, изображений или других вложенных элементов. Они появляются по нескольким причинам:

• Оставшиеся после удаления контента блоки в редакторе Gutenberg.
• Автоматически добавляемые пустые теги плагинами.
• Ошибки в шаблонах темы, которые выводят блоки без проверки содержимого.

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

Как найти пустые блоки в коде WordPress

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

<div></div>
<p></p>
<section></section>

В редакторе Gutenberg можно переключиться в режим кода, чтобы увидеть, какие блоки пусты.

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

function wptemy_log_empty_blocks( $content ) {
    if ( preg_match_all( '/<([a-z]+)([^>]*)>\s*<\/\1>/i', $content, $matches ) ) {
        error_log( 'Пустые блоки: ' . print_r( $matches[0], true ) );
    }
    return $content;
}
add_filter( 'the_content', 'wptemy_log_empty_blocks', 20 );

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

Как удалить пустые блоки с помощью PHP-фильтра в WordPress

Самый надежный способ — это обработать вывод контента и удалить пустые теги до рендеринга страницы. Для этого можно использовать регулярные выражения.

Пример функции для удаления пустых div и p блоков:

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

Добавьте этот код в functions.php вашей темы. Он сработает на этапе вывода поста и уберет пустые теги, которые портят верстку.

Расширение фильтра на другие теги

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

function wptemy_remove_empty_tags( $content ) {
    $tags = [ 'div', 'p', 'section', 'article' ];
    foreach ( $tags as $tag ) {
        $pattern = sprintf( '/<%1$s[^>]*>\s*<\/ %1$s>/i', $tag );
        $content = preg_replace( $pattern, '', $content );
    }
    return $content;
}
add_filter( 'the_content', 'wptemy_remove_empty_tags', 99 );

Использование JavaScript для удаления пустых блоков на фронтенде

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

Пример скрипта на jQuery:

jQuery(document).ready(function($) {
    $('div, p, section, article').each(function() {
        if ( !$(this).html().trim() ) {
            $(this).remove();
        }
    });
});

Этот код проверяет каждый блок и если он полностью пустой — удаляет его из DOM. Чтобы подключить скрипт, добавьте в functions.php:

function wptemy_enqueue_scripts() {
    wp_enqueue_script( 'wptemy-clean-empty-blocks', get_template_directory_uri() . '/js/clean-empty-blocks.js', [ 'jquery' ], null, true );
}
add_action( 'wp_enqueue_scripts', 'wptemy_enqueue_scripts' );

Создайте файл clean-empty-blocks.js в папке js темы и вставьте туда скрипт.

Лучшие плагины для борьбы с пустыми блоками и оптимизации контента

Если хочется готовое решение, обратите внимание на плагины:

• Clearfy — плагин для оптимизации и очистки сайта, включая удаление пустых тегов.
• WPRemark — плагин для отзывов, который аккуратно выводит блоки и минимизирует пустые элементы.

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

Профилактика появления пустых блоков в редакторе Gutenberg

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

• При удалении контента блока удаляйте сам блок, а не только текст.
• Используйте визуальный режим редактора для контроля за структурой.
• При разработке кастомных блоков проверяйте, что они не выводят пустой HTML-код при отсутствии данных.

Также можно добавить проверку вывода в PHP-функции, например:

function wptemy_render_custom_block( $attributes ) {
    if ( empty( $attributes['content'] ) ) {
        return '';
    }
    return '<div class="custom-block">' . esc_html( $attributes['content'] ) . '</div>';
}

Таким образом, пустой блок просто не появится на странице.