Añadir una clase automáticamente a cada imagen en el editor de WordPress

El uso de frameworks como Bootstrap simplifica la creación de sitios web, al aportar una librería de utilidades que ayudan a construir los elementos más comunes de un sitio web. Una vez te has familiarizado con las clases que aporta el framework, es sólo cuestión de adaptar el código HTML a las necesidades específicas. En el caso de WordPress encuentro de gran utilidad añadir la clase “img-resposive” en las imágenes que se introducen a través del propio editor de medios. Antes existía la posibilidad de añadir clases adicionales a las imágenes, desde el propio editor de WordPress, pero tras una actualización reciente ya no es posible hacerlo. Esto nos deja la opcion de añadir a mano en el código HTML la clase que queramos, cosa muy fácil pero que no puedes olvidar. Lo peor es que lo tenga que hacer una persona que no eres tú, y que recuerde como hacerlo cada vez que sube una imagen.

El código que aparece a continuación extrae el contenido de post a través del hook “the_content” y gracias al uso de la clase DOMDocument de PHP, se recorre el documento HTML para extraer cada etiqueta de imagen y agregarle la clase correspondiente.

Como se puede comprobar primero se convierte la codificación del contenido a UTF-8 con la función mb_convert_encondig y tras comprobar que hay contenido, se crea una instancia de la clase DOMDocument. A partir de aquí es cuestión de recorrer las imágenes del contenido y añadir la clase especificada (img-responsive) a la clase/s que tuviera.

Nótese el uso del filtro ‘the_content’ para pasar el resultado de la función. Hay que entender que todas estas operaciones consumen recursos (se ejecutan en el servidor al cargar la página) y son apropiadas para sitios administrados por personas que carecen de los conocimientos de HTML. También será posible hacerlo via jQuery o JavaScript con un método similar al descrito. También sería útil para migrar un tema de WordPress hacia otro que depende de ciertas clases CSS para mostrar adecuadamente el contenido. Por supuesto, el ejemplo es para agregar una clase específica, pero podría ser utilizado para cualquier etiqueta y con cualquier clase / atributo.

Hay que recordar que este código puede ir en el archivo functions.php de nuestro tema, o quizás preferible, en un plugin aparte donde pondremos las funciones y utilidades de nuestro sitio web.

2 respuestas a “Añadir una clase automáticamente a cada imagen en el editor de WordPress

  1. Muchas gracias por el recurso, para aportar un granito de arena remplazando la línea 7 por:
    $document->loadHTML(utf8_decode($content),LIBXML_HTML_NOIMPLIED);
    ayuda a que el documento no introduzca las etiquetas html, body
    adicionalmente veo util despues de la linea 15
    $html = str_replace(”,”,$html);
    lo cual elimina el doctype que da un mal aspecto en el inspector de codigo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *