Modificar el widget de Top Posts de Jetpack es algo realmente sencillo. En especial por lo fácil que es hacer muchas modificaciones a WordPress gracias a sus hooks.

Para quienes no lo sepan, un hook es básicamente un punto en el cual nos podemos colgar para realizar una acción. Normalmente una función.

En mi caso, yo necesitaba cambiar la apariencia de widget “Top Posts” de Jetpack.

Ya que el mismo no tiene forma de cambiar la forma en el cual se muestran las entradas. Y menos para cambiar el tiempo a considerar.

El objetivo es que se pareciera lo más posible al de “Entradas Recientes”.

Primero, investigamos

Después de estar revisando durante un buen rato, encuentre parte de mi solución en el sitio oficial de Jetpack.

En ella, simplemente debo de adjuntar dos funciones al archivo “functions.php” de mi tema. Una vez hecho el tema hijo, agrego los segmentos y ya tengo la primera parte del problema resuelto.

Con el hook “jetpack_top_posts_days” nosotros podemos modificar el número de días que se han de considerar para generar las entradas más populares.

Mientras que con “jetpack_widget_top_posts_after_post” podemos agregar cualquier dato que queramos. En este, igualmente aprovecho para agregar la fecha, aunque descubro que no puedo cambiar los tags del nombre de la entrada. Lastima, eso significa que una parte de la solución va a tener que ser puro CSS.

Termine agregando las siguientes funciones:

Le agregue la clase “widgets-list-layout-links” al “Div” para que pudiéramos cambiar su apariencia vía CSS.

Escarbamos más dentro de Top Posts de Jetpack

Una de las grandes ventajas del Open Source es que podemos mirar el código fuente de las aplicaciones que queramos. En mi caso, encontré el código fuente del widget que quería. Pero, no encontré una forma de como cambiar el tamaño de las imágenes mostradas. Ni tampoco de como evitar que use el servicio Phonon.

Posiblemente hay alguna forma de evitar lo último, pero por ahora ese no era un tema de alta prioridad.

Por fortuna, veo que “jetpack_top_posts_widget_image_options” es lo que necesito para solucionar mi problema con los tamaños de la imagen.

Las imágenes aparecían con un tamaño de 40px, pero las necesitaba en al menos 150px para que se vieran “decentes”.

Tras escarbar un poco en que datos le pasaba a mi función, simplemente hago lo siguiente:

Así es, simplemente sobre-escribo lo que tenga el array y ya estamos. Al menos con PHP.

Estilizando Top Posts de Jetpack con CSS

Imitar la apariencia en el widget Top Posts de Jetpack fue un tanto especial.

Tuve que usar mucho el Inspector de código de Google Chrome para darme una idea de donde se estaban estilizando las cosas.

El primer gran problema era que Top Posts usa “divs” internos. Por lo cual ordenar el contenido podía ser un poco difícil. Esto por que el tema original lo hacia diferente.

Pero con esto lo logré:

Con este segmento, cambio la apariencia del icono mostrado para los Top Posts.

Mientras que no soy fan del !important, parece ser la única manera en la cual se aplicaba el cambio en su tamaño. Todavía tenia que mover el texto adjunto un poco y darle mejor apariencia.

Con estos ya estamos casi listos. Esto cambia la apariencia de los enlaces en el interior del espacio del widget de Top Posts. Cambiamos la fuente, así como el espacio, el color y el comportamiento cuando pasamos el ratón sobre ellos.

Incluso pegamos un poco más el texto a la imagen, para darle una mejor consistencia.

Y con esto cambiamos la apariencia de la fecha mostrada. La hacemos más pequeña y cambiamos su color. Para que se parezca lo más posible al original.

Conclusión

Los cambios en el CSS mostrados aplican solamente al tema que uso actualmente, “Lovecraft”. Diferentes temas tendrán diferentes aspectos que deberás de cambiar para que se vean de la forma en la cual necesitas.

En mi caso, solo era emular. Y aun así tuve que meter mano para realizar varios cambios.

Lo que si me quedo claro, es que siempre será mejor el crear un tema hijo. Aun cuando no juguemos con el código HTML o PHP del tema.

¿Esto por qué? Ya que no sabemos en que momento vamos a necesitar hacer cambios a la apariencia que requieran de hacer uso de un tema hijo. De esa forma ya estamos preparados de antemano.

Si bien existen formas de agregar el código mediante plugins, para mi es mejor hacerlo directamente en el tema.

Aunque bueno… los cambios hechos igual podrían agregarse como un plugin, eventualmente. Esa es la gran flexibilidad que WordPress da.