Envolver imágenes del contenido de WordPress, listo para schema

Seguramente habrás tenido la necesidad de envolver las imágenes de tu contenido en WordPress con un div (o cualquier otra etiqueta).

El caso más común (sirva como ejemplo) sería el de los schemas donde al utilizar el schema Article debemos tener declaradas las imágenes del mismo como ImageObject que contienen un atributo src.

Esto es un problema de forma nativa, ya que la función the_content no permite incrustar contenido extra respondiendo a una etiqueta concreta. Vamos, que no podemos decirle a the_content() que meta todas las etiquetas <img> dentro de un div con la clase «imagen-molona».

¿Y esto es un problema a la hora de trabajar con schemas? Pues sí, porque no podemos etiquetar debidamente las imágenes.

Hay más casos en los que nos interesaría envolver las imágenes con un div (o un <a >, por ejemplo); pero voy a centrarme en el ejemplo de los schemas porque se ve mejor la idea.

Entendiendo los schemas

Los schemas o formatos enriquecidos le dan a los motores de búsqueda (o de indexación, en general) información extra sobre nuestro contenido. De forma sencilla y para que se entienda sin entrar en mucho detalle, etiqueta nuestro contenido para especificar qué es cada cosa.

En el ejemplo que estamos tratando (un artículo de un blog) estaríamos utilizando el schema Article (bastante obvio, ¿no?).

Con los schemas podemos etiquetar información como:

• Quién lo escribió
• A qué entidad pertenece
• La fecha de publicación y/o modificación
• Las imágenes
• El propio contenido
• Y un montón de optiones más

Entonces, ¿para qué queremos etiquetar nuestros contenidos con schemas? Para SEO. Para optimizar y mejorar la indexación de nuestros contenidos en motores de búsqueda como Google o Bing.

Implementando schemas en WordPress

Aunque esto da para un artículo en si mismo (lo redactaré en el futuro), en esta entrada me limitaré a explicar cómo hacerlo con las imágenes, ya que tendremos que filtrar el contenido para hacerlo. Y os compartiré el código.

No obstante, a modo de resumen, deberemos modificar nuestro tema o theme para añadir estas propiedades en las diferentes plantillas (o templates) que utilizamos en nuestro sitio. Habitualmente modificaremos el single.php y el page.php de nuestros temas. Como digo… para otro artículo.

Añadiendo los schemas a las imágenes del contenido

El principal problema de WordPress, como mencioné antes, es que imprime todo el contenido directamente con una función: the_content().

Esto significa que, si queremos añadir una capa extra a nuestras imágenes, deberemos filtrar este contenido y añadirlo por otras vías.

Lo primero que te voy a enseñar es el concepto de lo que queremos conseguir:

<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
    <img src="..." alt="..." itemprop="url" />
</div>

Si te fijas, verás que el div que contiene la imagen posee los atributos itemprop, itemscope e itemtype. Estos son atributos propios del schema, con lo que indicamos qué tipo de propiedad vamos a declarar, que el div es el rango al que aplica dicha propiedad y el tipo de dato que vamos a declarar respectivamente.

Aplicar estos cambios en WordPress

Como digo, es necesario atacar a la función the_content() que utilizamos en nuestro tema para filtrarlo y envolver las imágenes con un div que contenga las propiedades que hemos visto antes.

Esto lo hacemos con un filter, tal que así:

add_filter( 'the_content', 'bf_images_wrap_schemas', 12 );

Con este filtro actuamos sobre el hook «the_content»; el encargado de sacar el contenido del artículo o página de la base de datos e imprimirlo.

Cuando llegue el momento, llamaremos a la función bf_images_wrap_schemas, que tendrá esta forma:

function bf_images_wrap_schemas( $content ) {
	// Expresión regular para encontrar las etiquetas <img>
	$pattern = '/(<img([^>]*)>)/i';

	// Con qué vamos a reemplazar esas etiquetas img. $1 responde a la etiqueta img encontrada, así no perdemos su contenido.
	$replacement = '<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">$1</div>';

	// En este caso sólo aplicamos el cambio en los single
	if( is_singular() ){
	   // run preg_replace() on the single's $content
	   $content = preg_replace( $pattern, $replacement, $content );
	}

   // Devolvemos el contenido filtrado
   return $content;
}

Con esto, ya estamos obteniendo el resultado deseado; sólo nos falta añadir la propiedad (itemprop) url a la propia etiqueta img.

En este caso, como tenemos que modificar la propia etiqueta, tenemos que utilizar otra vez el filtro the_content con una nueva función:

add_filter('the_content','bf_add_image_itemprop');
function bf_add_image_itemprop($content) {
    $content = str_replace('<img','<img itemprop="url"', $content);
    return $content;
}

En este filtro simplemente reemplazamos todas las coincidencias del contenido con «<img» por «<img itemprop=»url»«.

Y listo, ya tenemos nuestras imágenes marcadas debidamente con las propiedades del schema.

¿Te ha resultado útil esta entrada? ¡Compártela con tus amigos!