HTML5: Cómo sustituir automáticamente "img" con "figure" en WordPress • Ayuda WordPress

Publicado por Fernando Tellado el 5 Nov, 2018

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:

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 );

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:

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 );

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í:

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);