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 84

Instagrammer crea marca propia y una estudiante que pide consejo

Publicado el 9 diciembre, 2018

En este episodio, inauguramos sección en el podcast titulada Backlog. Andros explica que este nombre viene de la metodología Scrum y nuestro objetivo en esta sección es contar las soluciones o nuestras respuestas a situaciones reales que nos plantean. Es una sección dirigida a...

Dedicamos este episodio a los efectos que ha tenido internet en el turismo y el cambio tan profundo que han experimentado las ciudades. Para ello contamos con Eva Collados, una colega que además de ser una profesional de la web y del diseño gráfico,...

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