Пустые HTML-теги в контенте WordPress могут появляться по разным причинам: ошибки при копировании текста, некорректная работа редактора, некачественные темы или плагины. Они не только ухудшают семантику страницы, но и влияют на производительность и SEO. В этой статье подробно разберём, как эффективно находить и удалять пустые теги в WordPress без использования сторонних плагинов, прямо в коде темы или через функции сайта.
Почему появляются пустые теги в WordPress и как их выявить
Пустые теги — это HTML-элементы без содержимого, например, <p></p>, <div></div>, <span></span>. Они появляются по нескольким причинам:
- Редактор Gutenberg иногда создаёт пустые параграфы при переключении между блоками.
- При копировании текста из сторонних источников в редактор вместе с форматированием попадают лишние пустые теги.
- Некорректно запрограммированные шаблоны или шорткоды, которые возвращают пустой HTML.
- Автоматические визуальные редакторы, которые могут оставлять пустые контейнеры.
Чтобы найти такие теги, можно использовать инструменты разработчика браузера и просмотреть исходный код страницы. Если пустых тегов много, стоит автоматизировать процесс очистки прямо на стороне WordPress.
Как удалить пустые теги с помощью фильтра контента WordPress
Самый простой и эффективный способ — подключить функцию, которая будет фильтровать весь контент перед выводом и удалять пустые HTML-теги. Для этого в файл functions.php вашей темы добавим следующий код:
function wplessons_remove_empty_tags($content) {
// Регулярное выражение для поиска пустых тегов <p>, <div>, <span> и т.д.
$pattern = '/<(p|div|span|section|article|aside)([^>]*)>\s*<\/\1>/i';
// Убираем пустые теги в цикле, пока они есть
while (preg_match($pattern, $content)) {
$content = preg_replace($pattern, '', $content);
}
return $content;
}
add_filter('the_content', 'wplessons_remove_empty_tags');
Объяснение кода:
- Регулярное выражение ищет пустые теги
<p></p>,<div></div>,<span></span>, а такжеsection,article,aside. - Цикл
whileгарантирует удаление всех вложенных пустых тегов, которые могут появиться после удаления первых. - Функция подключается через фильтр
the_content, чтобы обработать основной контент поста перед выводом.
Этот подход подходит для большинства сайтов и не требует установки дополнительных плагинов.
Удаление пустых тегов из виджетов и пользовательских полей
Фильтр the_content работает только с основным контентом. Если пустые теги появляются в виджетах или других частях сайта, нужно применить аналогичный фильтр к другим хукам.
Очистка виджетов с текстом
Для удаления пустых тегов из виджетов с текстом используйте фильтр widget_text:
function wplessons_remove_empty_tags_widget($widget_content) {
return wplessons_remove_empty_tags($widget_content);
}
add_filter('widget_text', 'wplessons_remove_empty_tags_widget');
Обработка пользовательских полей и других данных
Если вы выводите пользовательские поля вручную через функцию get_post_meta, можно вручную применять очистку перед выводом:
$raw_meta = get_post_meta($post_id, 'your_meta_key', true);
$clean_meta = wplessons_remove_empty_tags($raw_meta);
echo $clean_meta;
Автоматическая очистка контента при сохранении поста
Чтобы не допускать появление пустых тегов в базе данных, можно очищать контент при сохранении поста. Для этого используем хук save_post:
function wplessons_clean_content_on_save($post_id) {
// Проверяем права пользователя и тип записи
if (wp_is_post_revision($post_id) || wp_is_post_autosave($post_id)) {
return;
}
$post = get_post($post_id);
if ($post->post_type !== 'post' && $post->post_type !== 'page') {
return;
}
$clean_content = wplessons_remove_empty_tags($post->post_content);
if ($clean_content !== $post->post_content) {
// Обновляем контент, если были изменения
wp_update_post([
'ID' => $post_id,
'post_content' => $clean_content
]);
}
}
add_action('save_post', 'wplessons_clean_content_on_save');
Этот метод гарантирует, что в базе не будет сохраняться пустых тегов, что уменьшит нагрузку на парсер и улучшит качество HTML.
Использование плагина Clearfy для оптимизации и очистки HTML
Если вы хотите получить более расширенный функционал по очистке и оптимизации кода, обратите внимание на плагин Clearfy Pro. Помимо удаления пустых тегов, он умеет:
- Оптимизировать вывод кода и удалять лишние атрибуты.
- Убирать ненужные скрипты и стили.
- Автоматически удалять комментарии в HTML.
Это полезно для комплексной оптимизации кода вашего сайта.
Советы по предотвращению появления пустых тегов в будущем
Для минимизации появления пустых тегов придерживайтесь следующих рекомендаций:
- Используйте качественные темы и плагины, которые корректно формируют разметку.
- При копировании текста из внешних источников очищайте форматирование через блокнот или специальные инструменты.
- Регулярно проверяйте контент с помощью инспектора кода и удаляйте лишние элементы.
- При разработке шорткодов и шаблонов всегда проверяйте, что они возвращают непустой валидный HTML.
Так вы уменьшите количество пустых тегов и улучшите качество сайта.