HTML5: Cómo sustituir automáticamente «img» con «figure» en WordPress

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

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

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

 

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 5 / 5. Total de votos: 2

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

9 comentarios en “HTML5: Cómo sustituir automáticamente «img» con «figure» en WordPress”

  1. Como siempre muy bien explicado el procedimiento. Para los que no sabemos ¿Que ventaja tiene utilizar este cambio?.
    Aprovecho para darte las gracias por tu labor

      1. Dice Francisco que le problema es la compatibilidad… por lo que deduzco que esta adaptación tiene ventajas e inconvenientes… ¿Recomiendas adaptar o esperar?

        Gracias…

        1. Se me ocurrió mirar el código fuente de algunas páginas de este Sitios, y no encontré figure sino img, por lo que parece que Fernando decidió no hacer la adaptación… En cualquier caso, supongo que dentro de poco no será necesario adaptar, pues html5 será por defecto…

          Gracias de nuevo…

    1. Francisco Ch.

      Pero como todo el problema es compatibilidad, mientras que los usuarios naveguen desde navegadores modernos todo bien

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba
Ir al contenido