Як прибрати тег "figure" у WordPress редакторі блоків Gutenberg при вставці зображень та замінити його на простий параграф "p"

Привіт:) У цій короткій замітці покажу як швидко позбавитися несемантичного тегу <figure>, у який новий WordPress-редактор Gutenberg автоматично обертає зображення при його додаванні у вміст посту чи сторінки.

HTML-код вставленого зображення через блок Зображення приблизно виглядає так:

<figure class="wp-block-image size-full">
<img decoding="async" src="http://petrov.local/wp-content/uploads/2022/02/img-1.png" alt="" class="wp-image-7" srcset="http://petrov.local/wp-content/uploads/2022/02/img-1.png 500w, http://petrov.local/wp-content/uploads/2022/02/img-1-300x180.png 300w" sizes="(max-width: 500px) 100vw, 500px" width="500" height="300">
</figure>

Іноді виникає необхідність позбутися цього тегу. Як варіант, можна його замінити на <p>. В результаті код вище виглядатиме наступним чином:

<p class="wp-block-image size-full">
<img decoding="async" src="http://petrov.local/wp-content/uploads/2022/02/img-1.png" alt="" class="wp-image-7" srcset="http://petrov.local/wp-content/uploads/2022/02/img-1.png 500w, http://petrov.local/wp-content/uploads/2022/02/img-1-300x180.png 300w" sizes="(max-width: 500px) 100vw, 500px" width="500" height="300">
</p>

Цього можна досягнути, додавши наступний PHP-код у файл functions.php:

add_filter( 'render_block', function ( $block_content, $block ) {
	if ( 'core/image' === $block['blockName'] ) {
		$block_content = str_replace(
		array( '<figure ', '</figure>' ),
		array( '<p ', '</p>' ),
		$block_content
		);
	}

return $block_content;

}, 10, 2 );

Ще один спосіб:

add_filter( 'the_content', function( $content ) {
	$content = str_replace( "<figure", "<p", $content );
	$content = str_replace( "</figure>", "</p>", $content );
	$content = str_replace( "<figcaption", "<p", $content );
	$content = str_replace( "</figcaption>", "</p>", $content );
	$content = str_replace( "<img", '<img decoding="async" ', $content );
	return $content;
} );

Тут використовується фільтр the_content. Також для тегу <img> додається атрибут decoding="async". Останній дозволяє прискорити завантаження сторінки за рахунок того, що рендеринг усієї сторінки та декодування завантаженого із сервера зображення виконуються паралельно (асинхронно). Якщо на сайті є галерея, то і в ній відбудеться заміна тегів.

Якщо для зображення необхідна обгортка div і щоб вона та підпис до картинки форматувалися якимось особливим класом, замініть тег <figure> на <div class="article-img">, а тег <figcaption> на <div class="img-descr"> або будь-який інший таким чином:

add_filter( 'the_content', function( $content ) {
	$content = str_replace( "<figure", '<div class="article-img"', $content );
	$content = str_replace( "</figure>", "</div>", $content );
	$content = str_replace( "<figcaption", '<div class="img-descr"', $content );
	$content = str_replace( "</figcaption>", "</div>", $content );
	$content = str_replace( "<img", '<img decoding="async" ', $content );
	return $content;
} );

Михайло Петров
Михайло Петров

Мене звати Михайло. Я — WordPress-розробник. Створюю візитки, корпоративні сайти, блоги на WordPress.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *