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:

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!

Puede mejorarNo está malMe gustaEs bueno¡Excelente! (3 votos, promedio: 5,00 de 5)
Cargando…

¿Quieres recibir contenidos exclusivos?

Deja un comentario

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

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril de 2016 (GDPR), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.