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-responsive” 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 opción 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.

logo podcast república web

Escucha mi podcast sobre la web y los negocios en internet

República Web es un podcast dirigido a todas las personas interesadas por la web y los negocios en internet. Escucha los episodios y suscríbete a través de los canales donde se aloja el podcast.

Episodio 77

PyConES2018 y hablamos sobre los eventos tecnológicos

Publicado el 12 octubre, 2018

Dedicamos este episodio a hablar de la conferencia Python PyConES2018 celebrada la semana pasada en Málaga. Aprovechando la participación de Andros, hablamos de este importante evento Python, su trayectoria, los perfiles de las personas que participan y el creciente protagonismo de las mujeres con...

Episodio 76

Podcasting con Emilio Coppola de radiocasters.com

Publicado el 3 octubre, 2018

Con la excusa del International Podcast Day celebrado el pasado domingo 30 de septiembre, hemos invitado al diseñador y programador Emilio Coppola, creador de la plataforma para podcasts radiocasters.com Esta plataforma es una alternativa independiente y gratuita para los creadores de podcasts que necesiten...

Información acerca del uso de cookies y del Reglamento General de Protección de Datos (UE) 2016/679

Este sitio web hace uso de cookies para mejorar la experiencia del usuario. Esto incluye cookies propias y de terceros. En la sección de condiciones puedes consultar los datos que se podrían recopilar, su objeto, las medidas de seguridad sobre los mismos y los derechos de rectificación y borrado. Más información