Si quieres que tu web genere código HTML5 y envuelva las imágenes de tus contenidos con la etiqueta HTML5 <figure> en vez de la clásica <img> aquí tienes unos cuantos trucos para conseguirlo.
Un método es simplemente envolver cualquier imagen con <figure>, para lo que tendrás que añadir esta función a tu plugin de personalizaciones o al archivo functions.php del tema activo:
|
1 2 3 4 5 6 7 8 9 |
add_filter( 'image_send_to_editor', function( $html, $id, $caption, $title, $align, $url, $size, $alt ) { if( current_theme_supports( 'html5' ) && ! $caption ) $html = sprintf( '<figure>%s</figure>', $html ); return $html; } , 10, 8 ); |
Funcionará siempre y cuando la imagen no tenga leyenda ( caption)
Si quieres un método más limpio, que sustituya cualquier etiqueta de párrafo e imagen en el contenido por <figure> entonces igual este código te va mejor:
|
1 2 3 4 5 6 7 8 9 10 |
function cambiar_img_por_figure( $content ) { $content = preg_replace( '/<p>\\s*?(<a rel=\"attachment.*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s', '<figure>$1</figure>', $content ); return $content; } add_filter( 'the_content', 'cambiar_img_por_figure', 99 ); |
Y, para terminar, una versión del código anterior pero usando DOMDocument sería así:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
add_filter('the_content', function ($content) { libxml_use_internal_errors(true); $dom = new DOMDocument(); $dom->loadHTML('<?xml encoding="utf-8" ?>' . $content); $images = $dom->getElementsByTagName('img'); foreach ($images as $image) { $child = $image; $wrapper = $image->parentNode; if ($wrapper->tagName == 'a') { $child = $wrapper; $wrapper = $wrapper->parentNode; } if ($wrapper->tagName == 'p') { $figure = $dom->createElement('figure'); $figure->setAttribute('class', $image->getAttribute('class')); $image->setAttribute('class', ''); $figure->appendChild($child); $wrapper->parentNode->replaceChild($figure, $wrapper); } } libxml_use_internal_errors(false); return str_replace(['<body>', '</body>'], '', $dom->saveHTML($dom->getElementsByTagName('body')->item(0))); }, 99); |
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!
