💡Руководства

WordPress: Как убрать тег <р> в контенте и изображениях

В WordPress автоматически вставляет HTML теги <p></p> после абзаца, когда в редакторе нажимаете Enter. Кроме того, пустые теги без текста <p></p> могут присутствовать в тексте вокруг шорткода и также обертываться в изображениях с тегом <p><p style="text-align: center;"><img src="image.jpg"></p>.

Я недавно столкнулся с данной проблемой, когда плагин шорткодов оставлял пустые теги <p></p> и советы из Интернета по фильтрам функций не привели к результатам. Тогда я начал тестировать и редактировать код, который исправил данную проблему. Кроме того, если нужно убрать теги <p> из обвертывания картинок, то также опишу как это сделать.

Как убрать пустые теги <p> в контенте вокруг шорткода

Этот фильтр автоматически удаляет обёртки <p> и <br> вокруг шорткодов [code]. Вставьте ниже хук в файл functions.php.

add_filter('the_content', 'shortcode_empty_paragraph_fix');
function shortcode_empty_paragraph_fix($content) {
$array = array(
'<p>[' => '[',
']</p>' => ']',
']<br />' => ']',
']<br>' => ']',
);

$content = strtr($content, $array);

return $content;
}
убрать пустые теги P в wordpress

Как убрать пустые теги <p> в контенте

Если нужно убрать пустые теги <p></p> в контенте, то добавьте следующую функцию в файл functions.php.

function remove_empty_p_tags($content) {
return preg_replace('#<p>(\s|&nbsp;)*</p>#i', '', $content);
}
add_filter('the_content', 'remove_empty_p_tags', 20);

Как убрать теги <p> из всего контента

wpautop - это встроенная функция WordPress, которая находит двойные переводы строк и превращает их в <p>…</p> и одинарные переводы строк превращает в <br/>. Данный способ рекомендуется везде в Интернете, в том числе и на официальном форуме WordPress, но я не рекомендую данный код, так как весь текст будет выводиться сплошняком, без автоматических абзацев и переносов. Это может привести к полной поломке структурированного контента на страницах и сайте в целом.

Текст в WordPress в классическом редакторе при нажатии Enter обертывается автоматически в <p> теги. Если нужно убрать <p> из всего контента, то скопируйте в functions.php следующий код, который также уберет тег <br> (перенос строки).

remove_filter('the_content', 'wpautop');
remove_filter('the_excerpt', 'wpautop');

Как убрать теги <p> в изображениях

Если вставлять изображения в WordPress через Enter, то <img> обернется в тег <p>, что не логично для разметки HTML, так как тег <p> обозначает абзац. Лучше всего обернуть в <figure> или просто оставить <img> без абзаца. Нынешние алгоритмы Яндекса и Google отлично понимают, что данная фича WordPress с тегом <p> вокруг картинок – это особенность. Прямого влияния на SEO замечено не было и по логике не должно быть, так как на данном движке много сайтов и поисковики понимают весь смысл. Если кто хочет убрать <p> вокруг <img> картинок, то код будет следующий в  functions.php.

function remove_p_tags_around_images($content) {
return preg_replace(
'/<p>\s*(<a [^>]+>\s*)?(<img [^>]+>)(\s*<\/a>)?\s*<\/p>/i',
'$1$2$3',
$content
);
}
add_filter('the_content', 'remove_p_tags_around_images');

Кроме того, в WordPress работает автоматическая функция выравнивания <p style="text-align: center;">, которая делает по центру изображения, если центровать в редакторе, что опять не логично, так как тег для текста. Чтобы убрать автоматический тег <p style="text-align: center;">, который выравнивает изображения по центру, вставьте следующий хук в functions.php.

function remove_centered_p_tags($content) {
// Убираем только <p> с атрибутом style="text-align: center;"
return preg_replace('/<p[^>]*style=["\']text-align:\s*center;?["\'][^>]*>(.*?)<\/p>/i', '$1', $content);
}
add_filter('the_content', 'remove_centered_p_tags', 20);

Так как центрование убрали, то редактируем стиль и выравниваем изображения по центру. Откройте style.css и найдите .aligncenter, который приведен ниже. Если его нет, то напишите его в style.css. Ниже два примера, где последний более логичный.

.aligncenter {
text-align: center;
}

или более совершенный для капризных шаблонов:

.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}

выровнить каринки по центру
Мы получили чистый тег <img> в WordPress, но я решил сделать более лучше для SEO и логики, вставив автоматически тег <figure> для изображения. Другими словами, убираем из изображений тег <p> и <p style="text-align: center;">, после чего вставляем тег <figure>. Если выше вставляли 2-ой код, удалите его и вставьте этот:

function replace_p_with_figure_no_caption($content) {
return preg_replace_callback(
'/<p[^>]*>\s*(<a [^>]+>\s*)?(<img [^>]+>)(\s*<\/a>)?\s*<\/p>/i',
function ($matches) {
$link_open = isset($matches[1]) ? $matches[1] : '';
$img_tag = $matches[2];
$link_close = isset($matches[3]) ? $matches[3] : '';
$figure = '<figure>';
$figure .= $link_open . $img_tag . $link_close;
$figure .= '</figure>';
return $figure;
},
$content
);
}
add_filter('the_content', 'replace_p_with_figure_no_caption', 20);

⚠️Настоятельно рекомендую проверить множество страниц, категорий и другие элементы сайта на корректность отображения верстки. Не забудьте очистить кэш WordPress, кэш Clodflare, если подключен и проверить в браузере режим инкогнито.

Смотрите еще: