Como personalizar las Entradas relacionadas de Jetpack

El plugin Jetpack es la navaja suiza de WordPress: ¡Todo en uno 🤩!. Tiene tantas opciones que incluso puedes perderte en ellas.

Una de las opciones más interesantes es la posibilidad de agregar en los post de WordPress un espacio destinado a entradas relacionadas.

Pero existe un detalle, este plugin por lo general no permite conservar la misma estética que tengas en tu web 🤔, por lo que parecerá colocado de manera forzada dentro de él.

En este artículo te mostraré como personalizar las Entradas relacionadas de Jetpack mediante CSS para que tenga el mismo estilo de tu sitio web.

¿Qué son las Entradas relacionadas de Jetpack?

Las entradas relacionadas son, ese espacio que se coloca por defecto al final de los artículos y que muestra ya sea con imágenes, texto o ambos, otros artículos relacionados con el que acabamos de leer.

Con esto lo que hacemos es invitarlos a seguir leyendo, manteniendo al lector enganchado en nuestro blog 😍

Esto al fin y al cabo es lo que se  busca en todo sitio web: mientras más permaneces navegando en él, más probable es que adquieras sus productos, hagas clic a la publicidad (si es que existe), o simplemente vuelvas una y otra vez a la web.

¿Qué otra cosa puedes pedir para tu blog?

Existen diversos plugins para Entradas relacionadas (Related Post en inglés) en el repositorio de WordPress. Aquí encontrarás algunos.

La mayoría de ellos tiene una desventaja, y es que tienden a sobrecargar el servidor donde está alojado el sitio web, ya que requieren de mucho procesamiento para funcionar, razón por la que incluso algunos hostings prohíben su instalación en WordPress 😵

El plugin Jetpack tiene entre sus opciones la posibilidad de agregar Entradas relacionadas de manera sencilla y rápida, y lo mejor: el procesamiento de los datos se realiza en los servidores de los creadores del plugin, por lo que no sobrecargará tu servidor.

¡Es un ganar ganar en toda regla!

Activando Related post en Jetpack

Antes que nada, debemos activar las entradas relacionadas en Jetpack, para que se muestren en WordPress.

En la administración de WordPress, ve a Jetpack, dirígete a Ajustes y luego haz clic a la pestaña Tráfico.

Ahora haz clic al pasador que pone: Muestra contenido relacionado después de las entradas, para activarlo.

Recomiendo marcar las dos opciones disponibles: Destacar contenido relacionado con un encabezado y Mostrar una imagen en miniatura donde esté disponible.

Con ello agregaremos un título que se mostrará encima de entradas relacionadas, que podremos personalizar a nuestro gusto.

También se mostrará la imagen miniatura que hayamos colocado como Imagen destacada en el artículo.

¡Listo!, con estos simples pasos tendremos habilitado las Entradas relacionadas de Jetpack en nuestro sitio web 😉

Dirígete a algún artículo y podrás verlas al final del post, por lo general antes de los comentarios.

Más opciones disponibles para Entradas relacionadas de Jetpack

Si queremos adaptar aún más las Entradas relacionadas de Jetpack a nuestras necesidades, debemos ir al personalizador de WordPress.

En el backend de WordPress vamos a: Apariencia > personalizar.

Ahora vamos a la pestaña Entradas relacionadas, que se muestra al final a la izquierda.

Si no ves opciones disponibles, debes navegar (en la página a la derecha del personalizador) a algún artículo de tu web donde se muestren las entradas relacionadas, pero que veas los cambios en vivo.

Entre las posibilidades de cambio, en principio, están las dos que seleccionamos en la pestaña Trafico de Jetpack.

Aquí podremos cambiar el título de la cabecera del widget.

Uno que me gusta y uso en mis webs es: También te puede interesar 😋

De igual forma, podremos seleccionar la opción de tener la fecha y el contexto, que no es más que la categoría de WordPress donde ubicaste el artículo.

Asimismo, podremos seleccionar que se muestre los Related post en forma de Rejilla (horizontal) o Lista (vertical).

Dando estilo a los Related post de Jetpack con CSS

Ahora vamos a por lo que has venido a este artículo 😁, como personalizar con CSS las entradas relacionadas de Jetpack para que mantengan el estilo de tu web.

Es necesario que conozcas de antemano el estilo CSS de tu sitio web. Por ejemplo: tipos de fuentes tipográficas, así como su color y grosor. Entre otras.

Esto por lo general se define en el mismo personalizador de WordPress, en las pestañas de tipografía y color. Pero varía mucho, dependiendo del tema que tengas habilitado.

Para agregar el código CSS, ve en el personalizador a la pestaña: CSS adicional.

En el espacio en blanco podrás agregar los códigos que te muestro a continuación, uno debajo del otro, dependiendo de lo que quieras modificar.

Cambiando el color de las fuentes tipográficas del título de los artículos relacionados

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
   color: #000000;
}

Sustituye en valor después de la # por el que quieras que sea el color de la fuente a mostrar. Por ejemplo: 000000 es color negro puro, FFFFFF es blanco puro, FF0000 es rojo, 0000FF  es azul, etc.

Para obtener el valor hexadecimal del color de tu preferencia, puedes usar esta útil herramienta online.

Margen, tamaño y tipo de fuente tipográfica del título de los artículos relacionados

#jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title {
   margin-top: 10px;
   font-family: "Open Sans", sans-serif;
   font-size: 16px;
}

1. Cambiando el valor que acompaña a margin-top, podrás definir el espacio superior que hay desde el título a la imagen relacionada. No modifiques el valor px que precede al número.
2. Con font-family, podrás definir la fuente que desees. Si usas Google Fonts, esta guía puede ser de utilidad.
3. Modificando el valor que está posterior font-size, podrás aumentar o disminuir el tamaño de la fuente tipográfica del título de los artículos relacionados.

Color y decoración al pasar el ratón por encima de la tipografía del título de los artículos relacionados de Jetpack

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a:hover {
   color: #FF0000;
   text-decoration: none;
}
#jp-relatedposts div.jp-relatedposts-items div.jp-relatedposts-post:hover .jp-relatedposts-post-title a {
   text-decoration: none;
}

• Igual que el primer código CSS, podrás definir el color de la fuente, pero en este caso al pasar el ratón por encima del título.
  Debes cambiar el valor FF0000 , por el color hexadecimal de tu preferencia.
• Por defecto, Jetpack le coloca un subrayado al pasar el ratón por encima. Con el código text-decoration: none; este desaparece. Si deseas mantener el subrayado, simplemente borra las dos líneas de código text-decoration: none;

Distancia entre el final del articulo y las entradas relacionadas

#jp-relatedposts {
   padding-top: 40px;
}

Si quieres aumentar el margen que hay entre el final del artículo de wordpress y el widget Related post de Jetpack, modifica el valor después de padding-top. Mientras mayor sea el número, mayor la distancia de separación.

Personalizando el título de la cabecera del Widget

#jp-relatedposts h3.jp-relatedposts-headline {
   font-family: "Open Sans", sans-serif;
   font-weight: 600;
   text-transform: uppercase;
   font-size: 20px;
   color: #444444;
}

Con el código anterior personalizamos la fuente de la cabecera del widget.

1. El número que acompaña a font-weight, define el grosor de la fuente, entre mayor sea el número, más gruesa es. Cambia en múltiplos de 100.
   Este número varía mucho de fuente en fuente, pero por regla general: 300 delgada, 400 normal, 600 es negrita, 700 negrita más oscura.
2. Con text-transform definimos si la letra se mostrará como minúscula, toda mayúscula, capital, etc. En este link obtendrás más información sobre sus propiedades.

Las demás propiedades ya los definimos con anterioridad 🙂

Borrando el borde superior del título de la cabecera del Widget

Por defecto Jetpack muestra un borde encima del título de la cabecera del widget.

Esto para dar la sensación de separación entre el artículo y las entradas relacionadas.

Si quieres eliminarlo agrega este código:

div#jp-relatedposts h3.jp-relatedposts-headline em:before {
   border-top: none;
}

Con este finalizamos nuestro artículo, espero sea de utilidad. Cualquier duda déjala en los comentarios, que yo gustosamente responderé 😊. Saludos.